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 127
Предыдущая запись Описание файла robots.txt
Следующая запись Разметка блога Shema.org

Поделится

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

Турбо-страницы позволяют пользователям посмотреть легкую версию сайта, которая загружается быстрее в десятки раз, а...
Можно найти множество применений Яндекс Диска на своем сайте, например, хранение бекапов и отчетов, обновление прайсов,...
Директивы файла robots.txt для Яндекс и Google
Сборник советов как поднять оценку в PageSpeed Insights.
Ниже приведён список MIME-заголовков и расширений файлов. В PHP скриптах, перед отправкой файлов в браузер,...
Сделать галерею которая заполнит все пространство фотографиями разного размера можно с помощью jQuery плагина...