21 октября 2017

Создаём микроразметку Schema.org для сайта

Немного теории для страждующих

Микроразметка состоит из словаря и синтаксиса.

Словарь — это набор необходимых сущностей, классов и свойств, с помощью которых описывается сайт. Фактически, это язык, на котором мы будем общаться с роботом. Популярные словари — Open Graph, Schema.org и микроформаты. В конкретно этой статье мы познакомимся со Schema.org, а Open Graph таки заслуживает отдельной статьи.

Статистика распространённости словарей микроразметки в Рунете по данным Яндекса

Синтаксис — это способ применения словаря, т.е. каким образом мы его будем использовать в разметке.

Мы условились, что в данной статье говорим про Schema.org, что не означает, что использовать нужно только её и больше ничего — хорошим решением считаю использование Schema + Open Graph.

Итак, словарь Schema.org появился в 2011 году по инициативе поисковых систем и поддерживается основными игроками этого сегмента — Google, Яндекс, Bing и Yahoo!

Словарь этот очень большой, постоянно развивающийся — сотни различных классов для описания, пожалуй, почти всего, что можно описать на сайте. Во всяком случае, для скромных потребностей блоггеров и новостных порталов более чем достаточно. И для кулинарных сайтов, да (об этом чуть ниже).

У Схемы есть такая штука как Сущность (Thing), которая состоит из множества подтипов, описывающих контент на странице. Вот несколько типов для примера:

Person — тип для описания человека — реально существующего, жившего давно или вообще вымышленного. Just for lulz, разработчики добавили возможность пометить персону как Undead (во славу Нер-Зула, не иначе как). С его помощью можно описать имя, фамилию, возраст, дату рождения и смерти, пол, контактные данные, информацию о работе и кучу другой информации, которую робот поймёт.
Product — тип для описания продуктов (но не помидоров-огурцов), которые можно продать/купить. Также к ним относятся некоторые услуги. Покупка билетов, одежда, аренда или услуга парикмахера — это всё сюда.
Event — тип для проводимых мероприятий. Можно указать самые важные параметры — место, время, кто будет участвовать и сколько участников будет — ваши посетители не ошибутся.
Organization — разметка для организаций. Всё необходимое для этого — адреса, время работы, контактные данные — в наличии.

Для примера привел всего 4 типа, но по факту их больше. Со всеми можно ознакомиться на официальном сайте http://schema.org/docs/schemas.html

Итак, с помощью микроразметок мы можем рассказать роботу, что у нас есть (не хочется использовать словосочетание пометить сайт).

Приступим, сохранившись.

Создаём микроразметку для статьи

Начнём с самого простого, часто встречающегося и самого распространённого — обычной такой статьи. Не знаю, отчего так получилось, но зачастую статью про микроразметку сайта приводят на примере кулинарного сайта — на примере рецепта. В целом, понятно, почему — ~~копипаст всегда легче~~ на примере рецепта можно охватить много разных классов и показать, какая микроразметка всеобъемлющая.

Но мы пойдём другим путём и сделаем микроразметку для обычной статьи. Давайте сначала посмотрим на код:

<section>
    <h1>Что нам стоить дом построить?</h1>
    <time>20 октября 2017</time>
    <img src=”image.jpg” alt=”Что нам стоить дом построить”>
    <article>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </article>
    <div>Автор: Иван Пупкин</div>
</section>

Вот такая незамысловатая конструкция для статьи, которая содержит понятную для человека информацию:

Заголовок
Время публикации
Иллюстрацию к статье
Саму статью
Автора статьи

Но вот робот скорее всего растеряется. Давайте поможем ему разобраться в нашем коде. А чтобы проверять правильность наших действий, мы будем использовать инструмент проверки валидности микроразметки от Google. Есть возможность дать ссылку или просто скопировать фрагмент кода обработчику. Давайте для чистоты эксперимента загрузим наш код.

Ничего не обнаружено — видите, робот в этом ничего не поймёт. Начинаем использовать магию. Сначала покажем, что это у нас статья — сделаем наш открывающий тег section следующего вида:

<section itemscope itemtype="http://schema.org/Article">

Теперь валидатор Google уже видит начало разметки, но ругается на ошибки. Суть их в том, что он уже понимает, что это статья, но не видит других атрибутов и требует их указать. Давайте разберём, что он хочет и что там должно быть:

author — это поле, которое требует указания автора статьи.
datePublished — дата публикации статьи. Здесь нужно остановиться подробнее — для человека понятной датой будет запись типа “20 октября 2017 в 19:40”, но поисковым роботам необходима запись времени в формате стандарта ISO 8601 — выглядит это вот так: 2017-10-20T14:40:38+00:00.
headline — заголовок статьи.
image — иллюстрация для статьи. И здесь тоже необходимо остановиться — тут нужно не только отметить, что именно это изображение и есть иллюстрация, но и ссылку на изображение, а также размеры в пикселах.
publisher — здесь указывается название сайта, который опубликовал данную статью, а также несколько параметров публикатора. Его рассмотрим подробнее ниже.

Есть ещё два необязательных параметра, которые можно не указывать:

dateModified — дата изменения страницы.
mainEntityOfPage — указываем ссылку на страницу.

Итак, приступим. Сначала размечаем название статьи. Изменяем код следующим образом:

<h1 itemprop="headline">Что нам стоить дом построить?</h1>

Примерно таким же образом размечаем время:

<time itemprop="datePublished" datetime="2017-10-20T14:40:38+00:00">20 октября 2017</time>

Заметьте, у тега time добавляем атрибут datetime, в котором указываем время в формате ISO 8601. С помощью PHP это сделать просто:

<?php echo date("c"); ?>

Пользующиеся WordPress да используют такой код:

<time itemprop="datePublished" datetime="<?php the_time('c'); ?>"><?php the_time('j F Y в G:i'); ?></time>

Теперь разберемся с изображением. С ним немного сложнее — для изображения указываем ссылку на изображение и размеры. Код будет выглядеть следующим образом:

<div itemscope itemprop="image" itemtype="http://schema.org/ImageObject">
    <img itemprop="url contentUrl" src=”image.jpg” alt=”Что нам стоить дом построить”>
    <meta itemprop="url" content="image.jpg">
    <meta itemprop="width" content="968">
    <meta itemprop="height" content="504">
</div>

Как видите, мы поместили изображение в контейнер div, в который поместилось само изображение и метатеги с необходимыми параметрами.

Здесь хочу сделать небольшое замечание — если мы не используем изображение, которое находится в интернете, то валидатор Google будет ругаться на недопустимый URL. Поэтому, если вы работаете с сайтом на локальном сервере, то не обращайте внимания на это сообщение. Как только ваш код окажется в интернете, то ошибка пропадёт.

Теперь добавляем в микроразметку автора:

<div>Автор: <span itemprop="author">Иван Пупкин</span></div>

Здесь также замечу, что имя автора мы выделяем с помощью тега span (он для этого идеален) и в него добавляем атрибут itemprop=»author».

Теперь сделаем разметку текста — в тег article добавляем атрибут:

<article itemprop="articleBody">

И мы наконец добрались до информации о Публикаторе статьи. Он достаточно многоэтажный и давайте для начала рассмотрим получившийся код:

<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
        <img itemprop="url image" src="logo.png" style="display:none;"/>
        <meta itemprop="width" content="64">
        <meta itemprop="height" content="64">
    </div>
    <meta itemprop="name" content="Название сайта">
    <meta itemprop="telephone" content="+7 800 700 60 50">
    <meta itemprop="address" content="Москва, ул. Ленина, д. 10">	
</div>

Как видите, publisher — это то же самое, что и организация. Для неё мы указываем следующие параметры:

logo — логотип организации, который размечаем также как и изображение-иллюстрацию для статьи — размечаем изображение и его размеры.
Name, telephone и address — простые для понимания параметры. Указываем нужные параметры (в своём примере я взял их из головы).

Один важный момент — зачастую блоги делаются не для СМИ, а для человека и таких данных, как у организации, у него может и не быть. Можно встретить рекомендацию о замене Organization на Person, но в таком случае валидатор Google засчитает ошибку. Всё дело в том, что Google приемлет только Organization в качестве publisher’a. Есть только два выхода — игнорировать или подстраиваться под параметры Organization, что на мой взгляд не является верным решением.

В целом, мы указали все необходимые параметры для статьи. Можем попробовать заморочиться и добавить необязательные теги:

<meta itemprop="dateModified" content="2017-10-20T16:40:38+00:00"/>
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="mysite.com"/>

В итоге у нас получился вот такой длинный код:

<section itemscope itemtype="http://schema.org/Article">
    <h1 itemprop="headline">Что нам стоить дом построить?</h1>
    <time itemprop="datePublished" datetime="2017-10-20T14:40:38+00:00">20 октября 2017</time>
    <div itemscope itemprop="image" itemtype="http://schema.org/ImageObject">
        <img itemprop="url contentUrl" src=”image.jpg” alt=”Что нам стоить дом построить”>
        <meta itemprop="url" content="image.jpg">
        <meta itemprop="width" content="968">
        <meta itemprop="height" content="504">
    </div>
    <article itemprop="articleBody">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </article>
    <div>Автор: <span itemprop="author">Иван Пупкин</span></div>
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="url image" src="logo.png" style="display:none;" />
            <meta itemprop="width" content="64">
            <meta itemprop="height" content="64">
        </div>
        <meta itemprop="name" content="Название сайта">
        <meta itemprop="telephone" content="+7 800 700 60 50">
        <meta itemprop="address" content="Москва, ул. Ленина, д. 10">
    </div>
    <meta itemprop="dateModified" content="2017-10-20T16:40:38+00:00" />
    <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="mysite.com/how-much-bilding-house" />
</section>

Обновляем код в валидаторе и запускаем проверку.

Как видим, валидатор нам показал одну ошибку, про которую уже говорили — он просто не может найти нужное изображение по ссылке. Поставьте ссылку на реально существующую картинку в интернете — и ошибка исчезнет.

Вот так мы сделали микроразметку статьи для нашего сайта. Но это для одиночной статьи — если на данной странице список статей, то мы заменим первую строчку на следующую:

<section itemscope itemtype="http://schema.org/BlogPosting" itemprop="BlogPost">

На этом микроразметка страницы завершена. В целом, проведённая работа по внедрению микроразметки уже вполне неплоха для оптимизации сайта, но не совсем достаточна.

В конце замечу, что если некоторые теги для вашего сайта не предусмотрены в дизайне, то их можно скрыть с помощью CSS — люди их не увидят, а робот увидит.

Поэтому, продолжим дальше.

Создаём микроразметку заголовка сайта

Итак, микроразметка для заголовка сайта создаётся примерно также, как для страниц, но имеет меньшее количество настроек. Фактически она описывает информацию о сайте. Давайте посмотрим на минимальный код для микроразметки — он весьма небольшой:

<header itemscope itemtype="http://schema.org/WPHeader">
    <meta itemprop="headline" content="Название сайта">
    <meta itemprop="description" content="Описание сайта">
</header>

Мы видим, что тип микроразметки называется WPHeader — это расшифровывается не как WordPress, а как Web Page — не давайте ввести себя в заблуждение.

Запускаем проверку на валидность — всё работает. Самое главное, что все параметры передаются с помощью метатегов и нет необходимости скрывать появляющиеся элементы.

Да, настроек она требует мало, но можно конечно запилить ещё одну строчку, например, добавим ключевые слова:

<header itemscope itemtype="http://schema.org/WPHeader">
    <meta itemprop="headline" content="Название сайта">
    <meta itemprop="description" content="Описание сайта">
    <meta itemprop="keywords" content="асфальт, москва, недорого, доставка">
</header>

Всё, что можно добавить в микроразметку заголовка, можно посмотреть здесь: http://schema.org/WPHeader.

Как видите, добавлять их очень просто. Микроразметка для заголовка сайта готова.

Наша работа почти готова — остался последний важный элемент.

Создаём микроразметку для меню сайта

Меню сайта тоже требует микроразметки. Хотя бы для того, чтобы поисковый робот понимал, из каких разделов состоит сайт. Это действительно нужный элемент, которым пренебрегать не стоит (правда, если меню у вас есть).

Итак, в микроразметке мы уже немного разбираемся. Поэтому прочь теорию, вот код для меню:

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
    <a itemprop="url" href="mysite.com/news/">Новости</a>
    <a itemprop="url" href="mysite.com/articles/">Статьи</a>
    <a itemprop="url" href="mysite.com/contact/">Контакты</a>
</nav>

Тут тоже всё просто — помечаем контейнер с пунктами меню (nav — это каноничный вариант) типом SiteNavigationElement, а во все тэги <a> прописываем атрибут url. Проверяем код в валидаторе — всё отлично, робот видит навигационное меню и список с ссылками на разделы сайта.

Микроразметка меню готова.

Следующие типы микроразметки я считаю не очень обязательными, но тем не менее их также можно использовать. Рассмотрим и их.

Микроразметка для Нижнего колонтитула сайта (подвал, footer)

Нижний колонтитул — он же подвал сайта, он же футер/footer — тот самый элемент внизу сайта, где обычно ещё раз пишут название сайта, копирайты, контакты и прочую информацию.

По своей структуре микроразметка очень похожа на микроразметку заголовков:

<footer itemtype="http://schema.org/WPFooter">
    <div>MySite.com<span itemprop="copyrightYear">2017</span>. Все права защищены</div>
</footer>

В данном примере мы пометили только год (в основном, это текущий год), поскольку в большинстве блогов и сайтов новостей в нижнем колонтитуле можно встретить только его.

Если на Вашем сайте такого вообще не предусмотрено, но такую строчку с годом хочется — её можно невозбранно поместить в заголовок. Если же у Вас колонтитул имеет множество элементов, характерных для организации — адреса, логотипы, контакты и т.п. — можно применить разметку с помощью типа Organization, который мы рассматривали выше (см. publisher).

Как и всегда, все возможные значения можно посмотреть здесь: http://schema.org/WPFooter.

Кстати, если у вас есть что-то, связанное с адресами, то можно добавить вот такую разметку:

<address itemscope itemtype="http://schema.org/PostalAddress">
    <div itemprop="name">название сайта</div>
    <div><span itemprop="postalCode">110575</span>,<span itemprop="addressLocality">Россия, Москва</span>,<span itemprop="streetAddress">ул. Ленина</span></div>
    <div itemprop="telephone">8-212-85-06</div>
    <div itemprop="email">admin@mysite.com</div>
</address>

Она отлично подойдёт в footer (но это не обязательно).

Микроразметка сайдбара для сайта

Микроразметку для сайдбара (боковой колонки сайта) я поместил последней в том числе и потому, что на мой взгляд она не очень обязательна. Что у нас обычно бывает в сайдбаре? Популярные статьи, последние комментарии, виджеты социальных сетей, реклама и какой-нибудь опрос — вот первое, что приходит в голову. Собственно, мы можем разметить все эти типы элементов, но проще всего — обозначить их в виде логических блоков. Приведём такой пример:

<aside itemscope itemtype="http://schema.org/WPSideBar">
    <section>
        <h3 itemprop="name">Группа ВКонтакте</h3>
        <!-- код виджета -->
    </section>
    <section>
        <h3 itemprop="name">Страница Facebook</h3>
        <!-- код виджета -->
    </section>
    <section>
        <h3 itemprop="name">Мой опрос</h3>
        <!-- код опроса -->
    </section>
</aside>

Мы показали роботу — вот у нас тут виджеты социальных сетей и опрос.

А теперь немного о рекламе — для неё существует отдельный тип WPAdBlock. Но в целом, он очень похож на другие разметки, поэтому просто приведу простой код для примера:

<div itemscope itemtype="http://schema.org/WPSideBar">
    <div itemprop="name">Покупайте наших слонов!</div>
    <div itemprop="description">Наши слоны самые слонистые слоны на свете</div>
    <div itemprop="producer" itemscope itemtype="https://schema.org/Organization">
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <img itemprop="url image" src="logo.png" style="display:none;"/>
            <meta itemprop="width" content="64">
            <meta itemprop="height" content="64">
        </div>
        <meta itemprop="name" content="Карбарас Лимитед">
        <meta itemprop="telephone" content="+7 800 700 60 50">
        <meta itemprop="address" content="Бердичев, Нская улица>	
    </div>
</div>

Тут для наглядности работы микроразметки я привёл код чуть больше, чем обычно. Здесь для робота мы указали, что данный блок — это реклама, а с помощью знакомых уже нам элементов мы разметили элементы рекламы.

На этом всё, что я хотел рассказать про микроразметку Schema.org. Урок получился достаточно объёмный, но зато теперь мы можем подружить наш сайт с поисковыми роботами, а это очень и очень полезно.

В заключении хочется отметить, что микроразметка никаким образом не влияет на ранжирование сайта в поисковой выдаче — чем популярнее сайт, тем он выше. Но правильно составленная микроразметка сделает Ваш сайт заметным в поиске, а следовательно, и количество переходов, что поднимает сайт в поисковой выдаче.

Анатолий Куликов

Автор блога, веб-разработчик