Микроразметка товаров интернет магазина

В этой статье расскажем, как правильно сделать разметку товаров, чтобы поисковые системы представили их в наиболее выгодном свете.

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

Для начала в двух словах напомним, что такое семантическая микроразметка. Это специальные метки на страницах сайта, невидимые для людей, но понимаемые поисковыми системами. Они нужны для того, чтобы сниппеты содержали точную и удобную для восприятия информацию.

Если брать интернет-магазин, то сведения о товаре в поисковой выдаче будут выглядеть так, как хочет вебмастер, а не так, как посчитает нужным сформировать робот. Это ведет к увеличению кликабельности сниппета, повышению целевого трафика и увеличению продаж.

В интернет-магазине разметке подлежат следующие разделы сайта:

  • главная страница;
  • общая информация о магазине;
  • хлебные крошки;
  • карточки товаров;
  • категории товаров;
  • отзывы и рейтинги.

В этой статье мы подробней остановимся на том, что непосредственно касается разметки, т. е. на трех последних пунктах.

Как сделать микроразметку товаров

Существует несколько способов микроразметки. Мы будем рассматривать самый распространенный – schema.org. Этот формат понимают все поисковые системы.

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

Приведем сначала пример того, как выглядит карточка без разметки. Для простоты понимания здесь убраны лишние детали, которые никак не затрагиваются разметкой.

<h1>Помогатор Helpme 5.7 Pro</h1>
<img src="/help57.png" itemprop="image">
<div>17 257 руб</div>
<div>Помогатор Helpme 5.7 Pro поддерживает 777 видов помощи, в том числе 111 совершенно новых видов, которых не было в предыдущей модели Helpme 5.6.93 Pro.</div>
<div>Производитель: FixiikiLtd</div>
<div>Артикул: FixiikiLtdHelpme57Pro</div>

Та же самая карточка, но уже с разметкой.

<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name"> Помогатор Helpme 5.7 Pro</h1>
<img src="/ help57.png" itemprop="image">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div>17 257 руб</div>
<meta itemprop="price" content="17257.00">
<meta itemprop="priceCurrency" content="RUB">
</div>
<div  itemprop="description"> Помогатор Helpme 5.7 Pro поддерживает 777 видов помощи, в том числе 111 совершенно новых видов, которых не было в предыдущей модели Helpme 5.6.93 Pro. </div>
<div>Производитель: <span itemprop="brand"> FixiikiLtd</span></div>
<div>Артикул: <span itemprop="model">FixiikiLtdHelpme57Pro</span></div>
</div>

В первой строке объявляется использование словаря schema.org, тип разметки – Product. В общем теге Product находится тег типа Offer. Он описывает величину цены и используемую валюту.

Для передачи поисковику полной информации о продукте использованы следующие параметры:

  • name – наименование (параметр обязательный);
  • image – рисунок;
  • price – цена (обязательный);
  • priceCurrency – валюта;
  • description – более подробное описание;
  • brand – производитель, бренд;
  • model – артикул модели.

Существует много других дополнительных параметров. Вот некоторые из них:

  • seller – наименование продавца (обычно применяется в тех интернет-магазинах, где товар предоставляют разные продавцы);
  • availableDeliveryMethod – способы доставки;
  • priceSpecification – цены продукта, налогов и доставки;
  • availability – доступность продукта.

Формат применения последнего параметра следующий.

<div>В наличии</div>
<link itemprop="availability" href="http://schema.org/InStock">
</div>

Также имеются отдельные атрибуты для маркировки отзывов и рейтингов товаров. Их мы разберем ниже.

Микроразметка рейтинга товаров

Вот как выглядит микроразметка рейтинга товара там, где есть звездочки.

<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
Рейтинг <span itemprop="ratingValue">8</span>/5
на основании <span itemprop="reviewCount">17</span> оценок
</div>

Здесь все понятно.

А вот как размечается рейтинг при оценке пользователя.

<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content = "0">
<span itemprop="ratingValue">6</span>
<span itemprop="bestRating">10</span>
</div>

Здесь используются следующие атрибуты:

  • worstRating – минимально возможная оценка рейтинга товара;
  • ratingValue – оценка продукта пользователем;
  • bestRating – максимально возможная оценка.

Вот как блок этого рейтинга выглядит внутри отзыва.

<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Классный смартфон</span>
от <span itemprop="author">Иван Отзывчивый</span>,
<meta itemprop="datePublished" content="2019-29-11">

<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content = "0">
<span itemprop="ratingValue">7</span>
<span itemprop="bestRating">10</span>
</div>
<span itemprop="reviewBody">Отличный телефон! Всем рекомендую!</span>
</div>
</div>

Здесь тоже все понятно из контекста.

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

Формально разметки для категории не существует. Здесь применяют адаптированную разметку карточки продукта.

<div itemscope itemtype="http://schema.org/Product">
<p itemprop="name">Помогаторы Helpme</p>
<div itemtype="http://schema.org/AggregateOffer" itemscope="" itemprop="offers">
<div>17 товаров</div>
<meta content="17" itemprop="offerCount">
<div>от 7000 руб</div>
<meta content="7000" itemprop="lowPrice">
<div>до 77 777 руб</div>
<meta content="77777" itemprop="highPrice">
<meta content="RUB" itemprop="priceCurrency">
</div>

Новыми здесь являются следующие параметры:

  • offerCount – общее количество продуктов в разделе;
  • lowPrice – самая низкая стоимость в категории;
  • highPrice – самая высокая цена в категории.

Особенности применения микроразметки

Микроразметку товаров можно вносить не только вручную, но и с помощью плагинов. Например, для популярного в WordPress магазина WooCommerce это можно сделать с помощью инструмента Add Schema.org Markup to WooCommerce Products.

Готовую разметку товаров нужно проверить с помощью встроенных сервисов поисковых систем:

Внедрение микроразметки продуктов в интернет-магазине позволит улучшить внешний вид карточки продукта в поисковой выдаче. Это приводит к увеличению CTR и объемов продаж при небольших усилиях, затраченных на прописывание разметки.

Понравилась статья? Поделись с друзьями:

1 Комментарий

  1. Цифровой 1 год назад

Добавьте комментарий

* Нажимая на кнопку "Отправить" Вы соглашаетесь с политикой конфиденциальности.