Микроразметка карточки товара очень важный элемент интернет-магазина или каталога товаров. Размечая товар мы передаем поисковому роботу много дополнительной информации, с помощью которой в поисковой выдаче формируется красивый и выразительный сниппет. Такой сниппет привлекает больше внимания, а следовательно и посетителей.
Я уже писал обзорную статью про разметку shema.org. Данная публикация дополняет ее в вопросе микроразметки карточки товара интернет-магазина или каталога товаров.
Shema.org — это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года.
Цель семантической разметки – сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного её представления в результатах поиска.
Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов и не требует создания отдельных экспортных файлов.
Микроразметка карточки товара – это специальная настройка описаний товаров при помощи особых тегов, которые позволяют представить важные сведения при поисковой выдаче прямо в сниппете.
Благодаря микроразметке прямо в сниппете отображается цена товара, рейтинг товара, число отзывов, производитель, наличие на складе и технические характеристики. То есть правильно составленная микроразметка дает возможность:
- структурировать данные для поисковых роботов;
- предлагать расширенный информативный сниппет для пользователей.
В результате человек, согласно маркетинговым исследованиям, более склонен продолжить поиски нужного ему товара именно в том интернет-магазине, который порадовал его таким содержательным сниппетом.
Стандарт представляет из себя набор классов, описывающих всевозможные сущности и их свойства. Сейчас их уже несколько сотен. Постоянно идет работа по улучшению стандарта, добавляются новые свойства, уточнятся существующие.
Познакомиться с описанием стандарта можно на официальном сайте в разделе документация.
Также существует неофициальный и пока неполный перевод стандарта на русский язык на сайте: http://ruschema.org
Так же много информации в Яндекс справке вебмастера: https://yandex.ru/support/webmaster/schema-org/
Если микроразметка создается больше для пользователей и поисковых систем, то в чем ее ценность для SEO-оптимизации?
Действительно, наличие микроразметки и правильность ее составления напрямую не влияет на продвижение сайта. Но нужно учитывать, что с ее помощью поисковыми ботами легко и правильно идентифицируется содержимое веб-страницы. Затем в удобной компактной форме сведения предоставляются пользователям.
В результате получается, что при правильной настройке микроразметки улучшаются показатели кликабельности (CTR) и растет трафик. Соответственно, владельцы сайта довольны, т. к. увеличиваются продажи, а это их главная цель. Ну, и за счет привлечения целевой аудитории улучшаются поведенческие факторы, а это положительно влияет на ранжирование.
Размечаем карточку товара при помощи shema.org
Существует несколько общепринятых форматов (правил) микроразметки. Самый популярный — schema.org.
Для настройки микроразметки стандарта schema.org, представленного поисковиками в 2011 г, применяют два тега:
- Product – включает название, изображение, а также описание товаров. Тут же при желании указывают: торговую марку, номер и серию модели, расцветку, артикул, способы доставки.
- Offer (для Aggregate Offer) позволяет вывести в сниппет стоимость (Price), статус (наличие товара), валюту, отображенную в соответствии со стандартом ISO4217 Currency code.
Микроразметка товаров в интернет-магазинах и каталогах товаров:
| Свойство или объект | Описание свойства |
|---|---|
http://schema.org/Product |
Указывается для начала разметки товара |
http://schema.org/Offer |
Указывается для начала разметки свойств товара |
http://schema.org/Review |
Указывается для начала разметки отзывов товара |
http://schema.org/Rating |
Указывается для начала разметки рейтинга |
name |
Название товара |
image |
Изображение товара |
price |
Цена товара |
priceCurrency |
Валюта товара. Например: RUB, EURO, USD и т.д. |
availability |
Доступность товара. Возможные значения:
|
description |
Описание товара |
http://schema.org/AggregateRating |
Указывается для начала разметки рейтинга товара |
ratingValue |
Сформированный рейтинг товара на основании голосов (оценка пользователей) |
reviewCount |
Количество голосований (оценок) за рейтинг товара |
brand |
Бренд товара |
model |
Модель товара (артикул) |
sku |
Остаток на складе (количество) |
priceValidUntil |
Срок актуальности цены (до какого срока цена будет такой же) |
name |
Заголовок отзыва (название) |
author |
Автор отзыва (ФИО) |
datePublished |
Дата публикации отзыва |
worstRating |
Минимальная оценка отзыва |
ratingValue |
Сформированный рейтинг отзыва на основании голосов (оценка пользователей) |
bestRating |
Максимальная оценка отзыва |
description |
Текст отзыва |
Пример размеченной картчки товара интернет-магазина:
<div itemscope itemtype="http://schema.org/Product">
<span >Наименование_товара</span>
<a href="/ссылка-на-изображение.jpg"><img src="/ссылка_на_изображение.jpg" /></a>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4</span>
<span itemprop="reviewCount">9</span> //рейтинг 4 основан на 9 оценках
</div>
<div itemprop="description">Описание_товара</div>
<div>Производитель: <span itemprop="brand">Название_бренда</span></div>
<div>Модель: <span itemprop="model">Номер_модели</span></div>
<div>Остаток на складе: <span itemprop="sku">4</span></div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="priceCurrency" content="RUB">руб.</span>
<span itemprop="price">1000</span>
<span><link itemprop="availability" href="http://schema.org/InStock"/>В наличии</span>
<meta itemprop="priceValidUntil" content="2020-07-14T21:30">
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span >Заголовок отзыва</span>
от <span >Имя пользователя</span>,
<meta content="2020-07-14T21:30">
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1"> //Минимальная оценка
<span itemprop="ratingValue">4</span> //Оценка пользователя
<span itemprop="bestRating">5</span>звезд. //Максимальная оценка
<span itemprop="description">текст_отзыва</span>
</div>
</div>
</div>
Дополнительные параметры
Чтобы заинтересовать потенциального клиента, владельцы сайта и SEO-специалисты часто указывают в сниппете оставленные клиентами отзывы. Для этого задействуют тег карточки товара Review:
<div itemprop=”review” itemscope itemtype=”http://schema.org/Review”> – типичная строчка, характеризующая используемый тег, чтобы поисковая система понимала, о чем речь
<span itemprop=”name”>название для приводимого отзыва</span>
<span itemprop=”author”>имя (ник) того, кто оставил комментарий</span>
<meta itemprop=”datePublished” content=”дата, когда отзыв был опубликован“></div>
Еще одним важным моментом выступает рейтинг, по которому пользователь оценивает популярность рассматриваемого товара. Чтобы отобразить этот параметр, прибегают к помощи тега AggregateRating:
<div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”> – открывающая строчка
<span itemprop=”ratingValue”>оценка</span>
<span itemprop=”reviewCount”>общее число проголосовавших</span> #рейтинг «A» основан на количестве «B» оценок
<div itemprop=”reviewRating” itemscope itemtype=”http://schema.org/Rating”> – открывающая строчка
<meta itemprop=”worstRating” content = “0“>#Минимально возможная оценка
<span itemprop=”ratingValue”>X</span>/ #Оценка пользователя
<span itemprop=”bestRating”>10</span>звезд./#Максимально возможная оценка
Внимание! Каждый интернет-магазин и товар имеет свои особенности: где-то отсутствуют отзывы или нет названия бренда и т.д. Поэтому не всегда удается разметить товар подробно. Это не критично, указывайте что реально есть на сайте.
Использование микроразметки для прочих категорий интернет-магазина
Первоначально интернет-магазины применяли микроразметку для описания отдельных наименований продукции и корректного отображения данных о товаре поисковыми роботами. Google, Yandex и Bing руководствовались при этом следующими соображениями – если в сниппете будут приведены ключевые параметры товара, то пользователям проще будет отыскать желаемое.
Однако впоследствии отдельные теги микроразметки нашли применение и для оформления/отображения других разделов. Например, Product нельзя применять для страниц категорий и подкатегорий, но зато ничто не мешает задействовать Listltem или даже Aggregate Offer. В роли дополнительных элементов тогда применяют:
- offercount – число имеющихся товаров;
- highprice и lowprice для обозначения, соответственно, наивысшей и самой низкой цены.
Ко всем страницам сайта, включая категории товаров, зачастую применяют микроразметку Organization, а чтобы отобразить навигационную цепочку (хлебные крошки) используют BreadcrumbList.
Если в дополнении к интернет-магазину идет блог, то для микроразметки текстов применяют Article.
Проверка микроразметки карточки товаров
Для проверки микроразметки используют один из соответствующих инструментов популярных поисковиков:
- Структурированные данные в Google.
- Валидатор микроразметки в Яндекс.
- Средства проверки разметки в Bing.
Если будет выявлена ошибка, то каждый из сервисов скажет, в чем она заключается и где находится.
Для создания микроразметки преимущественно используют специальные плагины, написанные под популярные CMS.
За счет этого удается быстро осуществить настройку, снизив вероятность ошибок.
Все созданные сайты и интернет-магазины нашей веб-студией WebTend Екатеринбург обязательно получают микроразметку shema org в базовой комплектации создания сайта или интеренет-магазина.
Мы размечаем "крошки" - breadcrumbs, категории товаров, карточку товара, все материалы. Дополнительно вводится микроразметка вашей организации с адресом, телефоном, графиком работы, координатами офиса, основным видом деятельности и др. для всех страниц сайта или интернет-магазина, микроразметка мероприятий для сайта событий.
