Оглавление

В микроразметке 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://www.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, укажут поисковым роботам, что у каждой секции есть заголовок. Небольшая и не очень важная структуризация, но лишней точно не будет. Роботы будут счастливы.

Микроразметка подвала

В подвале обычно пишут название сайта, годы работы, контакты и иногда размещают некоторые ссылки (карта сайта, соглашения, политики конфиденциальности и т. д.). Пропишем разметку для подвала — 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:post@plitremont.ru">email@example.com</a>
        </li>
    </ul>
</address>