Микроразметка для интернет-магазина
Опубликовано: 01.09.2018
Всем привет! Грамотно сделанная микроразметка для интернет-магазина позволит передать поисковым системам куда больше полезной информации, чем обычный текст, заключенный в стандартные теги HTML. Поисковики это оценят и возблагодарят вас хорошими позициями. 
Микроразметка — это стандарт семантической разметки данных на сайте. Весьма сложное определение, которое многие не поймут и не оценят. Говоря проще, это специальные идентификаторы, которые добавляются в исходный код сайта и указывают на определенные элементы. Они позволяют структурировать данные, сделать их более понятными для поисковых систем и других сервисов, которые анализируют содержание сайта.
Урок 89 - Микроразметка: как создавать расширенные сниппеты в Яндекс и Google
К примеру, в тег html можно запихнуть что угодно. В тот же тег абзаца «p» можно добавить текст, соответствующий контактам организации, рецепту, содержанию статьи, цене товара и так далее. Микроразметка же позволяет получить совершенно точную информацию.
SEO ошибки интернет магазина очков accent-sa.ru
Данный, полученные поисковыми системами из микроразметки сайта, в дальнейшем могут использоваться сервисами поисковых систем. К примеру, в описании сайта в результатах Яндекс Поиска (расширенный сниппет). Вот так он выглядит для интернет-ресурсов, которые используют микроразметку для рецептов.
Как видите, в сниппете присутствует фотография готового блюда, ингредиенты, время приготовления и даже количество порций. Конечно, вероятность перехода человек на этот сайт весьма велика, чего стоит только вид готовой курочки с яблоками.
На данный момент Яндекс поддерживает 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 и с успехом используется на сайтах моих интернет-магазинов. Так что проблем с этим точно не будет.
Чтобы проверить, насколько правильно вы структурировали свои данные, следует воспользоваться валидаторами микроразметки от и . Пользоваться ими очень просто: указываете URL страницы, на которой уже присутствуют структурированные данные, или вставляете непосредственно код в специально отведенное для него поле, после чего нажимаете «Проверить».
Главное, чтобы не было ошибок. Микроразметку хлебных крошек валидатор Яндекса не распознает, но в этом ничего страшного нет. Когда-нибудь научится и такому. Пока же воспользуйтесь проверкой от Google.
На это все. Микроразметку для блога рассмотрю позже, пока ее не сделал даже для FairHeart.ru. Как-то руки не дошли.
Лучший способ выразить благодарность автору - поделиться с друзьями!
Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:
Следите за обновлениями в Twitter и RSS.