Хлібні крихти на сайті: навіщо потрібен ланцюжок «Головна — Категорія — Товар»

Хлібні крихти — це рядок над заголовком сторінки на кшталт «Головна — Ноутбуки — Ігрові ноутбуки — ASUS TUF Gaming». Виглядає як дрібниця, але виконує роботу, з якою меню не справляється: показує, де людина зараз, і дає вийти на рівень вище одним кліком.

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

Кому вони насправді потрібні

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

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

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

Як зробити їх правильно

Один рядок, зліва направо, від загального до конкретного. Перша ланка — головна, остання — поточна сторінка звичайним текстом без посилання.

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

Не дублюйте заголовок сторінки. Крихти — це шлях, а не назва. Вони йдуть дрібнішим шрифтом над H1 і не конкурують із ним за увагу. Як вибудувати ієрархію заголовків, описано в матеріалі про заголовки H1, H2 і структуру тексту.

Розмітка для пошукових систем. Ланцюжок варто позначити структурованими даними — тоді в результатах пошуку замість довгої адреси зʼявляється зрозумілий шлях розділів. Про це є окремий матеріал — про структуровані дані Schema, і про те, як Google формує сніпет у видачі.

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

Мобільна версія

На телефоні повний ланцюжок із чотирьох рівнів зʼїдає екран і переноситься на два рядки. Робочі варіанти:

• горизонтальний рядок із прокруткою вбік, без переносу;
• згорнутий вигляд: показані тільки головна, три крапки й батьківська категорія, решта розкривається натисканням;
• мінімальний варіант — одна ланка «← Ноутбуки», тобто просто повернення на рівень вище.

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

Типові помилки

• Ланцюжок не відповідає реальній структурі. Показує «Головна — Каталог — Товар», хоча між ними є ще дві категорії.
• Крихти будуються за історією переходів. Один і той самий товар показує різний шлях у різних людей — це заплутує й ламає розмітку.
• Остання ланка клікабельна й веде сама на себе.
• Крихти є, а розмітки немає — половина користі втрачена.
• Занадто помітні: великий шрифт, яскравий колір, відступи як у заголовка. Це службовий елемент, він має бути стриманим.

Крихти в блозі та розділі послуг

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

У блозі ланцюжок виглядає як «Головна — Блог — Рубрика — Стаття». Він дає читачеві, що прийшов із пошуку на одну статтю, побачити, що поруч є ціла рубрика на цю тему. Разом із тематичними добірками це помітно збільшує кількість переглянутих сторінок — про такий підхід є матеріал про тематичні кластери й pillar-сторінки.

У розділі послуг із вкладеністю крихти виконують роль карти: «Головна — Послуги — Автоматизація — Інтеграція з CRM». Людина одразу бачить, що послуга не одна й що поруч є суміжні.

Як перевірити, що вони справді працюють

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

• чи зрозуміло за пʼять секунд, у якому ви розділі;
• чи можна одним кліком піднятися на рівень вище;
• чи однакові назви в крихтах і в меню;
• чи не переноситься рядок на два поверхи на телефоні.

Якщо на будь-яке питання відповідь «ні» — крихти є, а роботи своєї не виконують.

Коротко

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

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