«Хлебные крошки» или «навигационная цепочка» – это список ссылок, которые показывают вложенность страницы на сайте. HTML-разметка обычно следующая:
<div class="breadcrumb">
<a href="https://example.com/">Главная</a>
<a href="https://example.com/category">Категория</a>
<a href="https://example.com/category/article/">Статья</a>
</div>Для стандартизации и понимании поисковыми системами введена разметка Shema.org «BreadcrumbList» и «ListItem».
Приведенный выше пример в микроразметке выглядит следующим образом:
<div class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<span itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a href="https://example.com/" itemprop="item">
Главная
<meta itemprop="name" content="Главная">
</a>
<meta itemprop="position" content="1">
</span>
<span itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a href="https://example.com/category/" itemprop="item">
Категория
<meta itemprop="name" content="Категория">
</a>
<meta itemprop="position" content="2">
</span>
<span itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a href="https://example.com/category/article/" itemprop="item">
Статья
<meta itemprop="name" content="Статья">
</a>
<meta itemprop="position" content="3">
</span>
</div>Если в последний крошки ссылка не нужна:
<span itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
Статья
<meta itemprop="name" content="Статья">
<link itemprop="item" href="https://example.com/category/article/">
<meta itemprop="position" content="3">
</span>Кстати, семантически правильнее использовать нумерованные списки <ol> <li>.
<ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a href="https://example.com/" itemprop="item">
<span itemprop="name">Главная</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a href="https://example.com/category/" itemprop="item">
<span itemprop="name">Категория</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a href="https://example.com/category/article/" itemprop="item">
<span itemprop="name">Статья</span>
</a>
<meta itemprop="position" content="3" />
</li>
</ol>
