Микроразметка меню с помощью schema.org и JSON
Содержание
1. Микроразметка schema.org для простого меню с помощью SiteNavigationElement
2. Микроразметка для многоуровневого меню с помощью SiteNavigationElement
3. Пример микроразметки меню JSON
Практически все сайты содержат в своем функционале навигационное меню – его можно дополнить микроразметкой и тем самым указать поисковым системам на структуру категорий, показывать ее в выдаче. Речь идет не о быстрых ссылках, которые определяются поисковиками автоматически, а именно о структуре ресурса, которая передается посредством размеченной навигации. Благодаря данной разметке поисковые роботы будут лучше понимать, из каких разделов состоит сайт.
Меню можно условно разделить на «простые» (без вложенных подменю) и «сложные» (содержат выпадающие списки ссылок) – настройка для каждого случая будет немного отличаться – ниже будут примеры для каждого указанного случая.
Важно: ниже приведены только примеры – их можно использовать для образца, но подставляя необходимые параметры URL, name, соответствующие Вашему ресурсу.
Микроразметка schema.org для простого меню с помощью SiteNavigationElement
Сразу пример кода, который проходит валидацию и в Яндекс, и в Google:
<div itemscope="" itemtype="https://schema.org/SiteNavigationElement">
<ul itemprop="about" itemscope="" itemtype="https://schema.org/ItemList">
<li itemprop="itemListElement" itemscope ="" itemtype="https://schema.org/ItemList">
<a href="https://ics-media.ru/o-kompanii/" itemprop="url">О компании</a>
<meta itemprop="name" content="О компании" />
</li>
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ItemList">
<a href="https://ics-media.ru/uslugi/seo/" itemprop="url">SEO</a>
<meta itemprop="name" content="SEO" />
</li>
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ItemList">
<a href="https://ics-media.ru/uslugi/analitiki/" itemprop="url">Аудиты</a>
<meta itemprop="name" content="Аудиты" />
</li>
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ItemList">
<a href="https://ics-media.ru/kejsyi/" itemprop="url">Кейсы</a>
<meta itemprop="name" content="Кейсы" />
</li>
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ItemList">
<a href="https://ics-media.ru/blog/" itemprop="url">Блог</a>
<meta itemprop="name" content="Блог" />
</li>
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ItemList">
<a href="https://ics-media.ru/kontaktyi/" itemprop="url">Контакты</a>
<meta itemprop="name" content="Контакты" />
</li>
</ul>
</div>
В некоторых источниках указывается необходимость использования тега <nav> вместо <div> - так как <nav> в HTML считается специальным тегом для навигационных элементов, однако, на практике для настроенной микроразметки это не важно и в большинстве случаев на сайте меню будет именно в <div>.
В приведенном выше коде ничего сложного нет - видно, что каждая ссылка меню размечается с помощью формата «ItemList», а все меню – с помощью «SiteNavigationElement». Здесь для каждой отдельной ссылки мы указываем параметр name, который, однако, не является обязательным и может быть опущен (также, как и оформление тегами <ul><li> и форматом «ItemList») – соответственно, тогда в микроразметке останутся только URL (и, соответственно, поисковым системам будут переданы только эти параметры):
<div itemscope="" itemtype="https://schema.org/SiteNavigationElement">
<a href="https://ics-media.ru/o-kompanii/" itemprop="url">О компании</a>
<a href="https://ics-media.ru/uslugi/seo/" itemprop="url">SEO</a>
<a href="https://ics-media.ru/uslugi/analitiki/" itemprop="url">Аудиты</a>
<a href="https://ics-media.ru/kejsyi/" itemprop="url">Кейсы</a>
<a href="https://ics-media.ru/blog/" itemprop="url">Блог</a>
<a href="https://ics-media.ru/kontaktyi/" itemprop="url">Контакты</a>
</div>
Данный вариант проще реализуем, однако, передает меньше информации поисковикам, поэтому, по возможности, лучше использовать более подробную настройку.
Микроразметка для многоуровневого меню с помощью SiteNavigationElement
Также сразу приведем код:
<div itemscope="" itemtype="https://schema.org/SiteNavigationElement">
<ul itemprop="about" itemscope="" itemtype="https://schema.org/ItemList">
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ItemList">
<a href="https://ics-media.ru/o-kompanii/" itemprop="url">О компании</a>
<meta itemprop="name" content="О компании" />
</li>
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ItemList">
<a href="https://ics-media.ru/uslugi/" itemprop="url">Услуги</a>
<meta itemprop="name" content="Услуги" />
<ul itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ItemList">
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ItemList">
<a href="https://ics-media.ru/uslugi/seo/" itemprop="url">SEO</a>
<meta itemprop="name" content="SEO" />
</li>
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ItemList">
<a href="https://ics-media.ru/uslugi/seo/pozicii/" itemprop="url">По позициям</a>
<meta itemprop="name" content="По позициям" />
</li>
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ItemList">
<a href="https://ics-media.ru/uslugi/seo/trafik/" itemprop="url">По трафику</a>
<meta itemprop="name" content="По трафику" />
</li>
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ItemList">
<a href="https://ics-media.ru/uslugi/seo/redizajn/" itemprop="url">Редизайн</a>
<meta itemprop="name" content="Редизайн" />
</li>
</ul>
</li>
<li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ItemList">
<a href="https://ics-media.ru/kontaktyi/" itemprop="url">Контакты</a>
<meta itemprop="name" content="Контакты" />
</li>
</ul>
</div>
Разница в том, что в данном коде приведено отдельное подменю из основного пункта «Услуги» в виде отдельных подпунктов тегами <ul><li> все с тем же форматом «ItemList» и параметрами name, url. Других отличий нет.
Также, аналогично примеру для простого меню, можно опустить, если это необходимо, параметры name и «ItemList», тогда пример кода может быть таким:
<div itemscope="" itemtype="https://schema.org/SiteNavigationElement">
<a href="https://ics-media.ru/o-kompanii/" itemprop="url">О компании</a>
<a href="https://ics-media.ru/uslugi/" itemprop="url">Услуги</a>
<ul>
<li>
<a href="https://ics-media.ru/uslugi/seo/" itemprop="url">SEO</a>
</li>
<li>
<a href="https://ics-media.ru/uslugi/seo/pozicii/" itemprop="url">По позициям</a>
</li>
<li>
<a href="https://ics-media.ru/uslugi/seo/trafik/" itemprop="url">По трафику</a>
</li>
<li>
<a href="https://ics-media.ru/uslugi/seo/redizajn/" itemprop="url">Редизайн</a>
</li>
</ul>
<a href="https://ics-media.ru/kontaktyi/" itemprop="url">Контакты</a>
</div>
Пример микроразметки меню JSON
Разметка по формату JSON также использует schema.org, но отличается тем, что настраивается не с помощью HTML, а с помощью JavaScript, а также – настройка осуществляется для страницы в целом, а не для отдельных HTML блоков контента.
Например, микроразметку по формату schema.org «Organization» можно настроить в контенте, разметив контакты, название компании и т.д., а можно прописать с помощью JSON для всей страницы в целом, в верхней ее части. Аналогично данному примеру будет актуальным и для разметки меню по формату «SiteNavigationElement», ниже пример кода микроразметки:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SiteNavigationElement",
"name": [
"О компании",
"Услуги",
"SEO",
"Аудиты",
"Кейсы",
"Блог",
"Контакты"
],
"url": [
"https://ics-media.ru/o-kompanii/",
"https://ics-media.ru/uslugi/",
"https://ics-media.ru/uslugi/seo/",
"https://ics-media.ru/uslugi/analitiki/",
"https://ics-media.ru/kejsyi/",
"https://ics-media.ru/blog/",
"https://ics-media.ru/kontaktyi/"
]
}
</script>
Как видно, в данном варианте также указываются параметры name и url. Для вложенных страниц и пунктов можно указывать все элементы по порядку вложенности, чтобы поисковым системам было проще понять структуру.
Аналогично предыдущим примерам, параметр name не является обязательным, тогда код может принять вид:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SiteNavigationElement",
"url": [
"https://ics-media.ru/o-kompanii/",
"https://ics-media.ru/uslugi/",
"https://ics-media.ru/uslugi/seo/",
"https://ics-media.ru/uslugi/analitiki/",
"https://ics-media.ru/kejsyi/",
"https://ics-media.ru/blog/",
"https://ics-media.ru/kontaktyi/"
]
}
</script>
Об авторе: Валерий Рыков В интернет-маркетинге с 2014 года |
Другие статьи в данном разделе:
