Обсудим ваш проект?

Микроразметка товаров с примерами и инструкцией


Просмотров:
1247
Время на прочтение:
Статья обновлена:
25 Июня 2020
Информация о статье
Просмотров: 1247
Время на прочтение:
Статья обновлена: 25.06.2020
Дарья, редактор
Дарья, редактор

Микроразметка товаров – набор дополнительных тегов, благодаря которым поисковики могут корректно понимать содержимое страницы. Простое внедрение структурных элементов HTML-кода, позволит выделиться на фоне конкурентов, но обо всем по порядку.

Зачем нужна микроразметка для товаров?

В поисковой выдаче, страница представляется в виде сниппета – заголовка, описания товара и т.д. Также в него могут входить другие элементы:

  • Изображение,
  • Рейтинг,
  • Цена,
  • Общая информация о товаре (наличие, бренд, модель, способы доставки и т.д.).

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

Сниппет каждой страницы сайта имеет свой показатель кликабельности (CTR), который рассчитывается как соотношение показов к кликам.

Глядя на эту схему, становится ясным, что привлекательность сниппета – один из ключевых факторов, влияющих на посещаемость сайта (при условии, что он попал в выдачу). Оформить карточку страницы в поисковой выдаче можно с помощью микроразметки, указав роботу на основные элементы товара. Таким образом, CTR можно существенно увеличить, замотивировав пользователя перейти на сайт. В некоторых случаях это может положительно повлиять на SEO ранжирование сайта (при условии, что страница, на которую ведет карточка, полностью релевантна запросу пользователя).

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

Основные виды микроразметки

Каждый вид имеет свой синтаксис, а также предназначается для решения определенных задач.

  • Schema.org – популярный стандарт семантической разметки, который понимают все основные поисковики. Именно о нем пойдет речь в этой статье.
  • Open Graph – технология от Facebook, позволяет публиковать ссылки с расширенной информацией о странице. Преимущественно, это нужно для красивого отображения ссылки в социальных сетях. На сегодняшний день эту микроразметку поддерживают все крупные соц. сети: ВКонтакте, Twitter, Facebook, Telegram и т.д.

Внедряем микроразметку для интернет-магазина

Настраивать микроразметку Schema.org нужно непосредственно в HTML-коде сайта. Сделать это можно либо вручную, установив код, либо используя специальные плагины, если сайт работает на готовой CMS.

Код разметки устанавливается внутри тегов <body>, а во внутрь каждого из свойств подставляется динамический параметр товара. Готовые же плагины, особенно для популярных движков сайтов, автоматически генерируют код для каждой страницы.

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

  • Product и Offer – в первом случае речь идет о самом товаре, во втором о предложение. Например, параметры смартфона, и его ценовые характеристики. Оба этих варианта используются, когда предлагается на одной странице единичный товар или услуга.
  • Product и AggregateOffer – подходит для агрегаторов, сайтов, которые собирают несколько предложений из разных источников. К примеру, продажа телефона, но по факту его можно приобрести в разных местах. Агрегатор для удобства собирает цены и характеристики товара в одном месте. Хочется отметить, что на странице может быть размещен один товар, если это условие игнорируется, то сниппет по микроразметке не будет формироваться.

Примеры контейнеров

Сюда вставляется код с информацией о товаре
Код, связанный с ценой товара

Разметка для страницы товаров

В микроразметке у карточки товара есть несколько свойств:

  • 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) – метод доставки.


XIAOMI Mi 9t 64Gb

XIAOMI Mi 9t 64Gb – красивый и стильный смартфон, с топовой начинкой и современными функциями безопасности.
24990 RUB
В наличии

Микроразметка и «хлебные крошки»

Хлебные крошки показывают вложенность товара в общей структуре сайта. Например, «Адрес сайта>Смартфоны>Xiaomi> Xiaomi Mi9t», эту конструкцию можно вынести в сниппет, тем самым улучшив его вид. Для этого применяется свойство «BreadcrumbList» (дочерний элемент ItemList):

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

Не рекомендуется использовать схемы Product и AggregateOffer для разметки категорий. Некоторые вебмастера злоупотребляют этими свойствами, но в случае обнаружения, могут последовать санкции со стороны поисковых систем.

Но все же расскажем, как это делается на примере.

Отзывы и рейтинг

Если страница товара содержит в себе рейтинг и отзывы пользователей, то рекомендуется отобразить эту информацию в микроразметке. Google охотно показывает в сниппетах, частично или полностью, текст отзыва, и рейтинг в виде цифровых значений (например, 4,7 из 5) и количества звезд.

Пример микроразметки в выдаче Google
Пример микроразметки в выдаче Google

Для разметки отзывов, используем свойство Review, для него существуют следующие параметры:

  • Name – заголовок отзыва.
  • Author – имя автора.
  • ReviewBody – текст отзыва
  • DatePublished – когда был опубликован.
  • ReviewRating – рейтинг (оценка).
Убийца флагманов!
4,8 5
Телефон быстрый, красивый, есть все необходимое.

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

После внедрения микроразметки, ее обязательно необходимо проверить на валидность. Делается это через специальные сервисы самих поисковых систем:

  1. Валидатор Яндекса.
  2. Валидатор Google.

Валидатор Яндекса

На выбор можно проверить по URL интересующей страницы, либо отдельный кусок HTML-кода. В первом случае валидатор покажет всю разметку, а во втором, соответственно, из выбранного фрагмента кода.

Валидатор микроразметки
Валидатор микроразметки

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

Валидатор Google

Аналогично валидатору Яндекса, вставляем URL сайта или фрагмент кода. Однако, окно просмотра результата удобнее: оно делится на два экрана, где на первом отображается код, а на втором разметка по вкладкам.

Валидатор Google
Валидатор Google

Примеры ошибок в микроразметке
Примеры ошибок в микроразметке

Как видно на примере, были обнаружены ошибки, которые необходимо исправить, в противном случае поисковик может не корректно прочитать разметку или не прочитать вовсе.

Продвинем ваш интернет-магазин!
Знаем специфику и уже помогли более 100 интернет-магазинам получить высокие позиции и качественный трафик. Подходим комплексно: аналитика, SEO-оптимизация, контент, ссылки, юзабилити. Над каждым проектом работает от 6 до 10 специалистов.

1 место SEO для e-commerce RatingRuneta.ru

1 место
SEO для e-commerce
RatingRuneta.ru

9 место в Топ-100 SEO-компаний России

9 место
В топ-100 SEO-
компаний России

11 место в топ-100 SEO-агентств Рунета

11 место
В топ-100 SEO-
агентств Рунета

Золотая сотня
Российского Digital

в топ-10 в SEO глазами клиентов 2014, 2016, 2017

В ТОП-10
«SEO глазами клиентов»


Нам доверяют

Жерихова А.В., директор ООО «Позитив»
Айзикович Б.И., генеральный директор ЗАО Медицинский центр «Авиценна»
Левчук Ю.С., управляющий ООО «ТФ Теплодар»