Користувач заходить на сайт, читає статтю і хоче повернутися до батьківської категорії. Без навігації він тисне «Назад» у браузері та йде з сайту. Для власника це втрачений перегляд, для 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 закриє потребу із запасом гнучкості. Оберіть спосіб під свій стек і додайте крихти сьогодні: відвідувачі скажуть дякую мовчки, зниженням відмов і зростанням часу на сайті.