Микроразметка страниц - выдели себя среди конкурентов!
Назад к блогу
26.03.2018
Микроразметка страниц - выдели себя среди конкурентов!
Почему следует использовать микроразметку? Разметка страницы, благодаря дополнительным атрибутам и тегам, позволяет поисковым ботам подгружать расширенную информацию в сниппет, например, отзывы, рейтинги и т.д. Также предоставление поисковым системам более понятных структурированных данных поможет им быстрее инд...

Почему следует использовать микроразметку?

Разметка страницы, благодаря дополнительным атрибутам и тегам, позволяет поисковым ботам подгружать расширенную информацию в сниппет, например, отзывы, рейтинги и т.д. Также предоставление поисковым системам более понятных структурированных данных поможет им быстрее индексировать страницы, что в результате приведет к более скорому повышению позиций.

 

 

В наше время существует множество словарей и синтаксисов для внедрения микроразметки. Мы же рассмотрим микроданные - один из самых распространенных способов разметки данных, так как является частью HTML5, для корректного отображения, а в качестве словаря будем использовать Schema.org (стандарт микроразметки для поисковых систем с 2011 года). Для данной библиотеки существует русскоязычная неполная версия: ruschema.org (неофициальная версия, с переводом может помочь любой желающий).

 

О каких дополнительных атрибутах идет речь?

 

Itemscope - атрибут, разделяющий между собой сущности, может быть пустой.

Itemtype - атрибут, определяющий тип выделенной сущности.

Itemprop - атрибут, описывающий свойства выделенной сущности.

 

Шаблон для добавления микроразметки:

 

<div itemscope = “” itemtype=”http://schema.org/ссылканараздел”>

<span itemprop=”атрибут раздела”></span>

</div>

 

Наиболее часто используемые схемы:

 

http://schema.org/Product — схема, которая используется для описания товара

http://schema.org/Article — схема, которая используется для описания статей, новостей

http://schema.org/AggregateRating — схема, которая используется для отображения среднего рейтинга веб-страницы, в сниппете отображается в виде звездочек.

http://schema.org/Review — схема, которая используется для отображения отзывов.

 

Отображение в поисковых системах:

 

Микроразметка для контактных данных (LocalBusiness):

 

<div itemscope="" itemtype="http://schema.org/LocalBusiness">

<span itemprop="name">Название организации</span>

<!-- Контакты: -->

<div itemprop = "address" itemscope itemtype = "http://schema.org/PostalAddress">

<!-- Адрес: -->

<span itemprop="streetAddress">Улица, номер</span>

<span itemprop="postalCode">Индекс</span>

<span itemprop="addressLocality">Город</span>

</div>

<!-- Телефон: -->

<span itemprop="telephone">Телефон</span>

<!-- Электронная почта: -->

<span itemprop="email">info@site.com</span>

</div>

 

Микроразметка для хлебных крошек (Breadcrumb):

 

<div itemscope="" itemtype="http://schema.org/BreadcrumbList" id="breadcrumbs">

<!--1й элемент списка: -->

<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">

<a rel="nofollow" itemprop="item" title="Главная" href="ссылка">

<span itemprop="name">На Главную</span>

<meta itemprop="position" content="1"> </a> </span>

<!-- 2й элемент списка: -->

<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">

<a itemprop="item" title="Оптимизация" href="ссылка">

<span itemprop="name">Оптимизация</span>

<meta itemprop="position" content="2"> </a> </span>

<!-- и так далее -->

</div>

 

Микроразметка для товаров (Product):

 

<div itemscope itemtype="http://schema.org/Product" class="tovar">

<div itemprop="name" class="nazvanie">Наименование товара</div>

<div class="foto"> <img itemprop="image" src="tovar _1.jpg" /> </div>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offers"

class="tovar_info">

<div itemprop="brand" class="proizvoditel">Производитель</div>

<div class="price">Стоимость: <span itemprop="price">5000</span>

<span itemprop="price Currency">грн</span></div>

<div itemprop="description" class="desc">Описание товара</div>

<!-- Рейтинг товара: -->

<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">

<div itemprop="ratingValue">Средняя оценка</div>

<div itemprop="bestRating">Максимальная оценка</div>

<div itemprop="worstRating">Минимальная оценка</div>

<div itemprop="ratingCount">Количество голосов</div>

                     </div>

     </div>

</div>

 

Инструменты для работы с микроразметкой:

 

Structured Data Testing Tool – инструмент для проверки микроразметки (по ссылке или часть кода).

“Структурированные данные” в Search Console от Google -  раздел для проверки наличия и корректной настройки микроразметки на проиндексированных страницах.

“Маркер” в Search Console от Google – инструмент, который позволяет разметить некоторые страницы (контакты, статьи, товары и т.д.), не затрагивая HTML код, актуален только для Google.

 

Выводы:

Мы рассмотрели основные схемы микроразметки, которые просто необходимо внедрить на сайт. Конечно, с помощью Schema.org можно реализовать много и других различных схем и параметров, которые помогут преобразовать сниппеты ресурса, сделать их наиболее яркими и выделяющимися среди конкурентов. Достаточно помочь поисковым роботам выделить нужную информацию для сниппета, и положительные изменения со стороны пользователей не заставят себя ждать.