Навігація по типу «хлібні крихти»

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

 

Що таке хлібні крихти

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


Приклад «хлібних крихт» на сайті інтернет-магазину

 

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

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

 

Мета використання хлібних крихт

1. Зручність для користувачів

 

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


Приклад інтернет-магазину без бокового меню каталогу товарів

 

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

 

2. Користь для SEO

 

«Хлібні крихти» дають позитивний ефект для пошукового просування сайту, беручи участь в перелінковйі сторінок. Може виникнути цілком логічне запитання щодо дублюючих посилань в основному меню і в рядку навігації. Адже, як відомо, пошуковики не дарують дублювання, в даному випадку - посилань і анкорів, які ведуть на одну сторінку. Як бути в такій ситуації? Думки щодо дублювання і приховання анкорів наскрізних посилань меню розділяються у різних SEO-фахівців: хтось говорить про закриття посилань меню (для неврахування анкорів Яндексом), а хтось каже, що робити цього не варто. Пошукові роботи добре вміють відрізняти навігацію як елемент юзабіліті сайту і застосовують до таких посиланнях інші правила щодо звичайних внутрішніх посилань. На жаль, бувають ситуації із заплутаною структурою сайту, де пошуковий робвід помиляється у визначенні навігації. У цьому випадку варто виключити зайві анкори, уклавши меню. Але це лише приватна практика і робити це для всіх сайтів не рекомендується.

Друга корисна властивість «хлібних крихт» для SEO - допомога в оптимізації сніпетів. Пошукова система (на даний момент тільки Google!) Використовує їх для відображення навігаційної ланцюжка, що робить сниппет більш привабливим і дає користувачеві уявлення про структуру сайту.

 

Приклад сниппета з використанням мікророзмітки в «хлібних крихтах»

 

Щоб домогтися цього, необхідно використовувати мікророзмітки (будь-які з доступних форматів). Приклади реалізації коду представлені у відповідній довідці Google для вебмайстрів. Якщо «хлібні крихти» не оптимізовані даними чином, то ланцюжок навігації в сніппеті виглядає не інформативно (використовуються URL сторінок).


Приклад сниіпета без використання мікророзмітки в «хлібних крихтах»

 

Про принцип формування навігаційних ланцюжків для сніпетів в Яндексі можна дізнатися з його довідки.

 

Оформлення «хлібних крихт»

 

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

Приклад оформлення «хлібних крихт»

 

«Хлібні крихти» повинні мати анкор, які називають конкретний розділ або сторінку сайту і не заспамленності ключовими словами; допустимо - "пластикові вікна Rehau", не допустимо - «пластикові вікна Rehau в Москві недорого»;

Для розмежування гіперпосилань в ланцюжку навігації використовуються спеціальні знаки: тире, символ «більше ніж» (>), що закривають лапки ("), рідше - символ слеша (/);

«Хлібні крихти» можна уявити не тільки в класичному вигляді, але і органічно вписати їх в дизайн сайту за допомогою каскадних таблиць стилів (CSS).


Дизайн «хлібних крихт» на сайті інтернет-гіпермаркету Walmart


Висновки

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