Хлебные крошки: что это, как их добавить на сайт и настроить

В этой статье мы рассмотрим, какие есть виды хлебных крошек, почему они так называются, как их настроить в Wordpress и Joomla.

Хлебные крошки - неотъемлемый инструмент навигации на современных веб-ресурсах. Они помогают пользователям быстрее ориентироваться в структуре сайта и перемещаться между разделами.

Современные хлебные крошки представляют собой горизонтальную линейку ссылок, отображающую путь от главной страницы до текущего местонахождения пользователя. Они не только облегчают навигацию, но и решают важные задачи в UX и SEO.

Крошки особенно актуальны для крупных информационных ресурсов - интернет-магазинов, новостных сайтов, корпоративных порталов. Однако они могут быть полезны на любом сайте, имеющем иерархическую структуру с большим количеством разделов и подразделов.

Термин "хлебные крошки" пришёл в веб-дизайн из известной сказки братьев Гримм "Гензель и Гретель". Когда герои заблудились в лесу, они использовали крошки от хлеба, чтобы отмечать пройденный путь и иметь возможность потом вернуться домой.

Эта же идея легла в основу хлебных крошек на сайтах. Они позволяют пользователю ориентироваться в структуре ресурса, видеть текущий уровень вложенности и при необходимости возвращаться по разделам назад.

Таким образом, название, вдохновлённое сюжетом сказки, в полной мере отражает функциональность этого важного навигационного инструмента.

Существует несколько разновидностей хлебных крошек:

Линейные - самый распространенный тип, отображающий прямой путь от главной к текущей странице
Динамические - генерируются и обновляются автоматически
С выпадающим списком - вместо ссылок используется drop-down меню
Обратные - цепочка выстраивается не от главной страницы к текущей, а наоборот

При реализации хлебных крошек важно следовать основным правилам для обеспечения информативности и юзабилити:

Точно отображать иерархию сайта
Делать текст крошек максимально понятным
Размещать в верхней части страницы
Использовать разметку данных Schema.org

WordPress

Установить плагин Yoast SEO или RankMath - они умеют автоматически генерировать крошки
В настройках Yoast перейти в раздел "Цепочки навигации" и настроить параметры: разделитель между крошками, текст на главной, вывод домашней страницы
RankMath также создаёт крошки. В его настройках дополнительно можно: скрывать на некоторых страницах, менять разделитель, добавлять кастомные таксономии
Если нужно без плагинов - используется код на PHP который размещается в шаблоне темы (файл header.php)

Joomla

Установить модуль "Навигатор сайта" через менеджер расширений
В его настройках можно задать: разделитель, показ главной страницы, отображение статичных/динамичных крошек, исключения
Выбрать позиции для вывода - шапка, подвал, сайдбар
Вручную добавляется код на PHP в шаблоне для парсинга переменной $pathway

Таким образом, компактные и функциональные хлебные крошки способны решать сразу несколько важных задач - облегчать навигацию по сайту, улучшать поведенческие факторы для поисковой оптимизации, повышать удобство использования ресурса для посетителей.

Более подробную статью с примерами кода для хлебных крошек смотрите на нашем сайте.

skil-web-dev.ru

Хлебные крошки (breadcrumbs): что это и как сделать на сайте — SEO продвижение сайтов

Смотрите нас в других источниках:

🎯VK

🎯Telegram

🎯Facebook

5 комментариев

Евгений Стерлигов

22.12.2023

Сколько вообще уровней должно быть в навигации, чтобы не путать посетителей?

Ответить

SEOшник

23.12.2023

Автор

Всё зависит от структуры сайта. Создавать можно сколько угодно уровней (в разумных рамках) лишь бы они несли пользу пользователю, если это помогает в перемещении по сайту. Если касаться средних цифр, то обычно их порядка 3-5.