замовити дзвінок
+38 057 782-28-00
замовити дзвінок
Starting a new project?
отримати консультацію
Читайте наш Telegram 👈
22
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

Керівництво по вилученню даних Screaming Frog за допомогою XPath і Regex

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

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

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

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

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