замовити дзвінок
+38 057 782-28-00
замовити дзвінок
Starting a new project?
отримати консультацію
Читайте наш Telegram 👈
61
1

Що таке хлібніе крихти й чому вони повинні бути на сайті? Роз'яснюємо все від початку та до кінця тим, хто тільки почав розбиратися з SEO.

Хлібні крихти (breadcrumbs) - ланцюжок, що вказує шлях користувача від Головної сторінки до поточної.

Хлібні крихти простими словами - аналог шляху в Windows:

Хлебные крошки Windows

Рис. 1 - Крихти в Windows

Як ввыглядають на сайтах:

Хлебные крошки ITForce

Рис. 2 - На сайті ITForce

Типова структура крихт:

Головна - Розділ - Підрозділ - Поточна сторінка


1. Структура хлібних крихт

Розділяють 4 види хлібних крихт.

Лінійний:

Хлебные крошки линейные

Рис. 3 – Лінійний тип структури

На малюнку 4 рівня вкладеності:

  1. Головна сторінка;
  2. Категорія товару;
  3. Підрозділ товару (обрана ТМ);
  4. Сторінка потрібного товару.

Варіант з кнопкою Назад:

Хлебные крошки Назад в цепочке

Рис. 4 – Кнопка Назад в ланцюжку

Впроваджена й лінійна структура, й кнопка Назад.

Випадаюче меню:

Хлебные крошки Выпадающее меню

Рис. 5 – Випадаюче меню

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

Динамічний:

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

Хлебные крошки динамические

Рис. 6 – Динамічні

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


2. Завдання хлібних крихт

Перша – ви завжди знаєте, в якому розділі або сторінці сайту перебуваєте. Це сприяє зростанню юзабіліті майданчика.

Друга – ланцюжок навігації показує структуру сайту (Головну сторінку, Розділи й підрозділи).

Третя – ви можете перестрибнути на будь-який інший рівень вкладеності, не натискаючи в браузері Назад (й не збільшуючи % виходів зі сторінки та показник відмов). Так вони збільшують час перебування на сайті.

Структура сайту:

Блог структура

Рис. 7 – Структура сайту ecommerce

Бонуси використання хлібних крихт з боку SEO:

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

Хлебные крошки сниппет Google

Рис. 8 – Сніпет в Google з мікророзміткою

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

Хлебные крошки сниппет Яндекс

Рис. 9 – Сніпет в Яндекс

Назва публікації береться з Title.


3. Вимоги до хлібних крихт

Перш ніж впроваджувати ланцюжок навігації, врахуйте наступне:

  • на Головній сторінці хлібних крихт бути не повинно;
  • необхідні всім сайтам з рівнем вкладеності сторінок більше 2;
  • успадковують загальну стилістику ресурсу (колір, шрифт);
  • розташовуються у верхній частині сторінки й розділяються знаком “>”. Замість нього можна прописати й будь-який інший елемент, наприклад, стрілку;
  • останній елемент навігаційного меню стилістично відрізняється від решти ланцюжка + на сторінці відсутнє посилання на саму себе;
  • відображаються й на деськтопній, й в мобільній версії сайту.

Для відображення крихт Google рекомендує скористатися структурованими даними (мікророзміткою).


4. Як хлібні крихти прописати на сайті

Для CMS WordPress.

Є багато плагінів, які вже містять в своєму функціоналі опцію включення хлібних крихт. Наприклад:

Для включення ланцюжка навігації заходите в:

  • Консоль;
  • Плагін Yoast SEO;
  • Відображення в пошуковій видачі;
  • Ланцюжки навігації;
  • Включити.

Breadcrumbs Yoast SEO

Рис. 10 – Yoast SEO

Хлебные крошки Yoast SEO

Рис. 11 – Yoast SEO

  • Вручну.

У файл functions.php додаєте функцію get_breadcrumb (). Далі в single.php прописуєте функцію:

<div class=”breadcrumb”><?php get_breadcrumb(); ?></div>

Так ви вносите крихти в усі записи сайту. Для сторінок код додається в page.php над заголовком сторінки, для рубрик – в category.php, й в header.php в кінці файлу.

Перевірити, чи правильно налаштована мікророзмітки крихт, можна в валідаторі Google. Ось що показала перевірка сайту нашої компанії:

Хлебные крошки валидатор

Рис. 12 – Перевірка в валідаторі Гугл

Bitrix.

У header.php (файл шаблону сайту) розміщуєте код виклику елемента bitrix.breadcrumb:

<?$APPLICATION->IncludeComponent(“bitrix:breadcrumb”,””, Array(
“START_FROM” => “0” – показуєте рівень вкладеності розділу, з якого потрібно починати ланцюжок;
“PATH” => “” – шлях, за яким розташовується ланцюжок. Залишається порожнім, якщо потрібно, щоб ланцюжок будувався для поточного шляху.
“SITE_ID” => “s1” – ID сайту, для якого створюється ланцюжок навігації
));
?>

Joomla.

Відображення ланцюжка активується в панелі управління в Менеджері модулів:

  • Створити;
  • Навігатор сайту;
  • Вікно налаштувань модуля;
  • Включити позицію модуля й назва головної сторінки;
  • Внести разделитель текста;
  • Зберегти.

Щоб не показувати ланцюжок на Головній, зайдіть у вкладку “Прив’язка до пунктів меню”, виберіть опцію “На всіх сторінках, крім зазначених”, та відзначте пункт меню Головної.

Також їх можна внести вручну: додайте код в header.php або в розділ functions.php.

Opencart.

Є кілька модулів для встановлення:

Враховуйте вимоги з п. 3 до створення хлібних крихт та впроваджуйте їх на сайт.


Як стати сеошником?

Дайджест оновлень алгоритмів Google (літо 2021)

Як оформити футер сайту?

Підпишіться на наші оновлення
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Ви вже підписані на нашу розсилку!

Підтвердіть свій email для завершення підписки.

Замовити
просування
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Дякуємо! Скоро з вами зв'яжеться наш менеджер.