Микроразметка карточки товара 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