Breadcrumbs: що це таке і як їх упровадити

Що таке breadcrumbs?

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

Способи впровадження breadcrumbs

Щодо впровадження ми наразі маємо два варіанти: видимий для користувачів і кодовий. Насправді обидва завжди слід упроваджувати разом, а не окремо.

Видимий

У видимому варіанті вебсайт впроваджує breadcrumbs угорі кожної сторінки, щоб користувач, який відвідує сторінку, точно знав, де він перебуває. Наприклад, якщо ми переглядаємо сторінку товару ecommerce-сайту (комп'ютер HP Envy), у breadcrumbs ми побачимо таке:

Home > Computers > HP > Envy Так ми кажемо користувачу, що товар, який він переглядає, належить до категорії computers і також до сімейства комп'ютерів HP. У плані навігації ця функція дуже важлива, бо якщо користувач захоче побачити більше моделей HP або продовжити переглядати комп'ютери, це буде на відстані одного кліку.

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

Код

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

Нижче ви можете побачити приклад впровадження breadcrumbs з фрагментом скрипта JSON-LD.

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Books", "item": "https://example.com/books" },{ "@type": "ListItem", "position": 2, "name": "Authors", "item": "https://example.com/books/authors" },{ "@type": "ListItem", "position": 3, "name": "Ann Leckie", "item": "https://example.com/books/authors/annleckie" },{ "@type": "ListItem", "position": 4, "name": "Ancillary Justice", "item": "https://example.com/books/authors/ancillaryjustice" }] } </script> Наведений код повідомляє нам, що книгу «Ancillary Justice» написала авторка Ann Leckie і це книга.

Books > Authors > Ann Leckie > Ancillary Justice

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

• ›Rank Math
• ›Yoast SEO

Валідація впровадження

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

Утім у нас є інструмент Google і розширення Chrome, які значно полегшать життя.

Google Structured Data Tool:

За допомогою інструмента Google ми можемо валідувати наші структуровані дані або через URL, або на рівні коду, якщо безпосередньо введемо фрагмент.

Інструмент Google Structured Data

Якщо введемо URL, Google поверне аналіз з усіма виявленими структурованими даними.

Приклад аналізу URL в інструменті структурованих даних Google.

Якщо ж ми хочемо спочатку протестувати JSON-LD-код Breadcrumb перед упровадженням, можемо скористатися інструментом «code fragment», який дасть нам такий результат:

Інструмент валідації фрагментів коду для структурованих даних.

Structured Data Testing Tool (розширення Google Chrome)

Якщо замість того, щоб відкривати інструмент Google, ми хочемо валідувати структуровані дані Breadcrumb (та інші) безпосередньо з браузера, можемо використати розширення «Structured Data Testing Tool», яке покаже всі виявлені структуровані дані, а також будь-які помилки.

Розширення Chrome для валідації Structured Data на прикладі статті SEO Alive.

Моніторинг breadcrumbs у Google Search Console

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

Візуалізація звіту breadcrumbs у Search Console (запущено у вересні 2019).

На завершення хотілося б запитати: які найпоширеніші помилки траплялися вам під час їх упровадження?

Хочемо зібрати колекцію і опублікувати в цій статті, аби допомогти іншим SEO-фахівцям.

Дуже дякуємо і не забудьте поділитися коментарями!

Джерела

• ›Документація Google про Breadcrumbs