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

|
Автор: Евгений Холостенко
Просмотров: 1443
4.9444444444444 1 1 1 1 1 1 1 1 1 1 Оценка 4.94 (9 голосов)

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

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

В интернет-магазине необходима микроразметка для:

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

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

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

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


<div itemscope itemtype="http://schema.org/Organization">
<span itemprop="name">Название компании</span>
Контакты:
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
Адрес:
<span itemprop="streetAddress">Название улицы, 1</span>
<span itemprop="postalCode"> Индекс</span>
<span itemprop="addressLocality">Город</span>,
</div>
Телефон:
<span itemprop="telephone">+38 096 558–75–14</span>,
Электронная почта:
<span itemprop="email">Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.;/span>
</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>

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


<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 клика, в гугл можно здесь, через яндекс - здесь., системы Вам выдадут что так или не так с разметкой Вашего магазина.

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

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

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

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