Реклама. ООО «Клик.ру», ИНН:7743771327, ERID: 2VtzquiiL8b
«Хлебные крошки» (от англ. breadcrumbs) – это элемент навигации, который показывает пользователю последовательность разделов от главной страницы до текущего материала. По сути, такая цепочка наглядно демонстрирует, где именно посетитель находится в структуре сайта и как он сюда попал.
Изначально этот подход применялся не в вебе. Навигационные цепочки давно используются в операционных системах, CMS и файловых менеджерах – там они помогают быстро понять путь к корневой директории и при необходимости вернуться на уровень выше. Позже этот принцип перекочевал и в сайтостроение, где оказался не менее полезным.
В системах управления контентом, например в CMS Битрикс, «хлебные крошки» отображают иерархию разделов сайта и упрощают перемещение между ними. На веб-страницах они чаще всего повторяют структуру верхнего или бокового меню, дополняя основную навигацию и делая ее более наглядной для пользователя.
Далее в материале разберем:
-
зачем размещать «хлебные крошки» на сайте;
-
как навигационная цепочка влияет на удобство пользователей и SEO;
-
какие способы реализации подходят для разных типов сайтов.
Зачем на сайте нужны «хлебные крошки»
Еще в 1995 году специалист по юзабилити Якоб Нильсен описал 10 базовых принципов удобства интерфейсов. Один из них – «видимость статуса системы». Пользователь в любой момент должен понимать, где он находится и что происходит на экране. В контексте сайта это означает простую вещь: посетителю важно видеть свое место в структуре разделов. Именно эту задачу и решают «хлебные крошки».
Навигационная цепочка актуальна для всех сайтов с иерархией страниц: информационных проектов, интернет-магазинов, сайтов услуг и корпоративных ресурсов. Если у сайта есть вложенные категории и подкатегории, без такого элемента навигации пользователю сложнее ориентироваться.
С точки зрения юзабилити «хлебные крошки» выполняют сразу несколько функций:
-
показывают, в каком разделе и на каком уровне вложенности находится пользователь;
-
визуально раскрывают структуру сайта и логику его построения;
-
позволяют перейти на уровень выше одним кликом, не используя кнопку «Назад» в браузере.
Помимо удобства для посетителей, навигационная цепочка приносит пользу и для SEO. «Хлебные крошки»:
-
выступают естественным инструментом внутренней перелинковки;
-
положительно влияют на поведенческие факторы – увеличивают глубину просмотра и время на сайте за счет более простой навигации;
-
при корректно настроенной микроразметке улучшают внешний вид сниппета в Google и делают его более заметным и кликабельным.
В поисковой выдаче Google размеченные «хлебные крошки» отображаются прямо в сниппете в виде понятной навигационной цепочки.
В Яндексе такой элемент формируется автоматически: приоритет получают крупные сайты с логичной и четкой структурой. Названия разделов поисковая система берет из тегов title и анкорных текстов внутренних ссылок.
Основные типы «хлебных крошек»
Навигационная цепочка может строиться по разным сценариям. Конкретный вариант зависит от логики структуры сайта и от того, как формируются страницы – статически или динамически. Ниже рассмотрим основные виды «хлебных крошек», которые используются в онлайн-проектах.
Линейная навигация
Самый привычный и часто встречающийся формат. В «хлебных крошках» отображается полный путь от главной страницы до текущей. Пользователь видит всю иерархию разделов, по которой он пришел к нужному контенту.
Например, структура может выглядеть так: главная страница → каталог товаров → категория «Кухни» → подкатегория «Кухонные гарнитуры» → конкретный товар. Такая схема наглядно показывает вложенность и помогает быстро вернуться на любой предыдущий уровень.
На сайтах со сложной архитектурой иногда используют сокращенную версию линейных «хлебных крошек». В этом случае цепочка начинается не с главной страницы, а с ключевого раздела каталога. Так реализована навигация, например, на маркетплейсе Ozon, где отправной точкой может быть категория вроде «Строительство и ремонт».
Принцип «Назад»
В этом варианте классическая навигационная цепочка отсутствует. Вместо нее пользователь видит ссылку формата «Назад в каталог» или «На предыдущую страницу». По сути, она повторяет функцию кнопки «Назад» в браузере.
Такой подход оправдан на сайтах с активным внутренним поиском. Например, в интернет-магазине ссылка может вести с карточки товара обратно к результатам поиска по заданному запросу.
Комбинированный вариант
Здесь используются сразу два элемента: линейные «хлебные крошки» и кнопка возврата назад. В удачной реализации это удобно для пользователей, которые переходят на страницу товара из поиска по сайту.
Однако встречаются и ошибки. Если ссылка «Назад» отображается на всех карточках товаров независимо от сценария перехода, она может дублировать разделы навигационной цепочки. Такое дублирование ухудшает юзабилити и может негативно сказаться на SEO.
Динамические «хлебные крошки»
В этом случае навигационная цепочка формируется не по фиксированной структуре сайта, а с учетом реального пути пользователя. Такой принцип часто применяется в интернет-магазинах, где один и тот же товар может находиться сразу в нескольких категориях.
Динамические «хлебные крошки» позволяют вернуться именно на ту страницу, с которой пользователь перешел в карточку товара, что делает навигацию более логичной и удобной.
«Хлебные крошки» с выпадающим меню
Расширенный вариант навигации, при котором каждый уровень цепочки может раскрывать список альтернативных разделов. Пользователь получает возможность перейти не только на уровень выше, но и сразу выбрать другой раздел той же иерархии.
Атрибутивный принцип
Этот тип навигации чаще всего используют интернет-магазины и онлайн-каталоги с развитой системой фильтров. «Хлебные крошки» формируются на основе выбранных характеристик товаров: брендов, ценовых диапазонов, размеров и других параметров.
Меняя фильтры, пользователь каждый раз создает уникальный путь к странице каталога. Такой подход улучшает юзабилити:
-
посетитель настраивает выдачу товаров с помощью фильтров;
-
переходит в карточку товара для просмотра подробной информации;
-
возвращается в каталог с сохраненными параметрами поиска.
Как правильно реализовать «хлебные крошки» на сайте
Настроить навигационную цепочку можно несколькими способами – выбор зависит от платформы и технических возможностей проекта.
На практике чаще всего используют один из следующих вариантов:
-
встроенные модули и стандартные компоненты CMS – например, готовые решения есть в Битриксе и Joomla;
-
плагины и расширения для популярных систем управления контентом: WordPress, Opencart, Drupal и других;
-
ручную реализацию, когда разработчик добавляет «хлебные крошки» с помощью PHP, CSS или шаблонной логики сайта, если готовые инструменты недоступны.
Независимо от выбранного способа, важно соблюдать базовые правила, чтобы навигационная цепочка действительно работала на пользу сайту.
Во-первых, «хлебные крошки» создаются для удобства пользователей. Их стоит использовать только там, где есть иерархия страниц и вложенные разделы. Например, для одностраничных сайтов такой элемент навигации чаще всего не нужен.
Во-вторых, навигационная цепочка не должна подменять собой основное меню. Это вспомогательный инструмент, который дополняет структуру сайта, а не заменяет ее.
Отдельное внимание стоит уделить текстам ссылок. Не рекомендуется специально подгонять анкоры в «хлебных крошках» под SEO-ключи. Исключение – ситуации, когда ключевые фразы органично вписываются в логику разделов. В противном случае есть риск получить переспам и проблемы с поисковыми системами.
Если используется линейный тип навигации, путь должен быть прописан полностью – от начального раздела до текущей страницы. Незавершенные цепочки сбивают пользователей с толку и ухудшают восприятие структуры сайта.
Последний элемент «хлебных крошек» не должен быть ссылкой. Текущую страницу корректнее отображать в виде текста, чтобы избежать циклических переходов и дублирования навигации. Подробнее о циклических ссылках – в отдельной статье.
Важно также соблюдать единообразие: если на сайте используются «хлебные крошки», они должны располагаться в одном и том же месте на всех страницах. На главной странице в них, как правило, нет необходимости.
Для поисковой оптимизации рекомендуется добавить микроразметку «хлебных крошек» с использованием Microdata или RDFa. Это позволяет корректно отображать навигационную цепочку в результатах поиска Google. После внедрения разметку стоит проверить с помощью инструментов Яндекс Вебмастера и сервиса проверки структурированных данных Google.
И, наконец, навигационная цепочка должна гармонично вписываться в дизайн сайта и выглядеть как его органичная часть, а не как инородный элемент интерфейса.
Итоги
«Хлебные крошки» – значимый элемент навигации, который повышает удобство использования сайта и оказывает влияние на SEO. Они помогают посетителям быстрее ориентироваться в структуре разделов и переходить к нужным страницам без лишних действий. В результате улучшаются поведенческие показатели, а вместе с ними – и конверсия.
При этом ошибки в реализации могут дать противоположный эффект. На практике такие ситуации нередко возникают при работе с конструкторами сайтов или CMS с открытым исходным кодом, если настройке навигации не уделить должного внимания.
Модуль SEO PromoPult решает задачи комплексной оптимизации сайта: от внутренней и внешней SEO-настройки до работы с контентом. В чек-лист входит и корректная реализация «хлебных крошек». Вы можете доверить оптимизацию специалистам PromoPult, улучшить пользовательский опыт и привлекать трафик и лиды из поисковых систем. Бесплатный тест SEO в PromoPult доступен в течение 2 недель.
ВКонтакте
