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

A A A

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

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

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

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

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

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

Сниппет №1

Сниппет №2

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

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

Реализация

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

На всех страницах сайта, где есть хлебные крошки, необходимо внедрить разметку, исходя из примера для страницы http://vesta-ceramics.ru/keramicheskiy-granit/derevo/mezonin

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

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

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

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

Реализация

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

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

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

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

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

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

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

    Реализация

    На каждой странице категории необходимо разместить данный код. Пример реализации сделан для страницы http://vesta-ceramics.ru/keramicheskiy-granit

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

    Информация об организации

    При помощи разметки мы сможем указать поисковым системам информацию про компанию: название, адреса всех филиалов, номера телефонов. Никаких ощутимых преимуществ данная разметка не дает, вы не увидите эту информацию в выдаче.

    Реализация

    Код выглядит вот так :

    Внедрить его нужно на всех страницах сайта в любое удобное место. При корректном размещение мы увидим следующее:

Поисковая строка в выдаче Google

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

Выглядит она вот так:

allo

Реализация

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

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

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

Полезные материалы

Structured Data Testing Tool
Как устроен мир семантической разметки
Валидатор микроразметки от Яндекса
Schema.org

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

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

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

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

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

    • Добрый день.

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