Микроразметка товаров — набор дополнительных тегов, благодаря которым поисковые роботы корректно воспринимают содержимое страницы. Внедрение некоторых структурных элементов HTML-кода позволит выделиться на фоне конкурентов, но обо всем по порядку. В этой статье мы расскажем об основных видах микроразметки, о том, как проверить ее валидность, и на примере разберем, как внедрить микроразметку на сайт интернет-магазина.
Зачем нужна микроразметка товаров
В поисковой выдаче страница выводится в виде сниппета — своего рода «анонса», состоящего из заголовка, описания товара и других элементов, например:
- изображения;
- рейтинга;
- цены;
- детальной информации о товаре (наличие, бренд, модель, способы доставки и т.д.).
Поисковый робот формирует сниппеты на основе данных, размещенных на сайте. Чтобы робот выбирал именно ту информацию, которая нужна для сниппета, используется микроразметка.
Сниппет каждой страницы сайта имеет свой показатель кликабельности (CTR), который рассчитывается как соотношение количества показов к количеству кликов.
Очевидно, что привлекательность сниппета — один из ключевых факторов, влияющих на посещаемость сайта (при условии, что сайт попал в выдачу). Оформить сниппет также помогает микроразметка. С ее помощью вы можете привлечь пользователя на сайт и тем самым увеличить CTR. Если страница, на которую ведет сниппет, полностью релевантна запросу пользователя, вы повлияете еще и на ранжирование сайта.
Сегодня, в условиях перегрева большинства коммерческих ниш и нешуточной борьбы за место в топе, качественно оформленный
сниппет — уже не показатель перфекционизма SEO-специалиста, а скорее необходимость.
Основные виды микроразметки
Выделим два вида, каждый из которых имеет свой синтаксис и предназначается для решения определенных задач:
- Schema.org — популярный стандарт семантической разметки, который понимают все популярные поисковики. Именно о нем пойдет речь в этой статье.
- Open Graph — технология от Facebook*, которая позволяет публиковать ссылки с расширенной информацией о странице. Преимущественно это нужно для привлекательного отображения ссылки в социальных сетях. Сегодня эту микроразметку поддерживают все крупные соцсети: «ВКонтакте», Twitter, Facebook*, Telegram и т.д.
Внедряем микроразметку для интернет-магазина
Настраивать микроразметку Schema.org нужно непосредственно в HTML—коде сайта. Сделать это можно либо вручную, установив код, либо используя специальные плагины, если сайт работает на готовой CMS.
Код разметки устанавливается внутри тегов <body>, а в каждое из свойств подставляется динамический параметр товара. Готовые же плагины, особенно для популярных CMS, автоматически генерируют код для каждой страницы.
Как отмечалось выше, в сниппет можно поместить название товара, категорию, цену, изображение, отзывы и рейтинг. Согласно инструкции Яндекса, рекомендуется придерживаться следующих схематических связок:
- Product и Offer. В первом случае речь идет о товаре, во втором — о предложении. Например, параметры смартфона и его ценовые характеристики. Связка используется, когда на одной странице предлагается один товар или услуга.
- Product и AggregateOffer. Подходит для агрегаторов — сайтов, на которых собираются предложения из разных источников. К примеру, объявления о продаже телефона, приобрести который можно на нескольких разных сайтах. Агрегатор удобен тем, что здесь в одном месте собраны все возможные цены и характеристики товара. Отметим, что на странице может быть размещен только один товар. Если это условие игнорируется, то сниппет формироваться не будет.
Обратите внимание на примеры контейнеров:
<div itemscope="" itemtype="http://schema.org/Product"> Сюда вставляется код с информацией о товаре </div>
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"> Код, связанный с ценой товара </div>
Микроразметка карточки товара
Микроразметка карточки товара включает следующие свойства:
- Name (Text) — название; присваивается к схеме Product.
- Description (Text) — описание; также присваивается к Product.
- Price (Number) — цена; относится к Offer.
- LowPrice (Number) — наименьшая цена со страницы агрегатора; относится к схеме AggregateOffer. В сниппете это значение будет отображаться как «от N руб.».
- PriceCurrency (Text) — валюта; может использоваться как в Offer, так и в AggregateOffer. Допускается использование кодов валют в соответствии с ISO 4217.
- Availability — свойство Offer, которое сигнализирует о наличии или отсутствии товара. Причем если товара нет в наличии, цена автоматически скрывается из сниппета.
- Image (Text) — адрес, по которому находится изображение товара (URL).
В число дополнительных свойств входят:
- Brand (Text) — бренд.
- Model (Text) — модель товара.
- Seller (Text) — продавец.
- AvailableDeliveryMethod (Text) — способ доставки.
<!--Схема Product-->
<div itemscope="" itemtype="http://schema.org/Product">
<!--Название товара-->
<h1 itemprop="name">XIAOMI Mi 9t 64Gb</h1>
<!--Описание товара-->
<span itemprop="description">XIAOMI Mi 9t 64Gb – красивый и стильный смартфон, с топовой начинкой и современными функциями безопасности.</span>
<!--Изображения товара-->
<img src="..." itemprop="image">
<!--Схема Offer (или AggregateOffer)-->
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<!--Цена товара -->
<span itemprop="price">24990</span>
<!--Валюта-->
<span itemprop="priceCurrency">RUB</span>
<div>В наличии</div>
<link itemprop="availability" href="http://schema.org/InStock"> </div>
</div>
Микроразметка «хлебных крошек»
«Хлебные крошки» показывают вложенность карточки товара в общей структуре сайта. Например, конструкцию «Адрес сайта» => «Смартфоны» => «Xiaomi» => «Xiaomi Mi9t» можно вынести в сниппет, тем самым улучшив его вид. Для этого применяется свойство BreadcrumbList (дочерний элемент ItemList):
<div itemscope="" itemtype="http://schema.org/BreadcrumbList">
<div itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"> <a itemprop="item" href="URL сайта"> <span itemprop="name">Главная страница</span></a> <meta itemprop="position" content="1"> </div>
<div itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a itemprop="item" href="URL/категория/"> <span itemprop="name">Название категории</span></a> <meta itemprop="position" content="2"> </div>
<div itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"> <a itemprop="item" href="URL/категория/страница-товара"> <span itemprop="name">Название страницы</span></a> <meta itemprop="position" content="3"> </div>
</div>
Микроразметка каталога
Для разметки категорий не рекомендуется использовать схемы Product и AggregateOffer. Некоторые вебмастера злоупотребляют данными свойствами, но это чревато санкциями со стороны поисковых систем.
Чтобы вы понимали, о чем речь, покажем на примере:
<div class="category-view" itemtype="https://schema.org/ItemList" itemscope="">
<div class="product" itemtype="https://schema.org/Product" itemprop="itemListElement" itemscope=""> </div>
</div>
Микроразметка отзывов и рейтинга
Если на странице товара есть его рейтинг и отзывы пользователей, то рекомендуем отобразить эту информацию в сниппете. В Google можно частично или полностью вывести текст отзыва, а также рейтинг в виде цифровых значений (например, 4,7 из 5) и звезд.
Пример сниппета с рейтингом в выдаче Google
Для разметки отзывов используйте свойство Review. Оно включает такие параметры:
- Name — заголовок отзыва.
- Author — имя автора.
- ReviewBody — текст отзыва.
- DatePublished — дата публикации.
- ReviewRating — рейтинг (оценка).
<div itemprop="review" itemscope="" itemtype="http://schema.org/Review"> <span itemprop="name">Убийца флагманов!</span> <span itemprop="author">Алексей</span> <meta itemprop="datePublished" content="2020-12-07">
<div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content="0"> <span itemprop="ratingValue">4,8</span> <span itemprop="bestRating">5</span> </div>
<span itemprop="reviewBody">Телефон быстрый, красивый, есть все необходимое.</span> </div>
Проверка валидности микроразметки
После внедрения микроразметки необходимо проверить ее на валидность. Для этого воспользуйтесь специальными сервисами поисковых систем:
Валидатор Яндекса
Здесь вы можете проверить корректность микроразметки по URL интересующей страницы либо по отдельному фрагменту HTML-кода. В первом случае валидатор покажет всю разметку с данной страницы, а во втором, соответственно, только выбранного фрагмента.
Валидатор микроразметки
Проверка микроразметки в валидаторе Яндекса
Валидатор Google
Аналогично работе с валидатором Яндекса здесь вставляем URL сайта или фрагмент кода. Отметим, что окно просмотра результата в валидаторе Google удобнее: оно делится на два экрана, на первом из которых отображается код, а на втором — разметка по вкладкам.
Валидатор Google
Ошибки в микроразметке
Как видно на примере, валидатор обнаружил в микроразметке ошибки, которые необходимо исправить. В противном случае поисковик может прочитать микроразметку некорректно или не прочитать ее вовсе.
* Meta Platforms Inc. (и принадлежащие ей соц.сети Instagram, Facebook) признана экстремистской организацией, ее деятельность в России запрещена.
