Разметка для интернет-магазинов: пример реализации

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

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

Красивая картинка про разметку с хабра

Какие данные можно разметить на каждом интернет-магазине?

  1. Разметка хлебных крошек — BreadcrumbList.
  2. Разметка карточки товара — Product.
  3. Разметка страниц категорий — Product.
  4. Разметка информации о компании — LocalBusiness.
  5. Разметка поисковой строки — WebSite, SearchAction.

Разметка хлебных крошек — BreadcrumbList.

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

Сниппет №1

Сниппет №2

Данная разметка для интернет-магазина поможет повысить CTR сайта в выдаче поисковой системы Google, так как такие хлебные крошки смотрятся значительно привлекательнее чем просто url-адрес страницы.

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

Реализация разметки

Для удобства восприятия информации мы будем везде размечать страницы сайта https://plitka-ot-zavoda.ru/. Там всё это уже реализовано, так что вы можете зайти и посмотреть как это сделано, если возникнут вопросы.

На всех страницах сайта магазина, где есть хлебные крошки, необходимо внедрить разметку, исходя из примера для страницы https://plitka-ot-zavoda.ru/kollektsii-kerama-marazzi/italyanskaya-kollektsiya

При проверке корректности реализации данного изменения нужно воспользоваться сервисом проверки разметки от Google и посмотреть корректно ли отображается разметка на страницах интернет-магазина, при правильной реализации мы должны увидеть похожую картину:

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

Разметка карточки товара — Product

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

Разметка для интернет-магазинов: пример реализации

Разметка для интернет-магазинов: пример реализации

Яндекс, в свою очередь, опять же, учитывает данную разметку, но информацию в сниппет никогда не выводит. У Яндекса вообще нет звездочек и цены в сниппетах, так что данная разметка может повлиять на CTR только в поисковой системе Google.

Реализация разметки карточки товара

Для всех карточек товаров необходимо разметить следующие элементы:

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

При успешном внедрении разметки для карточки товара и проверке через сервис Structured Data Testing Tool проблем быть не должно.

Разметка карточки товара

Разметка страниц категорий — Product

Вообще разметки страниц категорий не существует. Это разметка для товаров, которая адаптирована под категории, но её результаты всё-равно отображаются в сниппете. Внедрение данной разметки считается спамом в структурированных данных, используйте её на свой страх и риск.

Справедливости ради, стоит сказать что даже если на ваш сайт пожалуются и вы получите письмо в Search Console следующего содержания:
Санкции за спам в разметке

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

На каждой странице категории, которая содержит список товаров, мы можем указать такие данные как:

  • количество товаров;
  • минимальная стоимость;
  • максимальная стоимость;
  • валюта.
  • Разметив эти данные на страницах каталога, мы можем сделать привлекательные сниппеты в поисковой системе Google, выглядеть они будут вот так:

    Разметка для интернет-магазинов: пример реализации

    Разметка для интернет-магазинов: пример реализации

    Конечно же, данная разметка будет отображаться далеко не всегда, но реализовать её всё-равно стоит. Яндекс, как обычно, не выводит данную разметку.

    Реализация разметки

    На каждой странице категории необходимо разместить данный код. Пример реализации сделан для страницы https://plitka-ot-zavoda.ru/kollektsii-kerama-marazzi

    Разместить его можно в любом месте внутри тега body. Проверить корректность разметки для страниц категорий можно при помощи того же сервиса:

    Разметка страниц категорий

    Разметка информации о компании — LocalBusiness

    При помощи разметки LocalBusiness мы сможем указать поисковым системам информацию про компанию: название, адреса всех филиалов, номера телефонов, время работы, ссылки на социальные сети. Данная разметка предназначена для того чтобы предоставить полную информацию о компании поисковым систем. Разметка организации не влияет на сниппет сайта.

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

    Реализация разметки

    Шаблон кода разметки организации выглядит следующим образом:

    Внедрить данныйы код разметки нужно на главной странице интернет-магазина внутрь тега head, так как это разметка в формате Json.

    При корректном размещение в сервисе проверки разметки мы увидим следующее:
    Разметка организации для сайта Inweb.ua

Разметка поисковой строки — WebSite, SearchAction

Благодаря этой разметке можно сделать очень красивую и удобную форму поиска по сайту, которая, при соблюдении определенных условий, будет выводиться в выдаче поисковой системе Google. По моему мнению, поисковая строка будет отображаться если : сайт популярен и на него идет много витального трафика. Только в этом случае поисковая строка может быть полезна пользователям.

Выглядит разметка строки поиска вот так:

allo

Реализация разметки

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

Конечно же, в коде нужно будет поменять домен и указать параметр, при помощи которого осуществляется поиск на сайте. В данном случае это https://plitka-ot-zavoda.ru/index.php?route=product/search&search=

Его можно добавить в исходный код каждой страницы сайта или же через GTM, используя пользовательский тег HTML. Если код внедрен верно — мы увидим следующую картину:

Разметка строки поиска

Полезные материалы по разметке для интернет-магазина

  1. Structured Data Testing Tool.
  2. Как устроен мир семантической разметки.
  3. Валидатор микроразметки от Яндекса.
  4. Schema.org.
  5. Внедрение разметки организации.

Если вы нашли ошибку, выделите участок текста и нажмите Ctrl + Enter или , чтобы сообщить нам.

Inweb.ua, 22.04.2019

Виктор, добрый день. Как показала проверка - микроразметка внедрена с ошибкой. У вас указан ключ "Product", также в разметку добавлен url товара. Однако на этом все, следующие атрибуты не участвуют в разметке.

Можете использовать следующий шаблон для карточек товаров:

Виктор, 22.04.2019

Добрый день, если не сложно подскажите правильно ли нам реализовали разметку карточки товаров upakmarket.com?

Inweb.ua, 07.03.2018

Добрый день.

Нужно прописатьhttp://schema.org/OutOfStock">

Вот пример реализации https://rozetka.com.ua/sign...

Сергей Костюк, 06.03.2018

Доброго времени суток.
Подскажите
http://schema.org/InStock"/>В наличии
это я так понимаю, что товара который в наличии.

Как отобразить, товара в наличии нет?

Влад Наумов, 05.03.2018

Так я выше скинул скриншот, где она отображается.

Вот ещё:
http://pics.inweb.ua/aibis/...
http://pics.inweb.ua/aibis/...

Разметка далеко не всегда отображается, это нормально.

Валидатор разметки корректно её обрабатывает - https://search.google.com/s...

Разметка категории 2 года назад часто выводилась, сейчас очень редко.

Мед-Део Стоматология (Стоматол, 05.03.2018

А товарная разметка? не вижу ни цены конкретного товара ни цен на товары в категории.

Влад Наумов, 05.03.2018

1. Разметка хлебных крошек не работает для товаров так как там одно звено в хлебных крошках, а именно Главная -> Название товара. С данным проектом не работаем очень давно, следовательно там не внесены корректировки чтобы разметка отображалась даже в такой ситуации.

Для страниц категорий работает http://pics.inweb.ua/aibis/...

2. Разметка отзывов работает только для страниц, где есть отзывы.
http://pics.inweb.ua/aibis/...

Мед-Део Стоматология (Стоматол, 05.03.2018

Смотрю site:vesta-ceramics.ru КЕРАМИЧЕСКИЙ ГРАНИТ и site:vesta-ceramics.ru ДЕКОР АВЕНТИН НАБОРНЫЙ - ID24 вижу рейтинг ни хлебных крошек ни товарной разметки не вижу :( Видимо такая разметка не работает

Ecotherm.com.ua, 13.12.2017

Здравствуйте! Сколько будет стоить внедрить разметку в интернет-магазине?

Влад Наумов, 04.09.2017

Добрый день.

Разметить необходимо текущие хлебные крошки(я так понимаю о них идет речь), а не создавать новые.

Следовательно нужно найти файл в котором находится код хлебных крошек и разметить там.

Ivan Snurnitsyn, 03.09.2017

я сам только учусь, но по идее микроразметка должна быть на всех файлах что индексируются, тоесть на index.php в том числе

Геннадий Орлов, 03.09.2017

Подскажи пожалуйста в какой файл размещать микроразметку?
Сюда? сайт/www/templates/шаблон/index.php
если да, то работает но под футером ссылки появляются.
Вообщем пожалуйста подскажи!

Геннадий Орлов, 02.09.2017

Подскажи пожалуйста в какой файл размещать?
Сюда? сайт/www/templates/шаблон/index/php
если да, то работает но под футером ссылки появляются.
Вообщем пожалуйста подскажи!

Влад Наумов, 17.08.2017

Вы правы, у картинки должен быть itemprop="image". Наша ошибка что он не указан в примере. Изображение это не обязательный параметр.
Если на карточке товара несколько картинок - указываем itemprop="image" для главного изображения.

Статья была написана 1.5 года назад. Сейчас на сайте-примере реализован другой синтаксис разметки для хлебных крошек. Но пример, указанный в статье работает точно также.

Ivan Snurnitsyn, 17.08.2017

Картинка товара на сайте с примером по другому добавлена, на сайте примера у картинки есть свойство itemprop="image", а у вас просто картинка без ничего, почему так? И как быть если в карточке товара много картинок?
Хлебная крошка на сайте-примере тоже по другому сделана - не так как у вас показано.
Показали бы пример если несколько отзывов.
Вобщем на первый взгляд хорошая статья, но что-то не сходится

Игорь, 31.05.2017

Добрый день спасибо большое за вашу статью, очень помогли. Но возник один нюанс, валидатор ругается на div xmlns:v="http://rdf.data-vocabulary...." typeof="v:Organization"> Цитирую (Attribute xmlns:v not allowed here)
Не подскажите как исправить? Спасибо большое

Влад Наумов, 13.03.2017

Добрый день.

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

vernigora.com, 11.03.2017

Это инструкция для разметки с нуля? Потому что для опенкарта есть модуль микроразметки, который это реализует.

eugen_ubf, 10.03.2017

Спасибо. Ваш мануал очень помог.

Влад Наумов, 01.03.2017

Добрый день. Проблема была с нашей стороны, мы всё поправили, теперь работает.

eugen_ubf, 01.03.2017

Не смог разобраться как увидеть код который нужно встроить в сайт


ASK Inweb: Задать вопрос специалисту