Микроразметка карточки товара

Зачем нужна микроразметка карточки товара

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

Например, вот так:

Яндекс

Google

Чтобы все заработало как надо — будем использовать формат schema.org под названием Product с дополнительным свойством Offer.
Product — позволяет сделать разметку не только для товара. По сути — это все, что можно продавать (и не только) на сайте. Даже услуги у которых нет фиксированной стоимости или, например, бесплатный шаблон для wordpress. Что угодно.

А вот Offer — это уже что-то, что имеет цену. Билет в театр, товар или что-то другое.

Соответственно, для того чтобы сделать микроразметку товара — надо использовать оба типа разметки.

Представим, что мы продаем билеты в кино. У нас есть:

• Название фильма
• Описание фильма
• Изображение (постер)
• Цена билета
• Валюта

По данным schema.org — название, описание и изображение у нас попадает под формат Product, а вот цена — это уже Offer.

Начинаем разметку

Для начала обернем контент в тег <div> с указанием, что мы используем микроразметку:

<div itemscope itemtype="http://schema.org/Product">
Название фильма
Описание фильма
Изображение (постер)
Цена билета
Валюта
</div>

Теперь укажем дополнительное свойство Product

<div itemscope itemtype="http://schema.org/Product">
Название фильма
Описание фильма
Изображение (постер)
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Цена билета
Валюта
</div>
</div>

А вот теперь самое время закончить разметку при помощи тега <span>

<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Название фильма</span>
<span itemprop="description">Описание фильма</span>
<img src="Изображение (постер)" itemprop="image">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">Цена билета</span>
<span itemprop="priceCurrency">Валюта</span>
</div>
</div>

Итоговый вариант будет выглядеть примерно так:

<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Назад в будущее</span>
<span itemprop="description">Отличный фильм о том, как Марти Макфлай попадает в прошлое</span>
<img src="marti.jpg" itemprop="image">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">150</span>
<span itemprop="priceCurrency">RUB</span>
</div>
</div>

Обратите внимание, что валюту надо указывать в формате ISO 4217

Кроме того, есть множество дополнительных свойств, которые можно указать — наличие товара на складе (http://schema.org/InStock), категория товара (category), цвет (color), бренд (brand) и множество другого. Рекомендую максимально подробно разметить всю информацию, которую удалось добавить к себе на сайт для лучшего эффекта.