Создаём микроразметку сайта
Процесс создания и описания микроразметки schema.org для сайта.
Оглавление
- Микроразметка body
- Микроразметка header
- Микроразметка nav
- Микроразметка контента
- Микроразметка сайдбара
- Микроразметка подвала
В микроразметке schema.org можно структурировать не только данные, но и элементы верстки, например «Хлебные крошки», для которых создан собственный объект — schema.org/BreadcrumbList. В структуре разметки, «Крошки» являются самодостаточной частью, которая выполняет свою функцию. В разметке сайтов есть такие части как
- Тело страницы
- Шапка
- Меню
- Контент
- Сайдбар
- Футер
Как правило, этих базовых элементов хватает, чтобы сделать разметку практически любого сайта. В микроразметке schema.org есть объекты и для этих блоков. Для того, чтобы сайт был более приветлив к поисковикам, необходимо задать базовую микроразметку schema.org для этих элементов в том числе. Давайте это и сделаем!
Микроразметка body
К тегу <body>
добавим тип разметки WebPage. Которое укажет поисковым роботам, что это тело веб-страницы.
<body itemscope itemtype="https://schema.org/WebPage">
Микроразметка header
Следующий пункт — тег HTML5 <header>
, другими словами шапка сайта. Кстати, всю разметку сайта мы будем описывать именно в тегах HTML5.
<header itemscope itemtype="https://schema.org/WPHeader">
Тип разметки — WPHeader не имеет никакого отношения к Wordpress. Расшифровывается как Web Page Header — не путайте.
Микроразметка nav
На многих сайтах должно быть навигационное меню, иначе пользователю будет крайне сложно перемещаться по страницам сайта. Исключение составляют разве что лендинги. Но даже на лендингах для перемещения между секциями, иногда делают меню. Для меню предусмотрен тип разметки — SiteNavigationElement.
<nav itemscope itemtype="https://schema.org/SiteNavigationElement">
<ul class="menu">
<li itemprop="name">
<a itemprop="url" href="#">Item</a>
</li>
<li itemprop="name">
<a itemprop="url" href="#">Item</a>
</li>
</ul>
</nav>
В отличии от предыдущих объектов, в навигации применяются свойства name
и url
для атрибута itemprop
.
Микроразметка контента
С микроразметкой контента не все так очевидно. Есть несколько подводных камней, к тому же, не всегда контент является статьей. Иногда это просто блоки с информацией, иногда простое изображение. Про микроразметку для статей мы поговорим в следующих статьях на данную тему.
Микроразметка сайдбара
Сайдбар присутствует не на всех сайтах. Его можно так же структурировать в разметке сайта, для этого есть специальный тип — WPSideBar.
Поисковые роботы увидят секции внутри сайдбара, а свойства name
для атрибута itemprop
, укажут поисковым роботам, что у каждой секции есть заголовок. Небольшая и не очень важная структуризация, но лишней точно не будет. Роботы будут счастливы.
<aside itemscope itemtype="https://schema.org/WPSideBar">
</aside>
Микроразметка подвала
В подвале обычно пишут название сайта, годы работы, контакты и иногда размещают некоторые ссылки (карта сайта, соглашения, политики конфиденциальности и т. д.). Пропишем разметку для подвала — WPFooter (опять же, WP не имеет ничего общего с Wordpress).
<footer itemscope itemtype="https://schema.org/WPFooter">
<div> sitename.com <span itemprop="copyrightYear">2019</span>. Все права защищены </div>
</footer>
Для атрибута itemprop
укажем свойство copyrightYear
, оно указывает на год, в котором были установлены авторские права. Если указать в значении 2010-2019, то валидатор Яндекса выдаст ошибку.
При желании, в подвале можно указать разметку для некоторых реквизитов компании:
<address>
<ul itemscope itemtype="http://schema.org/PostalAddress">
<li>
<span itemprop="postalCode">123456</span>,
<span itemprop="addressCountry">Россия</span>,
<span itemprop="addressLocality">Москва</span>,
<span itemprop="streetAddress">Московская ул., 777 корпус 1, строение 1</span>
</li>
<li itemprop="telephone">
<a href="tel:+74950000000">8 (495) 000-00-00</a>
</li>
<li itemprop="email">
<a href="mailto:email@example.com">email@example.com</a>
</li>
</ul>
</address>
itemprop="postalCode"
— Почтовый код.itemprop="addressCountry"
— Страна.itemprop="addressLocality"
— Местность или город.itemprop="streetAddress"
— Улица, дом, корпус, строение.itemprop="telephone"
— Номер телефона.itemprop="email"
— Email адрес.
Время запросов: 0,1173 s
Количество запросов: 28
Источник: cache