1. Для чого використовуються «хлібні крихти»?
2. Якими бувають «хлібні крихти»?
3. Як створити правильні «хлібні крихти»?
4. підводимо підсумки

«Хлібні крихти» (від англ. «Breadcrumbs») - це навігаційна ланцюжок на сайті, яка відображає шлях від головної сторінки до поточної. Вони вперше використовувалися в файлових менеджерах типу Norton Commander або Volkov Commander і показували шлях до кореневої папки.

Для чого використовувати цю дублюючу навігацію на сайті? Яким чином вона впливає на юзабіліті і SEO? Як її реалізувати? Шукайте відповіді на найпопулярніші питання про «хлібних крихтах» в нашому новому пості.

Для чого використовуються «хлібні крихти»?

У далекому 1995 році Якоб Нільсен сформулював 10 принципів юзабіліті , Перший з яких - «Видимість статусу системи». Суть його в тому, що користувач завжди повинен знати, в якій частині сайту він знаходиться. Саме для реалізації цього принципу потрібні «хлібні крихти». Відомий дизайнер Артемій Лебедєв в «Ководство» пише, що дублююча навігація доречна, коли є логічна вкладеність змісту, тобто майже на всіх інформаційних сайтах. Додамо, що навігаційна ланцюжок необхідна також інтернет-магазинах і корпоративних сайтів.

З точки зору юзабіліті «хлібні крихти» вирішують три завдання:

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

Крім позитивного впливу на юзабіліті дублююча навігація надає SEO-ефект:

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

Якими бувають «хлібні крихти»?

Навігаційна ланцюжок може бути організована за різними принципами:

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

   

   Тут показана наступна структура вкладеності: головна сторінка - «Меблевий центр», потім слід сторінка каталогу товарів, далі - розділ «Кухні», далі - «Кухонні гарнітури» і, нарешті, назву конкретного гарнітура.

   При дуже складну структуру сайту зустрічається урізаний варіант «хлібних крихт»:

   

   У магазині Amazon «крихти» починаються не з головної, а з назви розділу каталогу. На скріншоті видно, що «початком відліку» є розділ магазину «Home & Kitchen».

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

   

   На скріншоті кнопка «Results» веде з картки товару на сторінку з результатами пошуку за запитом «Shoes».

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

   

   У цьому прикладі посилання «Футболки чоловічі» і «Назад до огляду» дублюються, що негативно позначається на юзабіліті і SEO.

4. Атрибутивний принцип. Використовується інтернет-магазинами і онлайн-каталогами. Зміст і шлях сторінки формується на основі заданих користувачем властивостей і фільтрів.

   

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

Як створити правильні «хлібні крихти»?

Створити навігаційну ланцюжок можна різними способами: за допомогою PHP, CSS, плагінів для популярних CMS WordPress, Joomla! і інших движків - в мережі можна знайти масу рішень. Який би спосіб ви не вибрали, дотримуйтеся наступних порад:

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

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

  

• приберіть циклічні посилання - останній елемент навігаційної ланцюжка не повинен бути клікабельним (як на малюнку нижче), а прописаний у вигляді тексту:

  

• якщо ви використовуєте «хлібні крихти», розташовуйте їх на кожній сторінці сайту в одному і тому ж місці;

• зробіть мікророзмітки «хлібних крихт» - це дозволить інформативно відображати їх в результатах пошуку Google (інструкцію і приклади реалізації коду можна знайти в довідці Google для веб-майстрів ):

  

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

підводимо підсумки

«Хлібні крихти» - це важливий навігаційний елемент, який підвищує юзабіліті ресурсу. Вони допомагають користувачам орієнтуватися на сайті і в один клік переходити в потрібний розділ. В результаті це може позитивно впливати на поведінкові показники і конверсію. Однак даний елемент юзабіліті може працювати з точністю навпаки, якщо допустити помилки в реалізації. Практика показує , Що таке може трапитися при створення веб-ресурсу на базі конструкторів або відкритих CMS. Якщо ви хочете перевірити, наскільки грамотно і коректно формуються «хлібні крихти» на вашому сайті, ви можете зробити це в рамках просунутого SEO-аудиту в PromoPult.