Хлебные крошки (англ. 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 продвижения — распределение статического веса страниц путем их перелинковки. Поэтому да, они однозначно важны и нужны на сайте.
Правильные навигационные цепочки обязательно включают в себя полный путь от главной страницы до последней, на которой в данный момент находится посетитель.
Например, есть такой путь:
Главная — категория — дочерняя категория — карточка товара
Ссылками здесь должны быть главная, раздел и подраздел (дочерняя категория). Карточка товара должна быть просто текстом, иначе получается циклическая ссылка. Возможный вариант (и даже предпочтительный, чтобы избежать дублей с H1), когда карточка товара отсутствует в цепочке.
Получается такой вид:
Главная — категория — дочерняя категория
Здесь вес с карточки товара распределяется на главную, на категорию и подкатегорию, и это очень хорошо с точки зрения SEO, так как с помощью такой внутренней перелинковки можно улучшить позиции сайта в поиске.
Хлебные крошки должны быть на всех страницах сайта, кроме главной.
Можно встретить разные мнения по поводу мобильных хлебных крошек. Кто-то говорит, что они не нужны, потому что при просмотре сайта на смартфоне мы имеем ограниченное пространство, и адаптивный дизайн не предполагает глубокой структуры.
Я считаю это мнение неверным по следующим причинам:
Сделать такие хлебные крошки для сниппетов 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. Пишите ваши вопросы, комментарии, дополнения. Вы используете микроразметку на вашем сайте?
Наличие таких смысловых цепочек я сейчас воспринимаю как само собой разумеющееся. Иногда благодаря хлебным крошкам я находила нужный товар на сайте Интернет-магазина. Я пока только собираюсь создать сайт и обязательно учту этот момент.
Микроразметку на своем сайте я считаю конечно необходимо использовать. Яндекс -лидер нашего рынка, а гугл входит в мировые. Нельзя отбрасывать такую большую часть рынка и сделать навигацию по гуглу.
Насчет мобильных хлебных крошек могу не согласиться. При сокращении категорий, названий и применяя многоточие, все-таки, теряется смысл самой навигации поиска. То, что понятно вам в сокращениях, может быть не понятно простому обывателю.
а это смотря в каком виде они выполнены. я видел отличные варианты крошек в мобильном.
По-моему, навигационная цепочка — это самый лучший и безопасный способ перелинковки. Нынешние сайты, особенно магазины, вообще немыслемы без «крошек». Порой редактируя ресурс, диву даюсь. Клиенты платят уйму денег за создание интернет-магазина, а создатели даже не удосуживаются добавить навигацию в файловый менеджер. Как так?
ну вот такие создатели)
Особенно интернет-магазины, без хлебных крошек, не являются таковыми. Нужная навигация.