Для чего нужны хлебные крошки на сайте

Хлебные крошки (англ. breadcrumbs) — это элемент навигации, который помогает пользователю ориентироваться на сайте.

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

Вот пример, как могут выглядеть такие цепочки:

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

<nav class=»breadcrumbs hidden-xs»>
<ul class=»inline»>
<li class=»breadcrumbs__element»><a class=»breadcrumbs__link» href=»https://www.butik.ru/»>главная</a>
<i class=»fa fa-angle-right»></i></li>
<li class=»breadcrumbs__element»><a class=»breadcrumbs__link» href=»https://www.butik.ru/catalog/muzhchinam/»>мужчинам</a>
<i class=»fa fa-angle-right»></i></li>
<li class=»breadcrumbs__element»><a class=»breadcrumbs__link» href=»https://www.butik.ru/catalog/muzhchinam/odezhda/»>одежда</a>
<i class=»fa fa-angle-right»></i></li>
<li class=»breadcrumbs__element»><a class=»breadcrumbs__link» href=»https://www.butik.ru/catalog/muzhchinam/odezhda/dzhinsy/»>джинсы</a></li>
<li class=»breadcrumbs__element»><i class=»fa fa-angle-right»></i>
<h1 class=»breadcrumbs__link»>Мужские джинсы</h1></li></ul></nav>

Дизайн хлебных крошек может быть совершенно разным, главное, чтобы они гармонично смотрелись в дизайне сайта.

Правильная навигация для SEO

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

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

Например, есть такой путь:

Главная — категория — дочерняя категория — карточка товара

Ссылками здесь должны быть главная, раздел и подраздел (дочерняя категория). Карточка товара должна быть просто текстом, иначе получается циклическая ссылка. Возможный вариант (и даже предпочтительный, чтобы избежать дублей с H1), когда карточка товара отсутствует в цепочке.

Получается такой вид:

Главная — категория — дочерняя категория

Здесь вес с карточки товара распределяется на главную, на категорию и подкатегорию, и это очень хорошо с точки зрения SEO, так как с помощью такой внутренней перелинковки можно улучшить позиции сайта в поиске.

Хлебные крошки должны быть на всех страницах сайта, кроме главной.

Мобильная выдача

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

Я считаю это мнение неверным по следующим причинам:

1. Можно сделать такой дизайн крошек, который будет органично смотреться на сайте и не захламлять пространство (например, делать неполные названия категорий, сокращать их, использовать многоточие).
2. С 2015 года Google использует альтренативные сниппеты в мобильной выдаче, где урлы заменяются крошками. А это повышает CTR сниппета и влияет на продвижение сайта.

Микроразметка

Сделать такие хлебные крошки для сниппетов google можно с помощью микроразметки schema org. К сожалению, яндекс формирует цепочку навигации автоматически и самостоятельно, повлиять на это нельзя.

Вот что пишет Елена Першина из яндекса:

И вот еще:

Google использует форматы JSON-LD, Microdata и RDFa, самым распространенным из которых является Microdata со словарем schema.org.

Вот пример оформления страницы в Microdata:

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

<ul class=»breadcrumbs» itemscope itemtype=»//schema.org/BreadcrumbList»>
<li class=»breadcrumbs-item» itemprop=»itemListElement» itemscope itemtype=»//schema.org/ListItem»>
<a itemprop=»item» href=»/» title=»Интернет-магазин мебели»><span itemprop=»name»>Интернет-магазин мебели</span></a>
<meta itemprop=»position» content=»1″ /><i class=»right-chevron_orange»></i></li>
<li class=»breadcrumbs-item» itemprop=»itemListElement» itemscope itemtype=»//schema.org/ListItem»>
<a itemprop=»item» href=»/katalog/» title=»Каталог мебели»><span itemprop=»name»>Каталог мебели</span></a>
<meta itemprop=»position» content=»2″ /><i class=»right-chevron_orange»></i></li>
<li class=»breadcrumbs-item» itemprop=»itemListElement» itemscope itemtype=»//schema.org/ListItem»>
<a itemprop=»item» href=»/katalog/myagkaya_mebel/» title=»Мягкая мебель»><span itemprop=»name»>Мягкая мебель</span></a>
<meta itemprop=»position» content=»3″ /><i class=»right-chevron_orange»></i></li>
<li class=»breadcrumbs-item»>Диваны</li></ul>

А вот пример оформления моей страницы в RDF:

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

<div class=»breadcrumb»>
<span xmlns:v=»http://rdf.data-vocabulary.org/#»><span typeof=»v:Breadcrumb»>
<a href=»https://mydaoseo.ru/» rel=»v:url» property=»v:title»>Главная</a> »
<span rel=»v:child» typeof=»v:Breadcrumb»>
<a href=»https://mydaoseo.ru/seo-optimizaciya/» rel=»v:url» property=»v:title»>SEO оптимизация</a> »
<span class=»breadcrumb_last»>
Внутренняя SEO оптимизация страниц сайта</span></span></span></span></div>

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

P.S. Пишите ваши вопросы, комментарии, дополнения. Вы используете микроразметку на вашем сайте?