ВасьОК — Блог

Как сделать микроразметку на свой сайт — туториал

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

Какие схемы микроразметки существуют

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

  • Микроданные — это общепризнанный стандарт для HTML, который включает в себя следующие возможности: организации, персоны, географические координаты, товары, адреса, рецепты, социальные связи, ленты новостей и ссылки. Поскольку данный проект открыт для разработчиков, со временем будут появляться новые типы микроформатов.
  • Дублинское ядро (Dublin Core Metadata) — это словарь метаданных, который состоит из 18 элементов (15 стандартных и 3 специализированных), основная цель — унификация информации на страницах в сети. Основные типы метаданных (Title, Description, Creator, Language) очень хорошо известны SEO-специалистам, без понимания того, что это Dublin Core Metadata сеошники каждый день имеют с ним дело. Стандарт разрабатывался специалистами библиотечного дела и введен в активную эксплуатацию в 2005 году.
  • Data-Vocabulary — это очередной заброшенный проект от компании Google, которому не суждено было добиться ощутимых результатов. Поисковик гугл поддерживает все “изобретенные” стандарты разметки, но на сайте (вернее заглушке проекта) ссылается на проект schema.org.
  • FOAF(Friend of a Friend) — проект микроданных специально разработанный под социальные сети. Учитывая специфику, атрибуты в FOAF направлены на стандартизацию данных профиля пользователя в социальных сетях. Вот короткий пример кода данного типа микроразметки:
    Кроме 25-ти социальных атрибутов, в спецификации данного типа разметки доступны 19 обычных типов данных (title, img, depiction и другие).
  • Open Graph protocol — это вторая по популярности в сети схема микроразметки, используется в социальной сети Facebook, но в отличие от более развитого конкурента, о котором пойдет речь дальше, имеет относительно небольшой диапазон возможностей. Пример кода:
  • Schema.org — самый популярный язык микроразметки в сети. В процессе создания одновременно участвовали специалисты из таких поисковых систем, как Google, Yandex, Yahoo и Bing. В результате получился универсальный инструмент с широкими возможностями.
    Также как и остальные типы микроданных, Schema только развивается и время от времени получает в свой арсенал новые атрибуты.

Как добавить микроразметку Schema.org на свой сайт

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

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

Шаг №1: Определить, какие данные будут выделены

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

Примером может послужить данная страница контактов. Здесь можно выделить два основных типа информации: ссылки навигационного меню и контактные данные. Обращаемся к документации проекта схема.орг и переходим ко второму шагу.

Шаг №2: Пишем код микроданных для сайта

Используя данную страницу http://schema.org/LocalBusiness подбираем все интересующие атрибуты и составляем готовый код:

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

Я рекомендую использовать стандартные абзацы для полей.

Шаг №3: Валидация готового кода

При работе со стандартным HTML кодом использование валидатора желательно, но часто упускается разработчиками. С микроразметкой такой трюк не пройдет. Заходим на эту страницу: https://search.google.com/structured-data/testing-tool (это сервис проверки микроразметки от Google), проводим проверку.

После обязательно проверяем разметку и в Яндекс по этой ссылке: https://webmaster.yandex.ru/tools/microtest/. Каждый блок микроразметки должен быть цельным, а не состоять из нескольких разорванных на странице слоев. В ином случае информация будет рассматриваться поисковиком как две отдельных области, а значит, будет считана не корректно.

Шаг №:4 Вставляем готовый код на сайт

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

Или другой, все зависит от выбранной категории разметки.

Вывод

Как видите, нет ничего сложного в добавлении микроразметки на собственный сайт. Главное пользоваться валидатором и внимательно следить за отображением информации на уже готовом сайте. Если вы хотите дополнить данную статью или задать вопрос по теме, оставляйте свои комментарии ниже. Желаю удачи!