Shema.org хлебные крошки

«Хлебные крошки» или «навигационная цепочка» – это список ссылок, которые показывают вложенность страницы на сайте. 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>
HTML

Для стандартизации и понимании поисковыми системами введена разметка 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>
HTML

Если в последний крошки ссылка не нужна:

<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>
HTML

Кстати, семантически правильнее использовать нумерованные списки <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>
HTML

Для проверки есть валидаторы: Яндекс и Google.

09.08.2019, обновлено 16.12.2020
Предыдущая запись Описание файла robots.txt

Комментарии

, чтобы добавить комментарий.

Другие публикации

Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
9899
+2
В последнее время вопрос переезда сайта с HTTP на HTTPS перешел из рекомендаций в необходимость, как со стороны поисковиков, так и браузеров.
1489
+1
Турбо-страницы позволяют пользователям посмотреть легкую версию сайта, которая загружается быстрее в десятки раз, а...
13869
+3
Директивы файла robots.txt для Яндекс и Google
3319
0
Ниже приведён список MIME-заголовков и расширений файлов.
3234
+2
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
12123
+5