Делаем правильные "Хлебные крошки" (breadcrumbs) в InSales

Готовый код /
Правильные хлебные кроши

Немного теории


Для поисковых систем ваш сайт представляет собой не более чем набор слов, картинок и ссылок, что бы они могли лучше понимать какая информация содержится на сайте — используется специальная разметка, микроразметка. Благодаря микроразметке вы сообщаете поисковику какой тип данных у вас отображается на странице (контакты, отзывы, статьи, рецепты) и прочее. В сумме все эти данные называются — Структурные данные и благодаря набору этих данных поисковые системы отображают дополнительную информацию о вашем сайте. Например вот так:
Пример структурных данных гугла
Пример структурных данных гугла

«Хлебные крошки» (они же breadcrumbs) — цепочка из ссылок, отображающая путь до текущей страницы.

Например:
главная — товары на главной — junior be healthy

С точки зрения юзабилити главная задача — наглядно показать пользователю где он находится. Однако «Хлебные крошки» не менее важны и с точки зрения SEO:
  1. Внутренняя перелинковка страниц сайта (особенно для интернет-магазинов) — благодаря этому ссылочная масса распределяется равномерно по страницам
  2. Информация о структуре сайта для поисковиков

Google уже давно опубликовал формат правильный формат breadcrumbs, который можно задать при помощи микроразметки или RDFa. Ознакомится с этим форматом можно на странице:
support.google.com/webmasters/answer/185417
Однако не многие используют его. Ну а мы как раз этим и займемся для нашего магазина.

Что бы вы нагляднее понимали как будет выглядеть сайт после изменений, взгляните на картинку ниже:
Правильные "Хлебные крошки" с точки зрения SEO

Хлебные крошки в InSales

Для себя я составил следующий список требований, которые должны выполнять Хлебные крошки:

  1. Должны быть описаны с помощью RDFa
  2. Последний пункт не должен быть в виде ссылки. Это важно, хоть и кажется мелочью.

Привожу пример кода с одного из рабочего Интернет-Магазина

Для категорий:
<div class="path-menu">
  <ul xmlns:v="http://rdf.data-vocabulary.org/#">
    <li typeof="v:Breadcrumb"><a href="/" title="главная" rel="v:url" property="v:title">главная</a></li>
    {% for collection in current_collections %}
      {% if collection.level > 0 %}
        {% if forloop.last %}
        <li><span>{{ collection.title }}</span></li>
        {% else %}
        <li typeof="v:Breadcrumb"><a href="{{ collection.url }}" title="{{ collection.title }}" rel="v:url" property="v:title">{{ collection.title }}</a></li>
        {% endif %}
      {% endif %}
    {% endfor %}
  </ul>
</div>


Для товаров:
<div class="path-menu">
  <ul xmlns:v="http://rdf.data-vocabulary.org/#">
    <li typeof="v:Breadcrumb"><a href="/" title="главная" rel="v:url" property="v:title">главная</a></li>
    {% for collection in current_collections %}
        {% if collection.level > 0 %}
        <li typeof="v:Breadcrumb"><a href="{{ collection.url }}" rel="v:url" property="v:title">{{ collection.title }}</a></li>
        {% endif %}
    {% endfor %}
    <li><span>{{product.title}}</span></li>
  </ul>
</div>


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

9 комментариев

rusblade
Добрый день, скажите пожалуйста, куда именно вставляется код для категорий и для товаров? (если можно скриншот). Спасибо.
wonder
Здравствуйте

Все зависит от того как у вас шаблон сверстан. В некоторых случаях хлебные крошки размещены прямо на страницах «Категория» и «Товар». Вот как в данном примере:


Либо хлебные крошки могут быть вынесены в отдельный сниппет
rusblade
Спасибо, у меня крошки в виде отдельного сниппета (на скриншоте).
Если ли пример для вставки «правильного кода крошек» в сниппет и куда именно его вставлять?
wonder
Вариант «Скопироват и вставить» для вашего случая не подойдет. Придеться адаптировать код. Вся работа по внедрению микроразметки заключается в добавлении специальных тегов
rusblade
т.е. самостоятельно я это сделать не смогу без специальных знаний?
wonder
Специальных знаний не нужно, просто немного понимания того что делаешь и смекалка. Там нет ничего сложного
Zinzilya
Возможно ли не использовать конструкции вида

У меня из-за этого вся верстка едет. Или это обязательное условие микроразметки?
Zinzilya
(ul)
(li) (/li)
(/ul)
об этой конструкции идет речь.
wonder
Нет, эти конструкции использовать не обязательно. Можно привязать микроразметку к любым тегам
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.