Микроразметка меню с помощью SiteNavigationElement

SiteNavigationElement HTML-CSS-JQUERY

Рано или поздно каждый начинающий вебмастер начинает задумываться, как бы еще оптимизировать сайт со стороны SEO. Одним из таких способов является внедрение семантической разметки для улучшения видимости сайта в результатах поиска. В этот раз мы написали не большую статью на тему как внедрить микроразметку для меню сайта с помощью SiteNavigationElement. Данная сущность указывает поисковому роботу, что это меню используемое для навигации на сайте, тем самым поисковая система может вывести его в сниппете результата выдачи сайта в ПС.

И так, приступим. Стандартно код горизонтального меню на сайте выглядит следующим образом:

<nav>
  <ul>
    <li><a href="/item-1/">Item-1</a></li>
    <li><a href="/item-1/">Item-2</a></li>
    <li><a href="/item-1/">Item-3</a></li>
    <li><a href="/item-1/">Item-4</a></li>
  </ul>
</nav>

Давайте к нему применим разметку Schema.org. В итоге вот, что получится:

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<meta itemprop="name" content="Навигационное Меню">
  <ul>
    <li>
    	<a itemprop="url" href="/item-1/">
    		<span itemprop="name">Item-1</span>
    	</a>
    </li>
    <li>
    	<a itemprop="url" href="/item-2/">
    		<span itemprop="name">Item-2</span>
    	</a>
    </li>
    <li>
    	<a itemprop="url" href="/item-3/">
    		<span itemprop="name">Item-3</span>
    	</a>
    </li>
    <li>
    	<a itemprop="url" href="/item-4/">
    		<span itemprop="name">Item-4</span>
    	</a>
    </li>
  </ul>
</nav>

Теперь проверим валидность данного кода с разметкой Schema.org в webmaster.yandex.ru, раздел «Инструменты — Валидатор» или в search.google.com во вкладке «Проверка структурированных данных».

Микроразметка меню с помощью SiteNavigationElement

Валидатор Яндекс Вебмастера показал все без ошибок.

Микроразметка меню с помощью SiteNavigationElement

Валидатор Google Search Console также написал, что нет ошибок и предупреждений.

Чуть позже напишу как внедрить разметку «SiteNavigationElement» в меню на сайте с CMS WordPress.

Код меню с микроразметкой получился раздутым, нужна ли она на сайте, решать вам))

Оцените статью
Блог веб-студии
Добавить комментарий

  1. Кирилл

    Словарь schema.org огромнейший, поэтому с помощью JSON-LD также можно разметить отдельные элементы сайта: меню, хлебные крошки и многое другое. Полный список всех типов «@type» для разметки на официальном сайте.

    Ответить
    1. blstory автор

      С JSON-LD не все так просто у Яндекса. Данные размеченные с помощью JSON-LD отображаются только в сервисе Яндекс.Почта, в поисковой выдаче они не буду видны. Google отлично понимает разметку в синтаксисе JSON-LD и выводит ее в результатах поиска.

      Ответить
  2. Светлана

    Микроразметка schema.org внедряется в тело HTML страницы при помощи специальных атрибутов: itemscope, itemtype, itemprop и др.

    Ответить