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

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

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

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

Також варто зауважити, що використовувати хлібні крихти необхідно на кожній сторінці сайту (крім головної) в одному і тому ж місці.

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

Мікророзмітка здійснюється за допомогою додавання спеціальних HTML-тегів, які повідомляють пошуковим роботам до якого типу контенту відноситься елемент. У цій статті, для використання хлібних крихт, будемо використовувати формат мікророзмітки Microdata. Всі доступні властивості перераховані на офіційному вебсайті у відповідному розділі: https://schema.org/BreadcrumbList.

Для створення рядка навігації необхідно використовувати контейнер BreadcrumbList як мінімум з двома елементами ListItems. Хлібні крихти бажано розміщувати у тегах списку OL або UL, але можна використовувати й інші варіанти.

Для того, щоб позначити для пошукових систем використання хлібних крихт, необхідно до тегу списку додати атрибути itemscope та itemtype. Itemscope потрібен тільки для того, щоб показати пошуковій системі, що на сторінці описується певний об’єкт. Itemtype завжди йде поряд з itemscope і потрібен для того, щоб показати тип об’єкта. Визначення в якості параметра до itemtype значення http://schema.org/BreadcrumbList елементу UL або OL говорить про те, що елемент відноситься до хлібних крихт і складається з ланцюжка пов’язаних вебсторінок.
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
Далі нам необхідно відобразити у кожному елементі навігації списку li відповідні атрибути:
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://mysite.com">
<span itemprop="name">Головна</span>
</a>
<meta itemprop="position" content="1" />
</li>
Елемент Itemprop - описує властивості обраного об’єкта. Використання в якості параметру Itemprop значення itemListElement" та https://schema.org/ListItem для itemtype означає, що елемент відносить до окремого пункту списку.

Використання значення item для itemprop викликано у зв’язку з використанням посилання.

Параметр name для itemprop використовується для позначення назви хлібної крихти.

В кінці блоку добавляємо тип position для параметру itemprop та в параметрі content вказуємо номер позиції елементу в навігаційному ланцюжку.

Для останнього елементу рекомендовано не використовувати посилання, тому в розмітці, замість тегу посилання a, необхідно використовувати span із значенням http://schema.org/Thing для параметру itemtype, який характеризує найбільш загальний тип, а також використовувати itemid:
<span itemprop="item" itemscope itemtype="http://schema.org/Thing" itemid="http://mysite.com/page">
<span itemprop="name">Поточна сторінка</span>
</span>
Глобальний атрибут itemid надає мікродані в формі унікального глобального ідентифікатора елемента, в якості значення якого використовується URL. Атрибут itemid може бути зазначений тільки для елемента, який має обидва атрибута itemscope і itemtype.

А зараз перейдемо до практичної реалізації. Якщо адміністратор вебсайту використовує популярні CMS системи, встановити модуль хлібних крихт дуже просто. Однак, якщо на вашому вебсайті не модульна система, встановити крихти можна дуже легко, скориставшись класом для роботи з хлібними крихтами:
class Breadcrumb
{
private static $items = array();

public static function add($url, $name) {
self::$items[] = array($url, $name);
}

public static function out() {
$result = '
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="'.(isset($_SERVER['HTTPS']) ? "https" : "http").'://'.$_SERVER['HTTP_HOST'].'/">
<span itemprop="name">Головна</span>
</a>
<meta itemprop="position" content="1" />
</li>';
foreach (self::$items as $key => $row) {
// Останній елемент
if ($key + 1 == count(self::$items)) {
$result .= '
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="item" itemscope itemtype="http://schema.org/Thing" itemid="'.(isset($_SERVER['HTTPS']) ? "https" : "http").'://'.$_SERVER['HTTP_HOST'].'/'.$row[0].'">
<span itemprop="name">'.$row[1].'</span>
</span>
<meta itemprop="position" content="'.($key + 2).'" />
</li>';
} else {
$result .= '
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="'.(isset($_SERVER['HTTPS']) ? "https" : "http").'://'.$_SERVER['HTTP_HOST'].'/'.$row[0].'">
<span itemprop="name">'.$row[1].'</span>
</a>
<meta itemprop="position" content="'.($key + 2).'" />
</li>';
}
}
$result .= '
</ol>';
return $result;
}
}
На кожній сторінці, де необхідно відобразити хлібні крихти, додаємо наступні рядки коду:
Breadcrumb::add('pagelink', 'Назва');
Breadcrumb::add('pagelink', 'Назва');
echo Breadcrumb::out();
Також слід пам’ятати, після установки Хлібних крихт, обов’язково необхідно перевірити їхню розмітку у сервісі: Інструмент тестування структурованих даних.

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