Как внедрить разметку schema.org для страниц интернет-магазина

В нашем руководстве вы узнаете:

  1. Зачем нужна разметка для страниц интернет-магазина?
  2. Как настроить микроразметку на странице товаров?
  3. Как настроить микроразметку на страницах категорий?
  4. Как проверить валидность разметки?

Зачем нужна разметка для страниц интернет-магазина

В 2011 году компании Google, Yahoo, Bing и Яндекс с целью улучшить понимание поисковых данных, объединились для работы над созданием единого формата микроразметки schema.org.

Отличить сайты с микроразметкой и без, можно по сниппету в результатах поиска Google.

Расширенный снимет с микроразметкой

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

В поисковой выдаче расширенные сниппеты выглядят привлекательнее и влияют на частоту кликабельности так как дают часть информации о товаре:

  • цену;
  • наличие товара;
  • рейтинг товара (обозначается звездами).

Как настроить микроразметку на странице товаров

Далее мы подробно опишем какие элементы необходимо разметить на сайте для вывода расширенных сниппетов в поиске Google.

Хлебные крошки

Хлебные крошки — это название от дословного перевода английского термина breadcrumbs, представляют собой навигационную цепочку ссылок, показывая вложенность страниц.

Зачем нужны хлебные крошки

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

Сниппет товарной страницы с разметкой

Итак, осиновые причины по которым на вашем сайте должны быть хлебные крошки:

  • улучшение юзабилити;
  • дополнительная перелинковка разделов;
  • увеличение привлекательности сниппета в поисковой системе и увеличение переходов.

Как настроить на сайте хлебные крошки

Рекомендации Google по внедрению хлебных крошек (строки навигации) на сайте: https://developers.google.com/search/docs/data-types/breadcrumb?hl=ru

Пример разметки хлебных крошек:

<div itemscope="" itemtype="http://schema.org/BreadcrumbList">
<div itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://сайт/">
<span itemprop="name">Главная</span></a>
<meta itemprop="position" content="1">
</div>
<div itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://главная/ссылка-на-категорию/">
<span itemprop="name">Название категории</span></a>
<meta itemprop="position" content="2">
</div>
<div itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://главная/ссылка-на-категорию/ссылка-на-страницу">
<span itemprop="name">Название страницы</span></a>
<meta itemprop="position" content="3">
</div> </div>

Разметка товара

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

Микроразметка товара

Как добавить микроразметку на товары

Для того чтобы цена и рейтинг товара появилась в сниппете в результатах поиска Google необходимо добавить микроразметку https://schema.org/Product

Пример разметки для товаров:

<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Название товара</span>
<span itemprop="image" img src="url-адрес изображения товара" />

<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
Рейтинг <span itemprop="ratingValue">4</span>/5
основан на <span itemprop="reviewCount">11</span> оценках
</div>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="priceCurrency" content="UAH">грн.</span> // Валюта
<span itemprop="price" content="499">499</span> // Цена
<link itemprop="availability" href="http://schema.org/InStock" />В наличии
</div>

<span itemprop="description">Краткое описание товара</span>

<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Заголовок отзыва</span>
от <span itemprop="author">Имя покупателя</span>,
<meta itemprop="datePublished" content="2016-12-01">Декабрь 12, 2016
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content = "1"> // Минимальная оценка
<span itemprop="ratingValue">4</span>/ // Оценка пользователя
<span itemprop="bestRating">5</span>звезд. // Максимальная оценка
</div>
<span itemprop="description">Отзыв о товаре</span>
</div>
</div>

Как настроить микроразметку на странице категории

Микроразметка для страниц категории товаров позволит отображать в сниппете Google поиска перечень цен от минимальной до максимальной и общий рейтинг товаров.

Пример разметки который необходимо поместить в раздел «body»:

<div itemscope="" itemtype="http://schema.org/Product">
<p itemprop="Name">Название категории</p>
<div itemtype="http://schema.org/AggregateOffer" itemscope="" itemprop="offers">
<meta content="5244" itemprop="offerCount">
<meta content="12555" itemprop="highPrice">
<meta content="99" itemprop="lowPrice">
<meta content="UAH" itemprop="priceCurrency">
</div> </div>

Элементы разметки:

  • «lowPrice» самая низкая цена товара;
  • «highPrice» самая высокая цена товара;
  • «priceCurrency» название валюты.

Как проверить валиность разметки

Проверять внедренную разметку нужно инструментом от Google «Проверка расширенных результатов»:

https://search.google.com/test/rich-results

Проверка валидности микроразметки

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

Роман Малина/ автор статьи
Upmotion.agency