Микроразметка Schema.org простого и многоуровневого меню

Микроразметка меню сайта нужна обязательно, если Вы хотите показывать структуру основных категорий меню в результатах выдачи поисковых систем. Обратите внимание, что речь идёт не о так называемых «быстрых ссылках», а именно о структуре сайта. Этот блок показывается в результатах поиска сразу после description.

Для реализации микроразметки меню Вы можете воспользоваться Schema.org, поскольку это простой и удобный способ указать поисковым системам на структуру меню Вашего сайта. Сейчас мы рассмотрим два примера, отличающиеся степенью сложности, а именно: простое одноуровневое меню и сложное многоуровневое (вложенное) меню.

Для обоих случаев будут приведены образцы HTML кода с готовой микроразметкой, которые Вы можете использовать в качестве образцов для своего сайта. Обращаем Ваше внимание, что приведённые образцы не привязаны к реализации микроразметки меню Schema.org для конкретной CMS.

Заказать реализацию микроразметки для Вашего сайта можно в студии WebMouse. Стоимость зависит от особенностей сайта.

Микроразметка простого меню Schema.org

С разметкой одноуровневого меню проблем обычно не возникает ни у кого. Исключение, пожалуй, составляют неопытные вебмастера, которые ранее не применяли данный вид микроразметки. Если у Вас мало опыта, то приведённый ниже пример HTML кода Вам пригодится в качестве примера.

<nav itemscope="" itemtype="http://schema.org/SiteNavigationElement">
	<ul itemprop="about" itemscope="" itemtype="http://schema.org/ItemList">
		<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
			<a href="https://artemvm.info/" itemprop="url">Главная</a>
			<meta itemprop="name" content="Главная" />
		</li>
		
		<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
			<a href="https://artemvm.info/information/" itemprop="url">Информация</a>
			<meta itemprop="name" content="Информация" />
		</li>
		
		<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
			<a href="https://artemvm.info/kontakty/" itemprop="url">Контакты</a>
			<meta itemprop="name" content="Контакты" />
		</li>
	</ul>
</nav>

Обратите внимание на тег <nav>, в который обёрнуто всё меню. Данный тег по правилам HTML соответствует навигационным элементам страницы. Внутри находится само меню, которое представляет собой список (это наиболее логичный вариант построения меню).

Важно: примеры кода приводятся именно для иллюстрации правильного образца микроразметки меню и не предназначены в качестве примеров HTML вёрстки.

В зависимости от структуры конкретного сайта, состав тегов в коде меню будет разным. В приведённом примере пришлось дополнительно задействовать мета-тег для указания имени пункта. Это особенность нашего сайта, с которого и взят пример. У Вас может быть по-другому.

Скопируйте наш пример микроразметки простого меню и вставьте в онлайн-валидатор Яндекс или Google для проверки.

Микроразметка многоуровневого меню Schema.org

Если с простым одноуровневым меню проблем обычно не возникает, то вот микроразметка многоуровневого меню с двумя или более уровнями вложенности в большинстве случаев вызывает значительные трудности. В интернете практически нет примеров готовой микроразметки для сложного меню, поэтому мы решили привести образец кода.

<nav itemscope="" itemtype="http://schema.org/SiteNavigationElement">
	<ul itemprop="about" itemscope="" itemtype="http://schema.org/ItemList">
		<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
			<a href="https://artemvm.info/" itemprop="url">Главная</a>
			<meta itemprop="name" content="Главная" />
		</li>
		
		<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
			<a href="https://artemvm.info/information/" itemprop="url">Информация</a>
			<meta itemprop="name" content="Информация" />
			
			<ul itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
				<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
					<a href="https://artemvm.info/information/uchebnye-stati/" itemprop="url">Учебные статьи</a>
					<meta itemprop="name" content="Учебные статьи" />
				</li>
				
				<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
					<a href="https://artemvm.info/information/spravochnyj-centr/" itemprop="url">Справочный центр</a>
					<meta itemprop="name" content="Справочный центр" />
				</li>
			</ul>
		</li>
		
		<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
			<a href="https://artemvm.info/kontakty/" itemprop="url">Контакты</a>
			<meta itemprop="name" content="Контакты" />
		</li>
	</ul>
</nav>

Что интересно, могут быть разные реализации, отличающиеся различным использованием микроразметки. Показанный здесь код представляет собой рабочий пример, взятый с сайта ArtemVM.iNFO, мы только сократили его для лучшего восприятия.

Если Вы сравните этот код с HTML простого меню то увидите следующую разницу: если пункт имеет подпункты, то все подпункты обёрнуты в <ul> с типом объекта микроданных ItemList, внутри которого размещаются элементы с точности такой же микроразметкой, как и пункты первого уровня. Других отличий нет.

Проверьте приведённый пример валидатором и внимательно посмотрите что покажут результаты проверки. Это необходимо для понимания принципа работы микроразметки Schema.org, как впрочем и любой другой. Посмотрите, какие элементы разметки за что отвечают.

Если у Вас есть свой рабочий метод реализации микроразметки многоуровневого меню, поделитесь им в комментариях после статьи.