Хлебные крошки

Для улучшения юзабилити. Пользователям проще ориентироваться в ресурсе и понимать, в каком разделе они сейчас находятся. Это особенно актуально для сайтов с сотнями страниц и сложной иерархией разделов.

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

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

Как выглядят хлебные крошки

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

Обычно хлебные крошки находятся в верхней части страницы под каталогом

Какими бывают хлебные крошки

Есть несколько видов хлебных крошек:

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

С кнопкой «Назад». Все так же, как и с линейными, но перед самой навигационной цепочкой есть дополнительная кнопка «Назад», чтобы пользователь мог быстро вернуться к предыдущему разделу.

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

Пример хлебных крошек с выпадающим списком

Как правильно делать хлебные крошки

Чтобы хлебные крошки действительно делали сайт удобнее для пользователя, им необходимо:

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

❌ Главная — Каталог — Мужское — Женское — Товар 1 — Товар 2

✅ Главная — Каталог — Мужское — Товар 1 

Быть кликабельными. Это касается всех разделов, кроме той страницы, на которой сейчас находится пользователь. Добавление ссылок полезно для юзабилити, так как пользователь при желании может быстро вернуться обратно в интересующий раздел. Также это полезно для ссылочной массы, так как растет вес верхнеуровневых страниц.

Быть понятными. Названия элементов хлебных крошек должны совпадать с названиями разделов. Если названия разделов слишком длинные, то их можно сократить, но без потери смысла.

Корректно отображаться на всех устройствах. Если на десктопной версии хлебные крошки выглядят хорошо, то на мобильной они могут быть слишком большими или съезжать по верстке. Иногда допустимо убирать хлебные крошки и добавить их появление по клику. Также можно сокращать навигационную цепочку и оставлять только предыдущий раздел, а не весь путь от главной страницы.

Как добавить хлебные крошки на сайт

Во многих СMS хлебные крошки уже встроены в функционал, поэтому их достаточно активировать. Например, платформа «Аспро» позволяет сразу добавлять компактные хлебные крошки для мобильных устройств и не тратить время на их самостоятельную настройку и адаптацию.

Второй вариант — установить специальные плагины, которые формируют хлебные крошки автоматически.

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