Микроразметка карточки товара Schema.org
Schema.org — это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! в 2011 году.
Семантическая разметка помогает сделать интернет более понятным и структурированым: поисковые роботы лучше извлекают и обрабатывают информацию (где находится описание товара, название или модель). В результате информация представляется в результатах поиска в более удобном виде. Разметка производится в HTML-коде с помощью специальных атрибутов.
Использование семантической разметки для карточки товара позволит улучшить представление сниппета вашего сайта в результатах поиска, а значит привлечь больше внимания и посетителей.
Чтобы поисковый робот распознал данные товаров и цен в карточке товара вашего магазина, необходимо разметить страницы с использованием схем Product и Offer.
Схема Product для описания товара
Указываем схему Product
<div itemscope itemtype="http://schema.org/Product">
В поле name указывается наименование товара
<h1 itemprop="name">Название товара </h1>
В поле image указывается ссылка на картинку товара
<a itemprop="image" href="/img/Product.jpeg" title="Описание картинки " ><img src="/img/Product.jpeg" alt="альтернативный текст картинки"></a>
или:
<img itemprop="image"
src="/img/Product.jpeg"
>
В поле description даётся описание товара
<div itemprop="description">Описание товара или услуги</div>
Схема Offer — торговое предложение (цены, валюта, наличие)
Указываем схему Offer
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
В поле price указывается цена товара
<span itemprop="price">9490</span>
В поле priceCurrency указывается валюта
<span itemprop="priceCurrency">RUB</span>
или выводим метаинформацией, если указание на валюту не присутствует на странице:
<meta itemprop="priceCurrency" content="RUB">
В поле availability указывается доступность товара
<span itemprop="availability">Уже в продаже!</span>
или с помощью link если имеется ссылка (href=""):
<link itemprop="availability" href="http://schema.org/InStock"/>
а при отсутсвии товара:
<link itemprop="availability" href="http://schema.org/OutOfStock"/>
ПРИМЕР:
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Название товара</span>
<img itemprop="image" src="foto.jpg" alt='Фото товара' />
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price" content="1000.00">1000.00</span>
<span itemprop="priceCurrency" content="RUB">₽</span>
<link itemprop="availability" href="http://schema.org/InStock" />В наличии
</div>
<span itemprop="description">Описание товара</span>
Отзывы о товаре:
...
</div>
Схема Review — отзывы о товаре
Указываем схему Review
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
В поле datePublished указывается дата публикации отзыва
<span itemprop="datePublished" content="2014-07-22">22 июля 2014 года</span>
В поле author указываем имя автора
<span itemprop="author" class="name">Имя</span>
В поле description указываем сам отзыв на товар
<div itemprop="description
">Текст отзыва</div>
ПРИМЕР:
Отзывы о товаре:
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Название отзыва</span>
<span itemprop="author">Имя автора отзыва</span>,
<span itemprop="datePublished" content="2011-04-01">19 июня 2013г.</span>
<span itemprop="description">Текст отзыва</span>
</div>
После размещения разметки в карточке товара проверьте её правильность с помощью валидатора!
Валидаторы микроразметки
Яндекс: https://webmaster.yandex.ru/tools/microtest/
Google: https://search.google.com/structured-data/testing-tool/u/0/
Bing: https://www.bing.com/toolbox/markup-validator