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

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

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

Для чого потрібні хлібні крихти

Покращення навігації: Вони роблять переміщення по сайту інтуїтивно зрозумілим.
Зручність для користувачів: Допомагають уникнути використання кнопки "Назад" у браузері, що часто буває незручно.
Покращення SEO (пошукової оптимізації): Пошукові системи, такі як Google, також використовують "хлібні крихти" для кращого розуміння структури сайту і можуть відображати їх у результатах пошуку.
Зменшення показника відмов: Коли користувач легко орієнтується на сайті, він рідше залишає його, що позитивно впливає на поведінкові фактори.

Як створити хлібні крихти

Оскільки це навігаційний елемент, ми повинні почати з тегу <nav> .

HTML
<nav></nav>

В хлібних крихтах порядок елементів є критично важиливим, тому нам потрібно використати впорядкований список <ol> та наповнити його пунктами з посиланнями на сторінки в ланцюжку.

<nav>
  <ol>
    <li><a href="/">Головна</a></li>
    <li><a href="/section">Розділ</a></li>
    <li><a href="/section/article">Назва новини</a></li>
  </ol>
</nav>

Також розробники мають можливість використовувати мікророзмітку для забезпечення сніпетів у видачі пошукових систем. Більш детальну інформацію можна знайти на сайті Schema.org.

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

<nav aria-label="Хлібні крихти">
  <ol itemscope="" itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
      <a href="/" itemprop="item">
        <span itemprop="name">Головна</span>
      </a>
      <meta content="1" itemprop="position">
    </li>
    <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
      <a href="/section" itemprop="item">
        <span itemprop="name">Розділ</span>
      </a>
      <meta content="2" itemprop="position">
    </li>
    <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
      <a href="/section/article" itemprop="item" aria-current="page">
        <span itemprop="name">Назва новини</span>
      </a>
      <meta content="3" itemprop="position">
    </li>
  </ol>
</nav>

ol {
  list-style: none;
  display: flex;
}

li:not(:first-child):before {
  content: "/";
  padding-inline: 1ch;
}

Ймовірно, ви помітили атрибути aria-label="Хлібні крихти" та aria-current="page" - вони гарантують вірну інтерпритацію скрінрідером. Вплив цих атрибутів на SEO не доказано.