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

free website builder

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

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

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

В Яндексе

Mobirise

В Google

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

А вот Offer — это уже что-то, что имеет цену. Билет в театр, товар или что-то другое.
Соответственно, для того чтобы сделать микроразметку товара — надо использовать оба типа разметки.

Представим, что мы продаем билеты в кино. У нас есть:
  1. Название фильма
  2. Описание фильма
  3. Изображение (постер)
  4. Цена билета
  5. Валюта
По данным 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) и множество другого. Рекомендую максимально подробно разметить всю информацию, которую удалось добавить к себе на сайт для лучшего эффекта.

ПОДЕЛИТЕСЬ ЭТОЙ СТРАНИЦЕЙ!

Может быть интересно

Mobirise

Микроразметка контактов организации Sсhema.org

Микроразметка организации несет в себе намного больше потенциала, но так или иначе все сводится к тому, что ваш сайт проще парсить. Т.е. собирать с него структурированную информацию для последующий обработки.

Mobirise

Правильные хлебные крошки на сайт с микроразметкой Schema

Первоначально хлебные крошки использовались для удобства навигации пользователей. По сути — это блок ссылок вверху страницы, отображающие иерархию сайта. Т.е. пользователь может вернуться, к примеру, на предыдущую страницу каталога в интернет-магазине.

© Copyright 2018 alferov.su - все права защищены