Микроформаты в верстке сайтов

Эта статья адресована тем, кто еще не знает, что такое микроразметка и как правильно ее использовать в верстке сайта. Мы рассмотрим общие принципы микроразметки и остановимся подробней на одном из ее видов – микроформатах.

Что такое микроформаты?

Микроформаты – это один из популярных типов семантической микроразметки сайтов. Новичков сайтостроения и начинающих оптимизаторов не устроит такое объяснение, поскольку сразу возникает вопрос — что же такое микроразметка? Чтобы страница сайта была максимально понятна не только людям, но и роботам, используют специальные пометки, незаметные для людей, но понятные для машин. Это и есть микроразметка.

Семантическая разметка состоит из словаря и синтаксиса. Словарь – это набор терминов, с помощью которых описывается контент страницы. А синтаксис – это способ описания. Микроформаты объединяют в себе функции и словаря, и синтаксиса.

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

Приведем другие популярные словари:

• schema.org – удачная попытка сделать единый словарь, понятный всем поисковым системам;
• Open Graph – разработка Facebook, сейчас активно используется всеми социальными сетями;
• Data Vocabulary – словарь, придуманный Google, но уже устаревший из-за появления schema.org ;
• Dublin Core – появился как словарь, предназначенный для библиотек;
• Good Relations – используется для электронной коммерции;
• FOAF – социальный словарь для взаимодействия людей.

Помимо синтаксиса microformats.org наиболее популярными являются Microdata (микроданные) и RDFa. Микроданные чаще всего используются со словарем schema.org, а RDFa с Open Graph.

Зачем нужны микроформаты?

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

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

• Используя информацию, полученную с помощью микроразметки, поисковики смогут сделать красивый и информативный сниппет. Это, в свою очередь, улучшает показатель CTR (кликабельности).
• Повышается релевантность выдачи запросу пользователя, что тоже повышает CTR.
• Информация заносится в базу поисковой системы и может быть использована в различных сервисах.
• В глазах поисковиков улучшается структурированность информации на сайте, что они очень любят.

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

Как использовать микроформаты?

Сейчас существует десяток спецификаций микроформатов в разных областях знаний. Каждый микроформат обладает своими свойствами. Наиболее популярный и важный – это микроформат hcard. На его примере посмотрим, как использовать микроформаты на практике.

Микроформат hCard

Этот микроформат предназначен для разметки контактной информации. Его можно использовать как для описания компаний, так и для отдельных персон. hСard имеет следующие свойства:

• n — структурированное представление имени;
• fn – имя в виде строки;
• bday — дата рождения;
• org — наименование организации;
• geo — географическая широта и долгота;
• tz — часовой пояс;
• uid — уникальный идентификатор;
• photo — фотография или рисунок;
• adr — адрес;
• tel – телефон;
• url – адрес сайта;
• email.

Приведем пример использования.

Страничка без разметки.

Та же страница с микроформатом hСard.

Сначала нужно объявить, какой микроформат используется. hCard обозначается как класс ”vcard”. Значения свойств (имя, компания, телефон, сайт) заключаются в соответствующий тег. Здесь это тег <div>. Ему присваивается атрибут class с именем свойства. Эти свойства могут быть вложенными в другие.

Другие микроформаты

Приведем некоторые другие популярные микроформаты, которые поддерживаются поисковыми системами:

• hProduct — карточка товаров;
• hCalendar — события;
• hAtom — ленты новостей;
• hRecipe — кулинарные рецепты.

Всего существует несколько десятков вариантов, и периодически возникают новые.

Особенности применения

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

После внесение разметки на страницы сайта нужно обязательно проверить наличие ошибок соответствующими сервисами.

Валидатор микроразметки Яндекс

https://webmaster.yandex.ru/tools/microtest/

Проверка структурированных данных Google

https://search.google.com/structured-data/testing-tool

Средства проверки разметки Bing

https://www.bing.com/toolbox/markup-validator

Микроформаты можно и нужно использовать и в CMS – в WordPress, в Joomla и других. Прописывать их можно вручную или с помощью специальных плагинов. При использовании сторонних шаблонов, нужно сначала проверить их в валидаторе. Часто в шаблонах уже присутствует микроразметка, иногда с ошибками.