Хлебные крошки являются небольшим, но ценным элементом, играющим важную роль в навигации на веб-сайте . Они используются для понимания посетителем текущего положения и представляют собой серию ссылок в верхней части страницы, отображающих маршрут от главной страницы до текущей.
Простыми словами хлебные крошки это некая навигационная система на вашем сайте, цепочка, по которой пользователь перемещается. Она берет свое начало на главной странице и заканчивается в разделе, в котором находится пользователь на текущий момент.
Откуда появилось такое название?
"Хлебные крошки" это перевод с английского языка термина bread crumbs. Считается, что это некая отсылка к известной сказке “Гензель и Гретель”. По сюжету, дети пошли в лес, и чтобы не заблудиться бросали за собой хлебные крошки.
На веб ресурсе пользователь следует по определенному маршруту, и с помощью продуманной навигационной цепочки, сможет вернуться обратно на один или сразу несколько шагов. Чтобы посетитель не заблудился на вашем сайте, ему необходимо знать, в каком из разделов ресурса он сейчас находится и как ему можно вернуться назад или к началу. Для этого и необходима навигационная цепочка.
У дублирующей навигации есть две основные функции: улучшение юзабилити сайта и положительное влияние на seo.
С точки зрения повышения удобства использования (юзабилити) хлебные крошки:
- показывают пользователю его местоположение на ресурсе;
- обеспечивают понятную организацию и расположение страниц;
визуально отображают структуру сайта; - облегчают переключение между вышестоящими и нижестоящими уровнями вложенности, без кнопок вперед и назад в браузере.
В контексте SEO хлебные крошки:
- обеспечивают внутреннюю перелинковку;
- улучшают пользовательскую навигацию и в результате увеличивают показатели поведенческих метрик таких, как, например, время посещения или глубина просмотра;
- оптимизируют внешний вид сниппетов выдачи, при наличии корректно размеченных микро данных.
Есть различные способы оформления навигационной цепочки, рассмотрим наиболее распространенные вариации:
- Линейная - она демонстрирует полный маршрут пользователя от главной страницы до текущей.
- Система “назад” - на сайте добавляется кнопка "вернуться в каталог", "вернуться на главную" В случае отсутствия функционала поиска на сайте, использование кнопки назад в браузере может быть неудобным для навигации пользователя.
- Линейная + кнопка "назад" предполагает оба варианта из вышеперечисленных.
Подробно остановимся на самой популярной цепочке - Линейной.
Такая структура "хлебных крошек" понятна для большинства пользователей и облегчает навигацию по ресурсу. Она позволяет посетителям легче понять текущий контекст страницы.
Чаще всего такая структура выглядит так:
Главная страница > Категория > Подкатегория > Текущая страница
При большой сложности и длине навигационной цепочки, она может быть упрощена.
Например, это может быть сделано с помощью удаления промежуточных ссылок, использования сокращений и/или многоточия, указывающего на пропуск звена.
В определенных ситуациях главная страница сайта не является исходной точкой.
Примером такой ситуации может быть, когда сайт содержит несколько разделов или категорий товаров, каждая из которых обладает собственной главной страницей. Тогда при переходе в конкретный раздел сайта, главная страничка этого раздела или категории товаров становится первым звеном "хлебных крошек".
Может быть и так, что цепочка имеет выпадающие списки.
При наведении на каждое звено цепочки, отображается список смежных подкатегорий. Это позволяет пользователям не только перейти на уровень выше, но и выбрать любой смежный раздел.
Создание подобных навигационных цепочек не является сложной задачей. Обычно они состоят из нескольких элементов, разделенных символами ">", "»" или же "/". Создать хлебные крошки можно разными способами. Например, в CMS WordPress есть множество плагинов для создания навигационных цепочек. Вручную возможно создать хлебные крошки при помощи HTML-кода.
При создании хлебных крошек необходимо учитывать несколько важных моментов.
- Структура всего сайта должна быть логичной и понятной, чтобы пользователь мог легко следовать по пути навигации.
- Ссылки в навигационной цепочке должны быть активными и вести на соответствующие страницы сайта. Несоответствие ссылок может вызвать путаницу у пользователя.
- Пункты цепочки должны быть ясными и эстетичными, чтобы не перегружать восприятие сайта как в визуальном, так и эстетическом плане.
- На главной странице не должно быть хлебных крошек. В противном случае получится, что вы размещаете на странице ссылку, указывающую на ту же страницу. Это отрицательно отразится на ранжировании сайта.
- Предыдущая страница должна быть последней кликабельной ссылкой в цепочке. В ином случае, вы будете повторять ссылку, как с хлебными крошками на главной странице.
- Рекомендуется поместить навигационные элементы в верхнюю часть страницы, чтобы пользователи могли легко их обнаружить. Так привычнее для большинства пользователей. Текст должен быть хорошо видимым на фоне, обеспечивая контрастность.
- В Яндексе и Google доступен инструмент, который позволяет отображать навигационные цепочки вашего сайта в результатах поиска. Для этого требуется реализация микроразметки. Это удобно, поскольку пользователь сразу получает представление о структуре вашего сайта.
Хлебные крошки это отличный способ навигации на веб-сайте. При корректной настройке навигационные цепочки способствуют повышению удобства использования сайта и благотворно влияют на его продвижение в поисковых системах Яндекс и Google.
Вам будет интересно:
