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

для чего нужны хлебные крошки

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

СКАЧАЙТЕ МОЙ БЕСПЛАТНЫЙ ЧЕК ЛИСТ

чек лист как удвоить посещаемость на сайте

Понравилась статья? Поделись с друзьями:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (3 оценок, среднее: 4,67 из 5)
Загрузка...
Метки: . Закладка Постоянная ссылка.

7
Отправить ответ

avatar
5 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
АлександрСергейЖеняМаксимВиктор Recent comment authors
  Subscribe  
newest oldest most voted
Максим
Гость
Максим

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

Женя
Гость
Женя

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

Виктор
Гость
Виктор

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

Елена
Гость
Елена

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

Александр
Гость
Александр

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