Микроразметка меню сайта нужна обязательно, если Вы хотите показывать структуру основных категорий меню в результатах выдачи поисковых систем. Обратите внимание, что речь идёт не о так называемых «быстрых ссылках», а именно о структуре сайта. Этот блок показывается в результатах поиска сразу после description.
В статье рассматривается два примера, отличающиеся степенью сложности, а именно: простое одноуровневое меню и сложное многоуровневое (вложенное) меню.
Для обоих случаев будут приведены образцы HTML кода с готовой микроразметкой, которые Вы можете использовать в качестве образцов для своего сайта. Обращаем Ваше внимание, что приведённые образцы не привязаны к реализации микроразметки меню Schema.org для конкретной CMS.
Микроразметка простого меню 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="/" itemprop="url">Главная</a>
<meta itemprop="name" content="Главная" />
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
<a href="/information/" itemprop="url">Информация</a>
<meta itemprop="name" content="Информация" />
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
<a href="/kontakty/" itemprop="url">Контакты</a>
<meta itemprop="name" content="Контакты" />
</li>
</ul>
</nav>Обратите внимание на тег
<nav>, в который обёрнуто всё меню. Данный тег по правилам HTML соответствует навигационным элементам страницы. Внутри находится само меню, которое представляет собой список (это наиболее логичный вариант построения меню).
Микроразметка многоуровневого меню 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="/" itemprop="url">Главная</a>
<meta itemprop="name" content="Главная" />
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
<a href="/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="/information/uchebnye-stati/" itemprop="url">Учебные статьи</a>
<meta itemprop="name" content="Учебные статьи" />
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
<a href="/information/spravochnyj-centr/" itemprop="url">Справочный центр</a>
<meta itemprop="name" content="Справочный центр" />
</li>
</ul>
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ItemList">
<a href="/kontakty/" itemprop="url">Контакты</a>
<meta itemprop="name" content="Контакты" />
</li>
</ul>
</nav>Если Вы сравните этот код с HTML простого меню то увидите следующую разницу: если пункт имеет подпункты, то все подпункты обёрнуты в
<ul>с типом объекта микроданных ItemList, внутри которого размещаются элементы с точности такой же микроразметкой, как и пункты первого уровня. Других отличий нет.
