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

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

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

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

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

Впервые они были разработаны в 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 и других. Прописывать их можно вручную или с помощью специальных плагинов. При использовании сторонних шаблонов, нужно сначала проверить их в валидаторе. Часто в шаблонах уже присутствует микроразметка, иногда с ошибками.

Добавьте комментарий