Меню для сайта html: Меню для сайта html и css горизонтальное — 11 вариантов меню

Leave a Comment / Html / By /

SiteNavigationElement — микроразметка меню с помощью Schema.org

Главная » HTML-CSS-JQUERY

HTML-CSS-JQUERY

На чтение 3 мин Просмотров 6.2к. Опубликовано Обновлено

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

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

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

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

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

Как создать статический футер с помощью HTML и CSS