Веб-Острова Анатолия Куликова

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

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

В этом небольшом и продолжительном уроке мы создадим микроразметку для сайта.

А что же это такое? Микроразметка — это специальный способ с помощью атрибутов и тегов пометить для поисковых роботов (в первую очередь) что собственно на этой странице есть.

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

Но вот какая штука — компьютерный интеллект всё это ещё не совсем понимает, хотя и старается. И вообще — когда поисковый робот заходит на сайт, он не видит всей этой красоты из параллаксов и svg-анимаций, а видит код, с которым и работает.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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