В этой статье расскажем, как правильно сделать разметку товаров, чтобы поисковые системы представили их в наиболее выгодном свете.
Зачем она нужна микроразметка
Для начала в двух словах напомним, что такое семантическая микроразметка. Это специальные метки на страницах сайта, невидимые для людей, но понимаемые поисковыми системами. Они нужны для того, чтобы сниппеты содержали точную и удобную для восприятия информацию.
Если брать интернет-магазин, то сведения о товаре в поисковой выдаче будут выглядеть так, как хочет вебмастер, а не так, как посчитает нужным сформировать робот. Это ведет к увеличению кликабельности сниппета, повышению целевого трафика и увеличению продаж.
В интернет-магазине разметке подлежат следующие разделы сайта:
- главная страница;
- общая информация о магазине;
- хлебные крошки;
- карточки товаров;
- категории товаров;
- отзывы и рейтинги.
В этой статье мы подробней остановимся на том, что непосредственно касается разметки, т. е. на трех последних пунктах.
Как сделать микроразметку товаров
Существует несколько способов микроразметки. Мы будем рассматривать самый распространенный – schema.org. Этот формат понимают все поисковые системы.
Микроразметка карточки товаров
Приведем сначала пример того, как выглядит карточка без разметки. Для простоты понимания здесь убраны лишние детали, которые никак не затрагиваются разметкой.
|
1 2 3 4 5 6 |
<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> |
Та же самая карточка, но уже с разметкой.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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 – доступность продукта.
Формат применения последнего параметра следующий.
|
1 2 3 |
<div>В наличии</div> <link itemprop="availability" href="http://schema.org/InStock"> </div> |
Также имеются отдельные атрибуты для маркировки отзывов и рейтингов товаров. Их мы разберем ниже.
Микроразметка рейтинга товаров
Вот как выглядит микроразметка рейтинга товара там, где есть звездочки.
|
1 2 3 4 |
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> Рейтинг <span itemprop="ratingValue">8</span>/5 на основании <span itemprop="reviewCount">17</span> оценок </div> |
Здесь все понятно.
А вот как размечается рейтинг при оценке пользователя.
|
1 2 3 4 5 |
<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 – максимально возможная оценка.
Вот как блок этого рейтинга выглядит внутри отзыва.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
Здесь тоже все понятно из контекста.
Микроразметка категории товаров
Формально разметки для категории не существует. Здесь применяют адаптированную разметку карточки продукта.
|
1 2 3 4 5 6 7 8 9 10 11 |
<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 и объемов продаж при небольших усилиях, затраченных на прописывание разметки.
https://www.youtube.com/watch?v=jrH735kzZD4
А стоит ли в категории товаров делать микроразметку на каждый товар? Для уточнения скажу, что отдельной страницы под товары нет.