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

Семантическая разметка — набор дополнительных тегов и атрибутов в тегах, при помощи которых сайт может указать поисковым системам какую информацию предоставляет страница. Основная польза разметки для 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 или , чтобы сообщить нам.


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