Что такое микроразметка
Микроразметка – это дополнительный код на странице, по которому поисковые системы точнее определяют, что на ней находится. Микроразметка не видна в публичной части сайта и никак не влияет на отображение страниц для пользователей. Часть данных роботы могут определять без микроразметки, например, электронную почту или номер телефона, но краткое описание товара, цену, основное изображение или характеристики, а также ряд других параметров корректно определить автоматически не получится.
Сейчас микроразметку поддерживают все популярные поисковые системы, такие как Яндекс и Google.
Разметка по стандарту schema.org
Schema.org – это один из самых популярных форматов микроразметки. Разметка товара выполняется коде страницы. Товар оборачивается в контейнер с атрибутом. Для товаров это атрибут “itemtype” со значением http://schema.org/Product
1
<div itemscope="" itemtype="http://schema.org/Product"> </div>
Внутри контейнера нужно выводить все данные, относящиеся к товару, например цену и описание:
1
<span itemprop="price">1250</span>
2
<span itemprop="description">Готовый шаблон сайта на CMS Prestashop Elite Power Gym Store купить в магазине по продаже готовых шаблонов веб сайтов Capybara Digital. Готовые сайты по тематике Кафе и Рестораны можно заказать на сайте или по телефону <a href="tel:88462150447">88462150447</a>.</span>
Внутри основного контейнера могут находиться вложенные сущности. Например, http://schema.org/Offer торговое предложение, которое будет включать информацию о цене, валюте, продавце.
1
<div itemscope="" itemtype="http://schema.org/Product"> <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"> </div> </div>
Schema.org построена на простом синтаксисе и понятной структуре, но иногда появляются ошибки. Выявить ошибки можно с помощью валидатора микроразметки. Например, от Яндекса — https://webmaster.yandex.ru/tools/microtest/, или от Google — https://search.google.com/structured-data/testing-tool?hl=ru;
Микроразметка карточек товаров
Рассмотрим микроразметку товара на примере страницы:
Исходный код выглядит так:
(Чтобы было визуально проще сориентироваться код сокращен до минимума).
1
<h1>Автобокс на крышу Черный ACTIVE S (320 л) Аэродинамический</h1>
2
<img src="/img.jpg" itemprop="image">
3
<div>12 400 руб</div>
4
<div>Автомобильный бокс ACTIVE S выполнен из тиснённого АБС-пластика. Данный автобокс подойдет на крышу автомобилей с небольшой крышей, например малолитражных автомобилей, а также на автомобили с типом кузова седан или хэтчбек.</div>
5
<div>Производитель: PT GROUP</div>
6
<div>Модель 00002530</div>
После разметки карточки по правилам schema.org получается:
1
<div itemscope itemtype="http://schema.org/Product">
2
<h1 itemprop="name">Автобокс на крышу Черный ACTIVE S (320 л) Аэродинамический</h1>
3
<img src="/img.jpg" itemprop="image">
4
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
5
<div>12 400 руб</div>
6
<meta itemprop="price" content="12 400.00">
7
<meta itemprop="priceCurrency" content="RUB">
8
</div>
9
<div itemprop="description">Автомобильный бокс ACTIVE S выполнен из тиснённого АБС-пластика. Данный автобокс подойдет на крышу автомобилей с небольшой крышей, например малолитражных автомобилей, а также на автомобили с типом кузова седан или хэтчбек.</div>
10
<div>Производитель: <span itemprop="brand">PT GROUP</span> </div>
11
<div>Модель: <span itemprop="model">00002530</span> </div>
12
</div>
Это и есть микроразметка товара — используя теги schema.org нужно разметить код страницы и привести к требуемому виду данные, не подходящие по формату, например потребовалось вывести цены в формате для пользователя и в формате schema.org. Для проверки корректности выполненной работы нужно воспользоваться валидатором микроразметки от Яндекс https://webmaster.yandex.ru/tools/microtest/;
Контейнеры микроразметки
Микроразметка товара состоит из контейнеров, который определяет тип схемы. Контейнер для товаров называется Product. Этот формат дает понять роботу, что все содержимое блока содержит информацию о товаре.
1
<div itemscope itemtype="http://schema.org/Product">
2
Размеченный код карточки товара
3
</div>
Внутри контейнера Product находится вложенный Offer. Этот блок дает понять роботу что внутри находится конкретное торговое предложение с ценой и валютой товара.
1
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
2
Размеченный код торгового предложения.
3
</div>
Модель “model”
itemprop=“model” — атрибут содержит модель изделия. Это может быть тип, вид, номер или модификация. Необязательный для заполнения.
Синтаксис: itemprop=“model”
Пример использования:
1
<img src="/img.jpg" itemprop="image">
Описание “description”
itemprop=“description” — атрибут содержащий текстовое описание товара. Не является обязательным.
Синтаксис: itemprop=“description”
Пример использования:
1
<div itemprop="description">Автомобильный бокс ACTIVE S выполнен из тиснённого АБС-пластика. Данный автобокс подойдет на крышу автомобилей с небольшой крышей, например малолитражных автомобилей, а также на автомобили с типом кузова седан или хэтчбек.</div>
Продавец товара “seller”
itemprop=“seller” — атрибут, который содержит текстовое поле с названием продавца. Не обязательное поле. В разобранном примере продавец не указан, но для повышения качества страницы по возможности это поле нужно использовать.
Синтаксис: itemprop=“seller”
Пример использования:
1
<span itemprop="seller">Продавец</span>
В статье описаны самые популярные схемы и атрибуты разметки страниц.
