Як правильно оформити хлібні крихти на сайті

Один з важливих елементів навігації на сайті — це ланцюжок переміщення ієрархічними рівнями вебресурсу. Такий маршрут метафорично називають «хлібними крихтами». Назва прижилася, тому що багато хто пам'ятає німецьку казку, в якій діти, заходячи глибоко в ліс, розсипали хліб, щоб знайти дорогу додому. Сучасні користувачі хочуть розуміти, де вони знаходяться на сайті, і завдання розробників — допомогти їм у цьому. Тим більше що додавання такої опції корисне для SEO-просування. У нашій статті розповімо про те, які функції виконують хлібні крихти на сайті, та запропонуємо інструкцію, як їх додати.

Що означає вираз «хлібні крихти»

Хлібні крихти — це автоматичні внутрішні посилання, які дають змогу користувачам відстежити своє місцезнаходження на вебресурсі та зрозуміти, наскільки далеко вони знаходяться від головної сторінки. Зазвичай вони знаходяться у верхній частині сайту, найчастіше прямо під навігаційною панеллю.

Як і внутрішні посилання, ці навігаційні елементи допомагають користувачам знаходити потрібну інформацію та залишатися довше на вебресурсі. Один з важливих принципів usability полягає в тому, щоб людина розуміла «статус системи», тобто знала, на якому ієрархічному рівні вона знаходиться. Якщо вона відчує себе дезорієнтованою, може перейти на один рівень вище та продовжити подорож сайтом. Погодьтеся, це хороша альтернатива виходу з вебресурсу або натискання кнопки «Назад» у браузері.

Зовнішній вигляд хлібних крихт на сайті

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

Розробникам та SEO-фахівцям мало розуміти, що таке breadcrumbs. Їм потрібно простежити, щоб цей елемент був помітний на сторінці. Він має візуально виділятись, але водночас не привертати до себе зайвої уваги. Такого ефекту можна досягти такими способами:

• вибирайте колір для шрифту крихт із достатнім контрастом стосовно фону – це робить їх видимими для користувачів та відповідає вимогам доступності;
• розмістіть їх поряд з основними навігаційними елементами. Користувачі зазвичай дивляться вліво-вгору у пошуку підказок;  
• оберіть розмір і стиль шрифту так, щоб він відрізнявся від того, який використовується на сторінці. Текст повинен бути читабельний на маленьких екранах без збільшення масштабу;
• використовуйте символи (наприклад, стрілки) для позначення шляху. Ці значки повинні доповнювати текст та спрямовувати погляд відвідувача по навігаційному ланцюжку.

Правильні хлібні крихти діють, як мовчазний гід. Вони ведуть користувачів за їх маршрутом на сайті.

Навіщо потрібні Breadcrumbs

Крім зручності для відвідувачів, велике значення мають для SEO хлібні крихти. Розберемося з цим детальніше.

Підвищення юзабіліті

Навігаційний ланцюжок сигналізує користувачеві, що переміщатися сайтом просто і на вебресурсі є інші не менш цікаві розділи.

Наприклад, якщо ви хочете більше дізнатися про асортимент відомої компанії Nestle та бренди, які доступні в Україні, ви можете легко перейти на один рівень вище та подивитися, які ще кондитерські вироби представлені в каталозі.

Перехід ще на один рівень нагору відкриває сторінку з категоріями, серед яких: «Кулінарія», «Дитяче харчування», «Кава та напої» та інші бренди.

Навігація допомагає людям легко знайти те, що вони шукають, і відкриває їм можливості глибше познайомитися з сайтом.

Елемент якісної внутрішньої перелінковки

Розбираючись з тим, хлібні крихти — що це, і намагаючись зрозуміти, яку роль вони грають у SEO, важливо усвідомити, що цей елемент — не просто навігаційна утиліта. Вони відіграють вирішальну роль у покращенні внутрішньої структури посилань вебресурсу. Google використовує їх для визначення взаємозв'язків між різними сторінками, які знаходяться глибше у структурі сайту.

Впроваджуючи розмітку структурованих даних у такому вигляді, ви допоможете пошуковим системам зрозуміти архітектуру сайту.

Опрацювання сніпету та підвищення його клікабельності

Як вже говорилося, хлібні крихти спрощують навігацію сайтом. Але вони роблять набагато більше, оскільки Google відображає ланцюжок у результатах пошуку.

Наприклад, вас цікавить, які бренди кави пропонує компанія Nestle. На запит «Кава від Нестле» у видачі будуть показані два посилання — на сторінку категорії та на продуктову. Уважний користувач зверне увагу на ці ланцюжки та перейде туди, де він знайде більше інформації, яка потрібна саме йому.

Аналогічно виглядає сторінка видачі пошуку iPhone конкретної моделі.

Але цього не станеться до того часу, поки ви не додасте мікророзмітку в breadcrumbs, щоб Google міг розпізнати їх і розмістити на сторінці результатів пошуку. Про те, як це зробити, докладно розповімо далі.

Різновиди хлібних крихт

Говорячи про те, що таке хлібні крихти на сайті, потрібно знати, що вони можуть бути різних видів. Найчастіше використовуються 2 основних принципи візуалізації маршруту користувача:

1. На основі ієрархії чи розташування відвідувача стосовно головної сторінки. Ланцюжок такого типу інформує про те, скільки рівнів у структурі вебресурсу і на якому з них перебуває людина. Найлегше це показати в географічній тематиці, наприклад:

Головна > США>Каліфорнія > Сан-Франциско

2. На основі атрибутів чи категорій. Цей підхід частіше застосовують у великих онлайн-магазинах чи маркетплейсах. Ось приклад хлібних крихт на сайті, де продається одяг та інші товари, потрібні для дому.

Користувач має можливість повернутися на попередню сторінку та переглянути продукцію іншого бренду або інші пропозиції в категорії.

Зверніть увагу на те, як можна відобразити breadcrumbs для категорій, коли шлях занадто довгий. На сторінці відображаються лише три останні елементи, а попередні «ховаються» під назвою «Повернутися до попередньої сторінки».

Крім цих різновидів, існують інші способи відображення ланцюжка навігації.

Динамічний принцип

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

Уявіть інтернет-магазин, де користувач шукає червоні кросівки. Замість стандартного шляху (Головна > Каталог > Взуття > Кросівки) динамічні breadcrumbs можуть виглядати так:

Головна > Пошук: «Червоні кросівки» > Сортування: Ціна > Фільтр: Ціна до 5000 грн

При зовнішній зручності такий принцип може заплутати користувачів. Люди можуть переміщатися до одного і того ж пункту різними маршрутами, а це означає, що ви щоразу показуватимете різну структуру навігації, що може спантеличити. Також динамічний принцип формування ланцюжка та підключення мікророзмітки несумісні, що не дуже добре для SEO.

Підхід зі списком, що випадає

Цей підхід застосовується на сайтах із великим каталогом. Цікаве рішення пропонують творці статистичного порталу, де опубліковано звіти про розвиток галузей у всьому світі. Breadcrumbs на сторінках цього вебресурсу допомагають попередньо переглянути наступні кроки, які може зробити відвідувач.

Мінімалістичний підхід

Замість відображення повного шляху на сторінку можна додати кнопку «Назад». Вона фактично виконує ту ж функцію, що й аналогічна кнопка у браузері, але робить це зручніше та гнучкіше.

Такий підхід корисний для сайтів із численними фільтрами. При натисканні кнопки «Назад» у браузері фільтри скидаються, що змушує користувача налаштовувати їх знову або шукати інший, більш зручний ресурс. Функція «Назад» на сайті вирішує цю проблему, повертаючи користувача на попередню сторінку зі збереженими налаштуваннями фільтрів і пошуку.

На яких сайтах застосовуються хлібні крихти

Хлібні крихти в дизайні просто необхідні для таких порталів:

• великих та середніх онлайн-магазинів, де в каталогах товари розміщені за категоріями та підкатегоріями. Навігація дозволяє повернутися до сторінок із вибраними фільтрами та параметрами;
• інформаційних сайтів, на яких статті є частиною більших тем;
• довідкових порталів, де користувачам важливо зорієнтуватися у величезному масиві інформації;
• вебресурсів великих компаній, де є безліч внутрішніх розділів та документів;
• цифрових бібліотек, у яких документи та книги організовані за темами чи жанрами.

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

Як правильно застосувати «хлібні крихти»: корисні поради

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

• почніть із перевірки логічності та ієрархічності структури сайту, інакше переходи між рівнями будуть незрозумілими для людини;
• дотримуйтесь принципів стислості та послідовності. Подбайте про те, щоб назви сторінок у ланцюжку були короткими та інформативними;
• простежте, щоб хлібні крихти у вебдизайні виділялися на сторінці;
• зробіть кожний елемент навігації клікабельним (крім останнього). Можливо, застосуйте підсвічування або підкреслення для візуального виділення при наведенні курсору;
• переконайтеся, що вони правильно відображаються на екранах різних гаджетів;
• дотримуйтесь принципу уніфікації (одноманіття).

Використовуйте інструменти аналітики, щоб зрозуміти, чи корисні впроваджені вами елементи, і при необхідності вносьте покращення.

Впровадження мікророзмітки хлібних крихт для відображення у сніпеті

Ми вже говорили про важливість впровадження мікророзмітки. Це допомагає користувачам краще зрозуміти структуру сайту, перш ніж вони на нього перейдуть.

Наприклад, ви хочете, щоб Google зміг відобразити в сніпеті не просто URL, а структуру порталу за таким принципом:

Головна > Каталог>Електроніка > Смартфони

Тоді вам потрібно працювати за таким зразком:

Де елементи розмітки Schema.org означають таке:

• @type — визначає тип даних, у цьому випадку — BreadcrumbList.
• itemListElement — містить список елементів (ListItem), кожен з яких є окремим рівнем.
• Position — вказує позицію елемента у списку.
• Name — назва сторінки.
• Item — URL сторінки.

Як додати навігаційний ланцюжок на WordPress

У цьому розділі ми дамо детальну інструкцію, як зробити хлібні крихти.

За допомогою плагінів

Додавання breadcrumbs до сайту WordPress за допомогою плагіна — простий спосіб покращити навігацію. Ця опція доступна у двох популярних плагінах — Yoast SEO та Breadcrumb NavXT.

1. Почнемо з опису роботи за допомогою Yoast SEO. Припустимо, що цей плагін у вас вже встановлений та активований.
2. Треба перейти до розділу SEO → Зовнішній вигляд пошуку → у вкладці «Хлібні крихти» (Breadcrumbs) увімкнути перемикач.
3. Наступний крок — налаштування зовнішнього вигляду ланцюжка. Відкрийте файл header.php, single.php, page.php або інший файл теми, де ви хочете відобразити крихти. Додайте наступний код у потрібне місце.

Після збереження змін перейдіть на будь-яку сторінку сайту та переконайтеся, що все відображається коректно.

Breadcrumb NavXT — це спеціалізований плагін для створення breadcrumbs з розширеними налаштуваннями. Основні етапи роботи у ньому аналогічні попередньому. Але там ви зможете використати хлібні крихти CSS для стилізації цього елементу відповідно до дизайну сайту.

Без допомоги плагінів

Додавання ланцюжка навігації на сайт WordPress без використання плагінів потребує внесення змін до коду. Такий спосіб може бути корисним, якщо ви не хочете нагромаджувати систему, встановлюючи доповнення, та налаштувати хлібні крихти html точно під свої потреби.

1. Для початку вам потрібно додати функцію, яка генеруватиме breadcrumbs html. Ви повинні працювати у файлі functions.php:

2. Після цього вставте цю функцію в шаблони вашої теми. Зазвичай її розміщують у header.php, single.php, page.php чи archive.php.

Цей код помістіть у місце, де ви хочете відображати хлібні крихти, наприклад, відразу під заголовком сторінки.

3. Для стилізації можна внести зміни до файлу style.css теми.

Після завершення цих етапів перейдіть на сторінки свого сайту, щоб переконатися, що дизайн ланцюжка відповідає вашим очікуванням.

Як впровадити хлібні крихти для Joomla

У Joomla є спеціальний модуль, який відповідає за відображення та SEO breadcrumb — це Mod_Breadcrumbs. Знайти його можна за цим шляхом:

Панель керування > Розширення > Менеджер модулів.

Далі потрібно встановити перемикачі у потрібні положення.

Замість висновку

Хлібні крихти — це простий, але потужний інструмент, який може покращити навігаційну структуру вашого вебресурсу, взаємодію з користувачем та позиції у пошуку. По суті, впровадження цього елемента є необхідним кроком для покращення показників SEO.