Поиск

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

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

Турбо-страницы позволяют пользователям посмотреть легкую версию сайта, которая загружается быстрее в десятки раз, а...
20.04.2018 7135
Директивы файла robots.txt для Яндекс и Google
05.09.2018 1868
Если требуется сделать импорт или обновление товаров по XML файлу Яндекс Маркета, можно применить расширении PHP...
01.06.2018 4443
В статье представлены различные PHP расширения для чтения файлов XLS, XLSX. Описаны их плюсы и минусы, а также примеры...
25.03.2018 10962
Можно найти множество применений Яндекс Диска на своем сайте, например, хранение бекапов и отчетов, обновление прайсов,...
29.11.2017 12880
Несколько примеров как в PHP получить информацию о домене и IP-адресе.
10.04.2019 962