онлайн курсы и видеоуроки

8 (962) 211-56-75

1C@ArtemVM.iNFO

Любое расписание учебных занятий

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

30 11.2019

Development Есть видео

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

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

Код проверен валидатором структурированных данных Google и валидатором микроразметки Яндекс.


Смотрите видео после статьи
видео может дополнять статью или содержать её полностью

Микроразметка меню сайта нужна обязательно, если Вы хотите показывать структуру основных категорий меню в результатах выдачи поисковых систем. Обратите внимание, что речь идёт не о так называемых «быстрых ссылках», а именно о структуре сайта. Этот блок показывается в результатах поиска сразу после 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, как впрочем и любой другой. Посмотрите, какие элементы разметки за что отвечают.

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

Уникальная метка публикации: B45816FB-D5E3-92E5-9B1D-A0CB9DF7BC3B
Источник: //artemvm.info/information/uchebnye-stati/development/mikrorazmetka-schema-org-prostogo-i-mnogourovnevogo-menyu/

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

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

Авторы публикации

Разработка сайтов

подробнее

Вам требуется обучение?

По вопросам записи на онлайн курсы и приобретения учебных видеокурсов свяжитесь с нами удобным способом:
8 (962) 211-56-75 (Россия)
8 (962) 211-56-92 (Россия)
1c@artemvm.info


Ваш комментарий к публикации

Присоединяйтесь к обсуждению! Оставьте свой комментарий к данной публикации. Ваш комментарий будет опубликован на сайте после проверки модератором.

Поиск по сайту
1С:Бухгалтерия 8.3
240 уроков, 42 часа

Новые статьи

Учёт расходов на оплату труда иностранного гражданина

10 апреля

Бухгалтерия

Учёт расходов на оплату труда иностранного гражданина

  • Опубликовано 10 апреля 2021 г.
  • Категория: Бухгалтерия
  • Прочитали 30 человек
  • Нет комментариев
Быстрый поиск на сайте и в результатах поиска Яндекс и Google

11 09.2020

Интернет

Быстрый поиск на сайте и в результатах поиска Яндекс и Google

  • Опубликовано 11 сентября 2020 г.
  • Категория: Интернет
  • Прочитали 93 человека
  • Нет комментариев
Ваша корзина
пока пуста
0
нет товаров
в избранном
0
нет товаров
для сравнения
0
Не сейчас