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 , обновлено 30.08.2019
Предыдущая запись Описание файла robots.txt

Комментарии

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

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

RSS-файл для Яндекс Турбо-страниц
Турбо-страницы позволяют пользователям посмотреть легкую версию сайта, которая загружается быстрее в десятки раз, а...
20.04.2018
11093
+2
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
08.04.2020
2667
+1
Список Mime
Ниже приведён список MIME-заголовков и расширений файлов.
11.07.2019
1433
+1
Описание файла robots.txt
Директивы файла robots.txt для Яндекс и Google
05.09.2018
2643
0
Чтение XML файла Яндекс Маркета в PHP
Если требуется сделать импорт или обновление товаров по XML файлу Яндекс Маркета, можно применить расширении PHP...
01.06.2018
6717
+1
Извлечение данных с помощью регулярных выражений PHP
Получение данных с помощью функций preg_match и preg_match_all.
17.03.2018
8810
+3