Пользователь заходит на сайт, читает статью и хочет вернуться в родительскую категорию. Без навигации он жмёт «Назад» в браузере, и уходит с сайта. Для владельца это потерянный просмотр, для SEO, сигнал «контент не удержал».

Хлебные крошки решают эту проблему одной строкой навигации. Они показывают путь от главной до текущей страницы, помогают Google понять структуру сайта и напрямую влияют на снижение отказов. Добавить их в WordPress можно за 10 минут, даже если вы никогда не редактировали код темы.

Ниже, пошаговое руководство: от понимания типов breadcrumb до вставки готового кода в шаблон. Без воды, с реальными скриншотами и проверенными плагинами.

💡 Быстрый обзор:

• Разберитесь с четырьмя типами хлебных крошек и выберите подходящий под структуру вашего сайта
• Добавьте breadcrumb через Yoast SEO (самый популярный способ) или Breadcrumb NavXT (максимальная гибкость)
• Настройте микроразметку Schema.org, без неё Google не покажет крошки в поисковой выдаче

Что такое хлебные крошки

Breadcrumb (хлебные крошки), это строка навигации, которая показывает пользователю его текущее положение в иерархии сайта. Название отсылает к сказке о Гензеле и Гретель: дети бросали хлебные крошки, чтобы найти дорогу домой. В вебе этот механизм работает так же, цепочка ссылок ведёт от текущей страницы к главной.

Стандартный вид хлебных крошек использует разделитель > между уровнями. Например, если читатель находится в статье про структуру URL внутри раздела «Учебник WordPress», он видит: Главная > Учебник WordPress > Структура URL в WordPress. Цепочка обычно размещается в верхней части контента, реже, в нижней.

Технически каждая крошка, это ссылка на соответствующий уровень иерархии. Последний элемент (текущая страница) чаще всего делают некликабельным, пользователь уже на ней. Для поисковых систем эта цепочка превращается в структурированные данные BreadcrumbList по стандарту Schema.org.

Виды хлебных крошек

На сайтах применяют четыре типа навигационных цепочек. Выбор зависит от архитектуры сайта и пользовательского сценария.

На основе расположения

Самый распространённый тип. Показывает текущую позицию пользователя в древовидной структуре сайта. Пример выше, как раз location-based breadcrumb. Особенно полезен для сайтов с глубокой иерархией: интернет-магазинов, порталов с документацией, новостных хабов. Пользователь всегда понимает, в каком разделе находится, и может перейти на уровень выше одним кликом.

На основе атрибутов

Используется в основном на сайтах электронной коммерции. Вместо фиксированного пути показывает активные фильтры товаров. Структура выглядит так: Главная > Мобильные телефоны > Apple > iPhone 15 > 128 ГБ > Чёрный. Каждый атрибут, это кликабельный фильтр, позволяющий быстро откатить выбор. Удобно для каталогов с десятками параметров подбора.

На основе истории

Отображает маршрут, который пользователь прошёл с момента входа на сайт. Фактически дублирует кнопку «Назад» браузера, поэтому этот тип практически не используется. UX-дизайнеры предпочитают стандартную браузерную навигацию: она привычнее и не загромождает интерфейс.

На основе пути

Гибридный тип: совмещает историю посещений и атрибутивный подход. Структура: Вернуться на предыдущую > Категория > Цвет > Размер. Встречается редко, в основном в нишевых интерфейсах, где важна комбинация контекста и пути.

Зачем хлебные крошки вашему сайту

Google использует breadcrumb для двух целей: понимание структуры сайта и отображение навигационной цепочки прямо в поисковой выдаче. Вместо голого URL пользователь видит читаемый путь: techblog.sdstudio.top > WordPress > Плагины. Это повышает кликабельность сниппета, посетитель ещё до перехода понимает, где находится страница.

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

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

Как добавить хлебные крошки в WordPress

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

Способ 1. Yoast SEO

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

Скопируйте код ниже и вставьте его в single.php, page.php или header.php вашей темы. Не добавляйте в functions.php, это может вызвать конфликты при обновлении темы.

1
<?php
2
if (function_exists('yoast_breadcrumb')) {
3
    yoast_breadcrumb('<p id="breadcrumbs">', '</p>');
4
}
5
?>

После вставки кода перейдите в админке: Yoast SEO** → Settings → Advanced → Breadcrumbs**. Переведите тумблер «Enable breadcrumbs for your theme» в активное положение.

В этом же разделе можно настроить разделитель, префикс для главной страницы и taxonomy-привязки для кастомных типов записей. Yoast автоматически генерирует микроразметку BreadcrumbList, дополнительные действия не нужны.

Способ 2. Breadcrumb NavXT

Если Yoast не установлен или нужна более гибкая настройка, Breadcrumb NavXT даёт полный контроль над внешним видом и поведением цепочки. Плагин активен и обновляется: версия 7.5.1 (декабрь 2025) закрыла уязвимость CVE-2025-13842, поэтому ставьте только свежую версию.

Установите плагин из репозитория Breadcrumb NavXT, активируйте и перейдите в Settings → Breadcrumb NavXT.

Настройте шаблоны крошек под свою структуру. Затем добавьте вызов в шаблон темы:

1
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
2
    <?php if (function_exists('bcn_display')) {
3
        bcn_display();
4
    } ?>
5
</div>

Плагин поддерживает микроразметку Schema.org из коробки, работает с WPML, Polylang, bbPress и BuddyPress. Для вывода через виджет: Appearance → Widgets, перетащите «Breadcrumb Trail» в нужную область.

Способ 3. Rank Math SEO

Альтернатива Yoast со встроенными хлебными крошками. После установки Rank Math перейдите в Rank Math** SEO → General Settings → Breadcrumbs**. Включите опцию и добавьте шорткод [rank_math_breadcrumb] в нужное место шаблона. Работает аналогично Yoast: автоматическая микроразметка и гибкая настройка внешнего вида.

Способ 4. Встроенная функция темы

Некоторые темы (GeneratePress, Astra Pro, Kadence) включают хлебные крошки в настройки кастомайзера. Проверьте Appearance → Customize → Layout → Breadcrumbs, возможно, вам даже не понадобится плагин.

Проверка и отладка

После добавления кода проверьте результат в двух местах. Во-первых, откройте любую внутреннюю страницу сайта, цепочка должна отображаться над заголовком или под шапкой. Во-вторых, запустите Rich Results Test от Google, введите URL страницы и убедитесь, что детектится элемент «BreadcrumbList» без ошибок.

Если крошки не отображаются, проверьте, что файл шаблона, куда вы вставили код, действительно используется для данной страницы. В некоторых темах single.php переопределяется через singular.php или блоки в редакторе сайта (FSE). Для блочных тем используйте виджет Breadcrumb NavXT или шорткод Rank Math.

⁉️🤔 Частые вопросы

Влияют ли хлебные крошки на позиции в Google?

Напрямую, нет. Хлебные крошки не являются официальным фактором ранжирования. Но они влияют косвенно: Google подставляет breadcrumb в сниппет вместо URL, кликабельность растёт, CTR повышается. Плюс микроразметка BreadcrumbList помогает поисковику точнее понять архитектуру сайта, а это уже влияет на индексацию глубоких страниц. Сайты с хлебными крошками в среднем имеют отказы на 5-10% ниже при прочих равных.

Можно ли добавить хлебные крошки без плагина?

Да. Добавьте функцию в functions.php, которая строит цепочку на основе wp_get_nav_menu_items() или иерархии категорий. Затем вызовите её в шаблоне. Минус ручного подхода: вам нужно самостоятельно генерировать микроразметку Schema.org, обрабатывать крайние случаи (главная, 404, вложения) и обновлять код при смене структуры сайта. Для большинства проектов плагин, быстрее и надёжнее.

Какой разделитель лучше: >, / или →?

Разделитель >, стандарт де-факто. Он интуитивно читается как «переход на уровень глубже» и используется Google в выдаче. Символ / визуально легче, но путается с URL. Стрелка → симпатичнее > дизайнерам, но Google может не распознать её в микроразметке. Рекомендация: ставьте > для максимальной совместимости.

Обязательно ли показывать хлебные крошки на мобильных?

На мобильных экранах пространство ограничено, но хлебные крошки там даже полезнее. Пользователь на смартфоне не видит боковое меню, breadcrumb становится единственным быстрым способом подняться по иерархии. Большинство тем автоматически адаптируют цепочку под мобильные: уменьшают шрифт и обрезают промежуточные уровни до формата «... > Текущая».

Что делать, если на сайте используется кастомная структура URL?

Breadcrumb NavXT позволяет вручную задать иерархию для кастомных типов записей и таксономий. В настройках плагина перейдите на вкладку Post Types и выберите родительскую таксономию для каждого CPT. Для совсем нестандартных случаев используйте фильтр bcn_breadcrumb_trail, он даёт полный контроль над каждым элементом цепочки.

Стоит ли добавлять хлебные крошки в 2026 году

Однозначно да. Это не тренд и не эксперимент, проверенный годами навигационный паттерн, который улучшает UX и косвенно помогает SEO. Цена внедрения, 10 минут на установку плагина и вставку одной строки кода. Отдача, понятная навигация для посетителей и аккуратные сниппеты в выдаче Google.

Если у вас уже стоит Yoast SEO или Rank Math, вы буквально в двух кликах от готового результата. Если нет, Breadcrumb NavXT закроет потребность с запасом по гибкости. Выберите способ под свой стек и добавьте крошки сегодня: посетители скажут спасибо молча, снижением отказов и ростом времени на сайте.