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


Чтобы все заработало как надо — будем использовать формат 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) и множество другого. Рекомендую максимально подробно разметить всю информацию, которую удалось добавить к себе на сайт для лучшего эффекта.