Хлебные крошки: что это, как их добавить на сайт и настроить
В этой статье мы рассмотрим, какие есть виды хлебных крошек, почему они так называются, как их настроить в Wordpress и Joomla.
Хлебные крошки - неотъемлемый инструмент навигации на современных веб-ресурсах. Они помогают пользователям быстрее ориентироваться в структуре сайта и перемещаться между разделами.
Современные хлебные крошки представляют собой горизонтальную линейку ссылок, отображающую путь от главной страницы до текущего местонахождения пользователя. Они не только облегчают навигацию, но и решают важные задачи в UX и SEO.
Крошки особенно актуальны для крупных информационных ресурсов - интернет-магазинов, новостных сайтов, корпоративных порталов. Однако они могут быть полезны на любом сайте, имеющем иерархическую структуру с большим количеством разделов и подразделов.
Откуда пошло название
Термин "хлебные крошки" пришёл в веб-дизайн из известной сказки братьев Гримм "Гензель и Гретель". Когда герои заблудились в лесу, они использовали крошки от хлеба, чтобы отмечать пройденный путь и иметь возможность потом вернуться домой.
Эта же идея легла в основу хлебных крошек на сайтах. Они позволяют пользователю ориентироваться в структуре ресурса, видеть текущий уровень вложенности и при необходимости возвращаться по разделам назад.
Таким образом, название, вдохновлённое сюжетом сказки, в полной мере отражает функциональность этого важного навигационного инструмента.
Какие бывают хлебные крошки
Существует несколько разновидностей хлебных крошек:
- Линейные - самый распространенный тип, отображающий прямой путь от главной к текущей странице
- Динамические - генерируются и обновляются автоматически
- С выпадающим списком - вместо ссылок используется drop-down меню
- Обратные - цепочка выстраивается не от главной страницы к текущей, а наоборот
При реализации хлебных крошек важно следовать основным правилам для обеспечения информативности и юзабилити:
- Точно отображать иерархию сайта
- Делать текст крошек максимально понятным
- Размещать в верхней части страницы
- Использовать разметку данных Schema.org
Как настроить крошки в Wordpress и Joomla
WordPress
- Установить плагин Yoast SEO или RankMath - они умеют автоматически генерировать крошки
- В настройках Yoast перейти в раздел "Цепочки навигации" и настроить параметры: разделитель между крошками, текст на главной, вывод домашней страницы
- RankMath также создаёт крошки. В его настройках дополнительно можно: скрывать на некоторых страницах, менять разделитель, добавлять кастомные таксономии
- Если нужно без плагинов - используется код на PHP который размещается в шаблоне темы (файл header.php)
Joomla
- Установить модуль "Навигатор сайта" через менеджер расширений
- В его настройках можно задать: разделитель, показ главной страницы, отображение статичных/динамичных крошек, исключения
- Выбрать позиции для вывода - шапка, подвал, сайдбар
- Вручную добавляется код на PHP в шаблоне для парсинга переменной $pathway
Вывод
Таким образом, компактные и функциональные хлебные крошки способны решать сразу несколько важных задач - облегчать навигацию по сайту, улучшать поведенческие факторы для поисковой оптимизации, повышать удобство использования ресурса для посетителей.
Более подробную статью с примерами кода для хлебных крошек смотрите на нашем сайте.
Смотрите нас в других источниках:
🎯VK
Сколько вообще уровней должно быть в навигации, чтобы не путать посетителей?
Всё зависит от структуры сайта. Создавать можно сколько угодно уровней (в разумных рамках) лишь бы они несли пользу пользователю, если это помогает в перемещении по сайту. Если касаться средних цифр, то обычно их порядка 3-5.
Есть возможность настраивать хлебные крошки на конструкторах сайтов?
А, если хлебные крошки показываются только на десктопной версии сайта, а на адаптиве их нет - это нормально?
нет, не нормально, видимо для экономии места скрыли, а можно просто адаптировать