Продвижение сайтов & web-аналитика

Отправить заявку    +38 096 558 75 14

Микроразметка для интернет-магазина

Если 5-6 лет назад многие магазины обходили стороной микроразметку, то сегодня, в связи со стремительным развитием поисковой выдачи Google и Google Shopping просто необходимо сделать микроразметку в интернет-магазине. Мы не будем долго рассказывать, как это влияет на показатели CTR и позиции в выдаче, а сразу объясним, как сделать микроразметку без лишних деталей.

В интернет-магазине микроразметка необходима для следующих страниц:

  • Главная
  • Категория товара
  • Карточка товара
  • Информационные страницы

Микроразметку можно сделать тремя способами - через Microdata, RDFa и JSON-LD. Выбор зависит от удобства технической реализации в каждом конкретном случае, но все подчиняется правилам библиотек schema.org. Мы с Вами рассмотрим способ с использованием Microdata. Другие варианты можно легко изучить на самом сайте schema.org, ссылки мы предоставим. Итак, поехали!

Главная страница:

Здесь, в первую очередь необходимо показать поисковому роботу информацию о Вашей организации (название, адрес, контактные данные). В коде микроразметка для главной страницы выглядит так:


<div itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Название компании">
<meta itemprop="description" content="Описание деятельности компании">
<meta itemprop="image" content="ссылка на логотип">
<meta itemprop="telephone" content="телефон">
<span itemprop="email" content="Электронная почта">

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="streetAddress" content="Улица, дом, офис">
<meta itemprop="addressLocality" content="Город">
<meta itemprop="addressRegion" content="Область">
</div>
</div>

Категория товара:

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

Это могут быть светильники, ноутбуки, телефоны, все что угодно с выводом сводной информации о категории: минимальная и максимальная цена, количество товаров в категории, название категории.


<div itemscope itemtype="http://schema.org/Product">
<p itemprop="Name">Название категории</p>
<div itemtype="http://schema.org/AggregateOffer" itemscope="" itemprop="offers">
<meta content="5114" itemprop="offerCount"> <!-- позиции товара -->
<meta content="987582" itemprop="highPrice"><!-- Высшая цена -->
<meta content="315" itemprop="lowPrice"><!-- Низшая цена -->
<meta content="UAH" itemprop="priceCurrency"><!-- Валюта -->
</div>

Карточка товара:

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

В микроразметке карточки товара в первую очередь обозначаем: название, изображение, цена, наличие, краткое описание товара.


<div itemscope itemtype="http://schema.org/Product">
<div itemprop="name"><h1>Название товара</h1></div>
<a itemprop="image" href="/images/name_image.jpg">
<img src="/images/name_image.jpg " title="Название товара">
</a>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div>10 000 грн.</div>
<meta itemprop="price" content="10000.00">
<meta itemprop="priceCurrency" content="UAH">
<div>В наличии</div>
<link itemprop="availability" href="http://schema.org/InStock">
</div>
<div itemprop="description">Описание товара в 2-3 предложения</div>
</div>
<meta itemprop="brand" content="Бренд товара">

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


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

Кроме того, в карточке товара можно заметить и отзывы:


<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Заголовок отзыва</span>
от <span itemprop="author">Имя пользователя</span>,
<meta itemprop="datePublished" content="2016-12-01">Декабрь 12, 2016</div>

Есть и дополнительные переменные. О них читайте на страничке schema.org/Product. Все то, что мы перечислили рекомендуем обязательно сделать.

Хлебные крошки:

Микроразметка хлебных крошек

Этот вид хлебных крошек выводится конкретно для интернет-магазина. Для информационного сайта хлебные крошки выглядят немного иначе.


<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/ ">
<span itemprop="name">Главная</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses">
<span itemprop="name">Главная категория</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Подкатегория</span></a>
<meta itemprop="position" content="3" />
</li>
</ol>

Микроразметка хлебных крошек категорий интернет-магазина и информационных страниц немного отличается. Чтобы Вы долго не искали, выкладываем ниже.

Хлебные крошки для новостей, информационных страниц:

хлебные крошки информационных страниц

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/адрес страницы 1го уровня (например, главная)" itemprop="url">
<span itemprop="title">название страницы</span>
</a>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/адрес страницы 2го уровня (например, рубрика)" itemprop="url">
<span itemprop="title">название страницы</span>
</a>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/адрес страницы 3го уровня (например, подрубрика)" itemprop="url">
<span itemprop="title">название страницы</span>
</a>
</div>

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

Как проверить микроразметку?

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

проверка микроразметки

Валидатор микроразметки укажет где конкретно есть проблемы:

валидатор микроразметки

В популярных CMS микроразметка, как правило уже внедрена в базовый функционал. В большинстве случаев микроразметку необходимо вставлять на самописных сайтах. Надеемся, что этот материал пригодится при составлении техзадания Вашему программисту или веб-студии сопровождения сайта для успешного seo продвижения и ранжирования в поисковых системах.