Що таке хлібні крихти на сайті та як їх використовувати в SEO

Хлібні крихти / BreadCrumbs стали важливим інструментом навігації, який допомагає користувачам легко орієнтуватися на вашому сайті. Проте, окрім зручності для відвідувачів, хлібні крихти також мають вплив на SEO. У цій статті ми розглянемо, що таке хлібні крихти, як правильно їх налаштувати та чому вони можуть стати вашим секретним інструментом для покращення видимості сайту в пошуковиках.

Хлібні крихти (BreadCrumbs): що це

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

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

Навіщо потрібні хлібні крихти на сайті

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

‍

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

Головна > Чоловіче взуття > Кросівки > Конкретний товар

Види хлібних крихт

Якщо ви хочете, щоб сайт з вашими товарами чи послугами був максимально зручним для користувачів, хлібні крихти – це важлива деталь. Давайте розглянемо основні види breadcrumbs, щоб визначитися, який підходить конкретно вашому ресурсу.
‍

1. Хлібні крихти на основі ієрархії

‍

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

‍

Навігаційний шлях до публікації блогу на основі ієрархії:

Головна > Блог > Категорія > Назва статті

Навігаційний шлях до продукту на основі ієрархії:

Головна > Екіпірування > Авто > Чохли на сидіння

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

‍

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

2. Хлібні крихти на основі атрибутів

‍

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

Головна > Категорія товару > Стать > Розмір > Колір

Вказують на найбільш популярні атрибути, за якими клієнти здійснюють вибір:

Головна > Взуття > Для походів > Жіноче > 7,5 > Чорний

Корисна порада: Ніколи не дублюйте хлібні крихти на основі ієрархії з хлібними крихтами на основі атрибутів. Якщо ви виявили проблему дублювання, рекомендуємо продовжувати свою SEO-стратегію, використовуючи хлібні крихти лише на основі ієрархії.

Бабенко Оксана

SEO-спеціалістка в Promodo

3. Хлібні крихти засновані на історії відвідування

‍

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

Це корисно, якщо вам важливо відстежувати дії користувача на сайті та його шлях покупки.

Назад > Головна > Жінки > Спорядження для тенісу > Ракетки 

Функціональність такої навігації обмежена, а функціональність як і в кнопки «назад» у браузері користувача.

4. Хлібні крихти на основі шляху

‍

Хлібні крихти на основі історії показують, що користувач робив на вашому сайті. Цей тип навігації копіює панель історії Інтернету:

Головна > Попередня сторінка > Попередня сторінка > Поточна сторінка

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

Переваги використання Breadcrumbs для SEO

Хлібні крихти та SEO

Хоча показник відмов не є прямим фактором ранжирування, правильне використання хлібних крихт допоможе поліпшити взаємодію з користувачем.

‍

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

Розширена навігація сайту

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

‍

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

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

Покращена взаємодія з користувачем

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

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

Бабенко Оксана

SEO-спеціалістка в Promodo

Ідеально підходить для SEO в рейтингу Google

З 2018 року хлібні крихти є невіддільною частиною сторінки результатів Google, SERP. Google використовує їх, щоб: 

‍

• просканувати сайт; 
• отримати розширені результати;
• дізнатися більше про структуру сайту;
• зрозуміти, класифікувати та контекстуалізувати вміст сайту;
• показати шлях користувача до певної сторінки в результатах пошуку Google. 

‍

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

Нижчий показник відмов

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

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

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

Вищий рейтинг переходів у результатах пошуку

Хлібні крихти в SEO також стосуються підвищення рейтингу кліків у результатах пошуку. Хоча вони з’являються в результатах пошуку Google, найкраще використовувати розширені сторінки, які є більш привабливими і які отримують найбільше кліків.

‍

Google відобразить хлібні крихти для користувача, що клікне на розширену сторінку, якщо ви використаєте схему навігації у коді вашої сторінки таким чином: 

‍

{

"@context": "http://schema.org",

"@type": "Список навігації",

"itemListElement": [

{"@type": "Елемент списку", "позиція": 1, "item": {"@id": "https://example.com/home", "name": "Додому"}},

{"@type": "Елемент списку", "позиція": 2, "item": {"@id": "https://example.com/category", "name": "Категорія"}}

]

}

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

Бабенко Оксана

SEO-спеціалістка в Promodo

Як додати хлібні крихти на сайт

Є кілька способів додати хлібні крихти на сайт, щоб при цьому зменшити кількість повторів і виглядати більш природно. Все залежить від системи управління контентом (CMS), яку ви використовуєте. Існують також ручні способи додавання навігаційних крихт до вашого коду. 

‍

Важливо також зробити так, щоб навігаційні стежки з’явилися в рейтингу пошукових систем. Для цього ми пропонуємо впровадити структуровані дані відповідно до Документації розробника Google. 

Інтеграція Breadcrumbs з WordPress

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

‍

Як альтернативу ми пропонуємо використовувати різні плагіни, такі як Breadcrumb NavXT.  Плагін генерує хлібні крихти та дозволяє індивідуально їх налаштувати. Також можна скористатися Yoast SEO або WooCommerce Breadcrumb плагінами, які дозволять змінити стиль вбудованих хлібних крихт.

1. Натисніть «Плагіни». 
2. Додайте «Новий».
3. Виберіть потрібний плагін, наприклад Yoast SEO.
4. Установіть його.
5. Активуйте.
6. Скопіюйте код у розділ файлу header.php вашої теми:

‍

<?php

if ( function_exists('yoast_breadcrumb') ) {

yoast_breadcrumb( '

','

');

}

?>

‍

7. Перейдіть у розділ «Зовнішній вигляд».
8. Виберіть редактор файлів теми
9.  Вставте код у розділ «header.php».
10.  Оновіть файл. 

Додайте хлібні крихти за допомогою JSON-LD

Додавання хлібних крихт за допомогою JSON-LD (JavaScript Object Notation for Linked Data) допомагає пошуковим системам зрозуміти структуру сайту. Ось як ви можете це зробити:

‍

1. ‍Сценарій JSON-LD: Додайте сценарій JSON-LD у розділ вашого HTML або безпосередньо перед тегом, що закриває.
2. ‍JSON-LD для навігаційних шляхів:

‍

{

  "@context": "https://schema.org",

  "@type": "Список навігації",

  "itemListElement": [

    {

      "@type": "Елемент списку",

      "позиція": 1,

      "name": "Дім",

      "item": "https://www.example.com/"

    },

    {

      "@type": "Елемент списку",

      "позиція": 2,

      "name": "Категорія",

      "item": "https://www.example.com/category"

    },

    {

      "@type": "Елемент списку",

      "позиція": 3,

      "name": "Підкатегорія",

      "item": "https://www.example.com/category/subcategory"

    },

    {

      "@type": "Елемент списку",

      "позиція": 4,

      "name": "Поточна сторінка",

      "item": "https://www.example.com/category/subcategory/current-page"

    }

  ]

}

‍

Пояснення: 

‍

• @контекст: визначає контекст, який завжди https://schema.org для розмітки схеми.
• @type: вказує тип структури даних, у цьому випадку BreadcrumbList.
• itemListElement: містить масив об’єктів ListItem.
• @type: кожен елемент має тип ListItem.
• посада: позиція навігаційної крихти в списку.
• ім'я: ім'я навігації (видимий користувачам текст).
• пункт: URL навігації.

Інтеграція:

• Додайте сценарій JSON-LD на кожну сторінку, де застосовні хлібні крихти;
• Переконайтеся, що URL-адреси (значення елементів) правильні та відповідають фактичним URL-адресам сторінок;
• Скористайтеся інструментом тестування структурованих даних Google або тестом Rich Results, щоб перевірити свою розмітку JSON-LD і переконатися, що вона правильно реалізована.

‍

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

Налаштування рішень для різних CMS

Встановлення хлібних крихт на вашому сайті в основному залежатиме від:

‍

• Типу; 
• Структури;
• CMS;
• Типу самих Breadcrumbs. 

‍

Кожна CMS має свій унікальний спосіб обробки тем і шаблонів. Дотримуючись загального підходу до встановлення модулів/плагінів навігації та динамічного вставлення сценаріїв JSON-LD, ви можете налаштувати навігацію для будь-якої системи керування вмістом (CMS). 

‍

• Завжди перевіряйте вихідні дані JSON-LD за допомогою Google's Rich Results Test.
• Налаштування навігаційних шляхів за допомогою JSON-LD для різних систем керування вмістом передбачає інтеграцію сценарію JSON-LD у шаблони або плагіни кожної CMS.
• Процес встановлення залежатиме від складності вашої CMS і від того, чи знадобиться вам додаткове налаштування. 

Вивчайте дії користувачів, щоб удосконалити хлібні крихти

1. Використовуйте інструменти веб-аналітики:

• Налаштуйте та відстежуйте ключові показники SEO за допомогою Google Analytics
• Перейдіть до «Звіти» > «Взаємодія» > «Цільові сторінки», щоб побачити, як користувачі переміщуються вашим сайтом
• Перевірте показники виходу на сторінках, де навігаційні сухарі використовуються для визначення точок висадки
• Налаштуйте події для відстеження кліків навігації та цілей, щоб виміряти їхній вплив на шлях користувача.

2. ‍Теплові карти та записи сесій

• Серед інших можливих інструментів використовуйте Microsoft Clarity, Hotjar, Crazy Egg або Mouseflow
• Визначте, де користувачі натискають на сторінці та наскільки далеко вони прокручуються.
• Перегляньте записи сеансів користувачів, щоб побачити, як вони взаємодіють із сухарями.

3. ‍A/B тестування

• Використовуйте такі інструменти, як Google Optimize, Optimizely, або VWO
• Тестуйте A/B кілька дизайнів навігаційних шляхів, місць розташування та тексту, щоб побачити, який ефективніший
• Експериментуйте з кількома змінами одночасно, щоб визначити найефективнішу комбінацію.

4. Отримайте відгуки від клієнтів:

• Проводьте опитування на сторінці за допомогою таких інструментів, як Qualaroo або SurveyMonkey.
• Запитайте користувачів, чи вони знайшли панірувальні сухарі корисними.
• Збирайте пропозиції щодо покращення.
• Проведіть тести на зручність використання, щоб отримати прямий відгук про навігацію.

5. Проаналізуйте внутрішні дані пошуку:

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

6. ‍Вивчіть звіти про послідовності: 

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

7. Проаналізуйте поведінку користувачів на мобільних пристроях у порівнянні з настільними (desktop) пристроями.

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

8. Відстежуйте навігаційні патерни користувачів.

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

9. ‍Оптимізуйте структуру навігації.

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

10. ‍Впроваджуйте та відстежуйте зміни. Після аналізу даних і внесення змін постійно відстежуйте їхній вплив. Використовуйте однакові інструменти та методи, щоб покращення були ефективними та стійкими.

Часті помилки при використанні BreadCrumbs на сайті

Якщо ви налаштовуєте хлібні крихти на сайті, є кілька ключових моментів, про які слід пам'ятати, аби уникнути поширених помилок. Тому що деякі невеликі, на перший погляд, недоліки можуть призвести до великих проблем із SEO та погіршать досвід користувачів. Розглянемо основні помилки.

Уникайте надмірної оптимізації

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

‍

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

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

Забезпечте сумісність з усіма браузерами та пристроями

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

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

Зробіть хлібні крихти простими та легкими для розуміння

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

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

Додаткові поради:

• Уникайте дублювання: Не повторюйте ієрархічні хлібні крихти з атрибутивними. Це може призвести до проблем із SEO та поганої індексації.
• Стежте за оновленням сайту: Якщо ви змінюєте структуру сайту, переконайтеся, що хлібні крихти також оновлюються відповідно до нових шляхів навігації.

Висновки

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

‍

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

ТАКОЖ НА ЦЮ ТЕМУ:

• Відгуки клієнтів: як отримувати та опрацьовувати
• Конверсія: що це таке та як її збільшити
• Стратегія pop up: як збільшити конверсію та покращити взаємодію з користувачами
• CR, ROAS, LTV: розуміння KPI в eCommerce
• Google Merchant Center: гайд інструментом з оновленнями 2024 року