Хлібні крихти або як істотно поліпшити навігацію сайту
Навігація по багатосторінковим сайту неможлива без чітких і логічних покажчиків. Зазвичай структура багатосторінкових сайтів є вкладеною: є кілька рівнів, в які включені підрівні, мають в свою чергу ще кілька підрівнів і так до нескінченності. Багатосторінковий сайт нагадує висотний будинок з безліччю квартир. Важливо вибудувати навігацію таким чином, щоб перехід на потрібний рівень або підрівень міг бути здійснений за один-два кроки. Даній вимозі відповідає навігація "Хлібні крихти", додавання цього компактного елемента на сторінку спростить користувачеві пошук потрібного рівня в каталозі.
Як виглядають «Хлібні крихти»
Дане доповнення не є самостійним елементом. "Хлібні крихти" зазвичай використовують разом зі стандартним деревовидним меню, за рахунок чого його функціонал і юзабіліті різко підвищуються. «Breadcrumbs» - так цей термін описаний в англійській мові - виступають свого роду мітками на шляху проходження користувача. Вихідна точка поміщається на початку рядка хлібних крихт, а поточний стан в кінці. Проміжні пункти виділені, і до будь-якого з них завжди можна повернутися з відкритої в даний момент сторінки.
Така навігація не є чимось новим і властивим тільки веб-інтерфейсів, "хлібні крихти" використовуються повсюдно. Вони стали деяким стандартом навігації для складних і заплутаних систем, таких як багатосторінковий сайт або файловий каталог. Яскравий приклад - рядок шляху в файловому менеджері Windows.
У випадку з файловим менеджером, уявлення хлібних крихт можна назвати класичним, тут вони поєднані з деревовидним вкладеним каталогом, що робить навігацію ще більш зручною і логічною.
Однак, веб-технології та особливості дизайну конкретного сайту не завжди дозволяють використовувати гібридні хлібні крихти: для реалізації такої навігації доведеться підключати JavaScript з динамічним оновленням на Ajax, що не завжди виправдано використанням серверних ресурсів. Найчастіше на сайтах зустрічаються класичні хлібні крихти:
У такому вигляді вони є просто набором статичних посилань, для реалізації досить HTML-розмітки без будь-яких бібліотек.
поліпшення юзабіліті
Будь-яка візуальна навігація створюється для користувачів. Чим вона простіше і зручніше, тим вище шанс того, що відвідувачеві сподобається сайт і він зайде на нього знову. Хлібні крихти особливо доречні на сторінках, позбавлених бокового меню: часто воно не вписується в дизайн або з якихось інших причин не передбачено в шаблоні до CMS. Наприклад, форуми. На всіх форумних CMS типу vBullentine, phpBB, і XenForo в навігації присутні хлібні крихти. До формату форуму просто не підійде інший тип навігації: неможливо собі уявити форум з боковим меню або деревовидним каталогом, в той час як хлібні крихти дозволяють переміщатися між гілками, топіки, і постами за кілька кліків. Хлібні крихти досконалі технічно і впишуться в будь-який шаблон, відвідувачеві не доведеться повертатися на вихідну сторінку каталогу, щоб відкрити одну з уже переглянутих.
Вплив на оптимізацію
Хлібні крихти вносять хороший внесок в оптимізацію багатосторінкового сайту. Подібна навігація є як і способом перелинковки сторінок для пошукача, так і зручним Структуризатори контентда для користувача. При одночасному використанні на сторінці хлібних крихт і іншого типу меню фактор дублювання посилань можна опустити.
Google і Яндекс, а також безліч дрібніших пошукових систем почали використовувати хлібні крихти прямо в пошуковій видачі. Таким чином краще оптимізуються сніппети і користувач може вибрати потрібний розділ прямо з видачі, навіть не відкриваючи сайт. Навігаційна ланцюжок у видачі є не у всіх сайтів, а її наявність привертає увагу користувачів. Сніппет в ній дозволяє користувачеві отримати уявлення про будову сайту і зрозуміти, чи відповідає він запитом.
На даний момент далеко не всі сайти мають у видачі сторінки з хлібної крихтою, навколо їх додавання наростає ажіотаж. Наявність навігаційної ланцюжка помітно підвищує відвідуваність і робить сторінку у видачі візуально привабливішим: чітка структура вселяє більше довіри і виглядає більш інформативним, ніж безладна посилання з незрозумілих символів. Google дозволив абсолютно всім сайтам додати хлібні крихти в видачу. На блозі Developers були опубліковані варіанти розмітки для створення навігації, її використання є всім без обмежень. Яндекс також опублікував інструкцію для створення хлібної крихти в довідці для веб-майстрів.
варіанти оформлення
З технічної точки зору хлібні крихти реалізуються легко. Доповнення не зажадає важких бібліотек і сотень рядків коду, якщо йде розробка з нуля, програміст зможе обійтися стандартними засобами HTML і PHP. А якщо сайт базується на CMS, знайти готовий плагін хлібних крихт не буде проблемою.
При виборі готового рішення і створенні власного слід враховувати:
Рядок з хлібними крихтами повинна візуально відрізнятися від тексту. Зазвичай її елементи оформляють як звичайні посилання, а категорії поділяють будь-яким графічним або текстовим елементом.
- Потрібно позначити, в якій ділянці користувач знаходиться в даний момент. При цьому не можна залишати посилання активної, щоб сторінка не посилалася на саму себе.
- Анкор посилання повинен бути мінімалістичним і максимально коротким, що відображає головну суть того, що розташоване за посиланням.
- Розмежовувати посилання між собою можна будь-яким елементом. Як графічним, так і текстовим. Наприклад: "/", "|", і будь-яким іншим, відповідним під дизайн.
Не рідко проектування навігаційних ланцюжків виконують за допомогою функціоналу Яндекс.Метрики, для цього підходить інструмент «Карта шляхів по сайту» - він дозволить виявити відвідувані сторінки і шлях, який проходять користувачі щоб їх знайти. Крім складання нової навігації, можна спробувати знайти помилки в старій. У цьому допоможе Вебвізор.
Як додати хлібну крихту в видачу Google, Яндекс
Гугл і Яндекс - посилання.
При належному підході до оформлення, хлібні крихти принесуть сайту суцільні плюси: збільшення відвідуваності за рахунок фрагментів у видачі, поліпшення юзабіліті, більш тривалі сесії користувачів і поліпшення індексації за рахунок якісної перелинковки.
Рейтинг статті: