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

Хлебные крошки (англ. 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>

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

дизайн 1

дизайн 3

дизайн 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

яндекс про микроразметку

И вот еще:

яндекс формирует сниппет автоматически

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

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

микроразметка schema org

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

<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:

микроразметка 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. Пишите ваши вопросы, комментарии, дополнения. Вы используете микроразметку на вашем сайте?

0 0 голоса
Рейтинг статьи

Сергей Моховиков

SEO специалист

Здравствуйте! Я специалист по продвижению сайтов в поисковых системах Яндекс и Google. Веду свой блог и канал на YouTube, где рассказываю самые эффективные технологии раскрутки сайтов, которые применяю сам в своей работе.

Мои услуги

Subscribe
guest

7 комментариев
oldest
newest most voted
Межтекстовые Отзывы
Посмотреть все комментарии
Елена
Елена
6 лет назад

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

Виктор
Виктор
6 лет назад

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

Максим
Максим
6 лет назад

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

Женя
Женя
6 лет назад

По-моему, навигационная цепочка — это самый лучший и безопасный способ перелинковки. Нынешние сайты, особенно магазины, вообще немыслемы без «крошек». Порой редактируя ресурс, диву даюсь. Клиенты платят уйму денег за создание интернет-магазина, а создатели даже не удосуживаются добавить навигацию в файловый менеджер. Как так?

Александр
Александр
6 лет назад

Особенно интернет-магазины, без хлебных крошек, не являются таковыми. Нужная навигация.

7
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x