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