Хлебные крошки: что это такое, зачем они нужны, какими бывают и как создать
«Хлебные крошки» — навигационная цепочка, расположенная вверху веб-ресурса. Это последовательность с главной страницы до раздела, где находится клиент. Навигация создана для быстрой ориентации по сайту. Чем удобнее ресурс в использовании, тем больше лояльность клиентов.
В данной статье разберём: для чего нужны bread crumbs, какие у них плюсы, виды навигационных цепочек и как их правильно создать.
Зачем нужны «хлебные крошки»
«Хлебные крошки» воздействуют на usability и SEO:
- Отражают структуру сайта.
- Указывают клиенту, в какой раздел он зашёл. Чем логичнее расположены страницы, тем больше вовлечённость. Для компании — это значит увеличение трафика и продаж.
- Оптимизируют поведенческие показатели.
- Bread crumbs с микроразметкой способствуют улучшению сниппета в поисковой системе.
Преимущества «хлебных крошек»
Удобство для клиентов
С навигационной цепочкой проще находить нужную информацию на сайте. Пользователям понятно, как перейти в иной раздел или назад.
Например, вам нужен робот-пылесос. Однако модель, которую вы нашли, не соответствует некоторым критериям. Тогда через навигацию можно посмотреть другие товары из этой категории.
Также «хлебные крошки» позволяют перейти в начало, не нажимая «Назад». Если клиент поставит фильтр (по стоимости, бренду, цвету и т. д.), то, возвращаясь с помощью браузера, он потеряет эти настройки. Поэтому на сайте размещается кнопка «Назад». Используя её, клиент вернётся на прошлую страницу и сохранит выбранные характеристики.
Внутренняя перелинковка
«Хлебные крошки» — одна из моделей веб-навигации, поэтому её полезно использовать для качественной внутренней перелинковки.
Успешный сниппет и увеличение позиций
Когда «хлебные крошки» расположены правильно, в поиске появляется сниппет с навигационной цепочкой. Примечательно, что цепочка меняется вместе с запросом клиента.
Пользователи могут открывать различные разделы через сниппет в поиске. Эта функция оптимизирует поведенческие факторы, а организация дополнительно показывает иные разделы своего сайта.
Какими бывают «хлебные крошки»
Bread crumbs бывают нескольких типов. Выбор зависит от структуры веб-ресурса.
Линейный тип
Самый популярный вариант, где демонстрируется цепочка от главной страницы до нужной.
Большинство сайтов имеют много уровней вложенности, поэтому они урезают навигацию. В таком случае начало цепочки — раздел или подраздел.
Функция «Назад»
Вместо «хлебных крошек» применяется ссылка «Назад к каталогу», «Вернуться назад» и др. Подходит, когда на сайте есть функция поиска.
Объединение предыдущих типов
Смешанный тип, когда «хлебные крошки» совмещаются с кнопкой «Назад». Используется для страниц, которые клиенты находят через поиск на сайте.
Динамический тип
Навигация формируется, исходя из пути потребителя. Такой способ часто применяется в онлайн-магазинах, где продукция находится сразу в нескольких разделах.
Навигация с появляющимся меню
Данная функция создана, чтобы клиент мог легко посмотреть, какие есть разделы и что в них входит.
Атрибутивный тип
Навигационный маршрут выбирается клиентом на основе указанных характеристик.
Добавляя или удаляя фильтры, посетитель сайта создаёт собственный «путь» к продукции. Это улучшает юзабилити.
Как создать «хлебные крошки»
Существует несколько способов создания bread crumbs:
- Применение стандартных компонентов или модулей CMS.
- Использование плагинов.
- Добавление навигации через PHP или CSS.
Правила, о которых нужно знать:
- Не заменяйте основное меню «хлебными крошками» на сайте. Они выполняют вспомогательную функцию.
- Не адаптируйте текстовые анкоры в навигации под ключи. Адаптировать можно, но только если ключевые фразы подходят по смыслу к «хлебным крошкам».
- Пишите маршрут до конца, добавляя наименование определённого товара в цепочке.
- Не делайте заключительный элемент веб-навигации кликабельным.
- Размещайте «хлебные крошки» всегда в одном месте.
- Применяйте bread crumbs по необходимости. Они добавляются для комфортного использования ресурса. На одностраничных сайтах «хлебные крошки» не нужны.
- Создайте микроразметку для навигации через микроформаты Microdata и RDFa. Так они логично и содержательно отобразятся в поиске.
- Посмотрите правильность разметки через поисковые системы (например, валидатор микроразметки от «Яндекс.Вебмастер»).
Ошибки при создании хлебных крошек
Расположение навигации в нижней области сайта. Посетители могут просто не увидеть её.
Применение нескольких путей для одного продукта. Когда на конкретный товар можно перейти через главную страницу, раздел или по ссылке, маршрут постоянно отображается по-новому. В итоге нарушается внутренняя иерархия. Это ведёт к тому, что клиенты путаются, а роботы с трудом индексируют сайт.
Заключение
«Хлебные крошки» — это навигационное меню, улучшающее usability и SEO. Благодаря им клиенты легко передвигаются по веб-странице и находят необходимый товар.
Внедрение «хлебных крошек» не отнимет большого количества времени, а добавление их на сайт отлично повлияет на юзабилити, поисковую позиции, сниппет и конверсию.