Всем привет! Грамотно сделанная микроразметка для интернет-магазина позволит передать поисковым системам куда больше полезной информации, чем обычный текст, заключенный в стандартные теги 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> |
Подробное описание каждого элемента можно найти
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> |
Подробное описание каждого элемента можно найти в
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 и с успехом используется на сайтах моих интернет-магазинов. Так что проблем с этим точно не будет.
Проверка валидности кода
Чтобы проверить, насколько правильно вы структурировали свои данные, следует воспользоваться валидаторами микроразметки от
Главное, чтобы не было ошибок. Микроразметку хлебных крошек валидатор Яндекса не распознает, но в этом ничего страшного нет. Когда-нибудь научится и такому. Пока же воспользуйтесь проверкой от Google.
На это все. Микроразметку для блога рассмотрю позже, пока ее не сделал даже для FairHeart.ru. Как-то руки не дошли.