Хлебные крошки (Breadcrumbs)
Хлебные крошки рекомендуется оформлять как список.
<ol class="breadcrumbs">
<li>
<a href="https://know-online.com/">Главная</a>
</li>
<li>
<a href="https://know-online.com/category">Раздел</a>
</li>
<li>
<a href="https://know-online.com/category/tech">Техника</a>
</li>
</ol>
Дальше остаётся их оформить в CSS.
Название «Хлебные крошки» является отсылкой к сказке «Гензель и Гретель» братьев Гримм, где дети оставляли хлебные крошки в лесу, чтобы по ним вернуться домой.
Микроразметка
Для хлебных крошек можно сделать микроразметку, чтобы оформить их в поисковых системах.
Код микроразметки для хлебных крошек выглядит следующим образом:
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://know-online.com/arts"><span itemprop="name">Arts</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://know-online.com/arts/books"><span itemprop="name">Books</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://know-online.com/arts/books/poetry"><span itemprop="name">Poetry</span></a>
<meta itemprop="position" content="3" />
</li>
</ol>
Доступность (WAI-ARIA)
Также рекомендуется указывать атрибуты aria
, которые предназначены для людей с физическими ограничениями, которые открывают сайт через специальные приложения.
<div aria-label="Страницы">
<ol class="breadcrumbs">
<li>
<a href="https://know-online.com/">Главная</a>
</li>
<li>
<a href="https://know-online.com/category">Раздел</a>
</li>
<li>
<a href="https://know-online.com/category/tech" aria-current="page">Техника</a>
</li>
</ol>
</div>
Скринридер прочитает данную ссылку как «Страницы. Главная, раздел, техника текущая страница».
Поддержать автора
Все статьи создаются и поддерживаются одним человеком,
если вам нравится контент, вы можете поддержать автора сайта