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

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

Микроразметка — это стандарт семантической разметки данных на сайте. Весьма сложное определение, которое многие не поймут и не оценят. Говоря проще, это специальные идентификаторы, которые добавляются в исходный код сайта и указывают на определенные элементы. Они позволяют структурировать данные, сделать их более понятными для поисковых систем и других сервисов, которые анализируют содержание сайта.

К примеру, в тег html можно запихнуть что угодно. В тот же тег абзаца «p» можно добавить текст, соответствующий контактам организации, рецепту, содержанию статьи, цене товара и так далее. Микроразметка же позволяет получить совершенно точную информацию.

Данный, полученные поисковыми системами из микроразметки сайта, в дальнейшем могут использоваться сервисами поисковых систем. К примеру, в описании сайта в результатах Яндекс Поиска (расширенный сниппет). Вот так он выглядит для интернет-ресурсов, которые используют микроразметку для рецептов.

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

На данный момент Яндекс поддерживает 14 схем микроразметки. Подробнее о них можно прочитать на сервисе Яндекс Помощь.

Нам же, для интернет-магазина, будут интересны две из них: «адреса и организации» и «товары и цены».

1. Адреса и организации.

Адрес организации обычно присутствует в шапке, подвале и на отдельной странице интернет-магазина (контакты). Я бы посоветовал бы добавить элементы микроразметки во все места. На том же OpenCart сделать это совсем нетрудно, достаточно подкорректировать несколько файлов шаблона.

Как должен выглядеть код, отвечающий за контактные данные организации.

<div itemscope itemtype="http://schema.org/Organization">
  <span itemprop="name">Название организации</span>
  Контакты:
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    Адрес:
    <span itemprop="streetAddress">Лубянка, 4</span>
    <span itemprop="postalCode"> 001122</span>
    <span itemprop="addressLocality">Москва</span>,
  </div>
  Телефон:<span itemprop="telephone">+7 495 000–00–00</span>,
  Факс:<span itemprop="faxNumber">+7 495 000–00–00</span>,
  Электронная почта: <span itemprop="email">email@organizacii.ru</span>
</div>

Подробное описание каждого элемента можно найти здесь, но в принце, легко все сделать по аналогии. Просто подставляете свои данные, какие есть. Нет факса? Просто удаляете эту строчку. Главное, что структурированные данные обязательно должны быть в div'е с атрибутами itemscope itemtype="http://schema.org/Organization".

2. Товары и цены.

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

Пример кода:

<div itemscope itemtype="http://schema.org/Product">
  <div itemprop="name"><h1>Белое вечернее платье</h1></div>
  <a itemprop="image" href="products_pictures/large_krovat-mellisa-smyagkoispink.jpg">
    <img src="products_pictures/beloe-vechernee-plate.jpg" title="Белое вечернее платье">
  </a>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <div>15 150 руб.</div>
    <meta itemprop="price" content="15150.00">
    <meta itemprop="priceCurrency" content="RUB">
    <div>В наличии</div>
    <link itemprop="availability" href="http://schema.org/InStock">
  </div>
  <div itemprop="description">Шикарное белое вечернее платье. Есть в наличии в нашем интернет-магазине. Доставка с примеркой осуществляется по всей России.</div>
</div>

Подробное описание каждого элемента можно найти в Яндекс Помощи, но как и в прошлый раз вполне можно действовать по наитию. Достаточно открыть шаблон, отвечающий за карточку товара, и к htmlтегам (div, img, a) добавить нужные элементы разметки. Мета данные price (цена) и priceCurrency (валюта) на сайте не выводятся.

3. Хлебные крошки.

Третью схему мы возьмем уже для Гугла — это микроразметка хлебных крошек. Яндекс эту схему не понимает, во всяком случае пока.

Образец кода:

<div class="breadcrumb">
<span prefix="v: http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">    <a href="http://fairheart.ru/" rel="v:url" property="v:title">Главная</a>
       <a href="http://fairheart.ru/jenskaya-odejda/" rel="v:url" property="v:title">Женская одежда</a>
       <a href="http://fairheart.ru/jenskaya-odejda/beloe-plate-312-142.html" rel="v:url" property="v:title">Белое платье</a>
   </span>
</span>
</div>

Кто-то может придраться, что последнее звено цепочки — это ссылка, но такой код отлично распознается валидатором Google и с успехом используется на сайтах моих интернет-магазинов. Так что проблем с этим точно не будет.

Проверка валидности кода

Чтобы проверить, насколько правильно вы структурировали свои данные, следует воспользоваться валидаторами микроразметки от Яндекс и Goolge. Пользоваться ими очень просто: указываете URL страницы, на которой уже присутствуют структурированные данные, или вставляете непосредственно код в специально отведенное для него поле, после чего нажимаете «Проверить».

Главное, чтобы не было ошибок. Микроразметку хлебных крошек валидатор Яндекса не распознает, но в этом ничего страшного нет. Когда-нибудь научится и такому. Пока же воспользуйтесь проверкой от Google.

На это все. Микроразметку для блога рассмотрю позже, пока ее не сделал даже для FairHeart.ru. Как-то руки не дошли.