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

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


«Хлебные крошки» (они же breadcrumbs) — цепочка из ссылок, отображающая путь до текущей страницы.
Например:
главная — товары на главной — junior be healthy
С точки зрения юзабилити главная задача — наглядно показать пользователю где он находится. Однако «Хлебные крошки» не менее важны и с точки зрения SEO:
- Внутренняя перелинковка страниц сайта (особенно для интернет-магазинов) — благодаря этому ссылочная масса распределяется равномерно по страницам
- Информация о структуре сайта для поисковиков
Google уже давно опубликовал формат правильный формат breadcrumbs, который можно задать при помощи микроразметки или RDFa. Ознакомится с этим форматом можно на странице:
support.google.com/webmasters/answer/185417
Однако не многие используют его. Ну а мы как раз этим и займемся для нашего магазина.
Что бы вы нагляднее понимали как будет выглядеть сайт после изменений, взгляните на картинку ниже:

Хлебные крошки в InSales
Для себя я составил следующий список требований, которые должны выполнять Хлебные крошки:- Должны быть описаны с помощью RDFa
- Последний пункт не должен быть в виде ссылки. Это важно, хоть и кажется мелочью.
Привожу пример кода с одного из рабочего Интернет-Магазина
Для категорий:
<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 комментариев
Все зависит от того как у вас шаблон сверстан. В некоторых случаях хлебные крошки размещены прямо на страницах «Категория» и «Товар». Вот как в данном примере:
Либо хлебные крошки могут быть вынесены в отдельный сниппет
Если ли пример для вставки «правильного кода крошек» в сниппет и куда именно его вставлять?
У меня из-за этого вся верстка едет. Или это обязательное условие микроразметки?
(li) (/li)
(/ul)
об этой конструкции идет речь.