В нашем руководстве вы узнаете:
- Зачем нужна разметка для страниц интернет-магазина?
- Как настроить микроразметку на странице товаров?
- Как настроить микроразметку на страницах категорий?
- Как проверить валидность разметки?
Зачем нужна разметка для страниц интернет-магазина
В 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
Микроразметка для товаров и категорий — является важным коммерческим фактором и учитывается при ранжировании как поисковой системой, так и посетителями, которые будут охотней переходить по расширенному сниппету, предоставляющему больше информации о странице с товаром.
