Микроразметка Open Graph: определение и настройки

Студия Maksi

27.05.2019

1775 просмотров

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

Кнопки «Поделиться»

Специальные кнопки, такие как «Мне нравится», «Поделиться», «Share» или «Like», позволяющие распространять контент в любимых соцмедиа полезны для обеих сторон. Пользователям не нужно копипастить адресную строку понравившейся странички для размещения ее, а владельцам сайтов это позволяет увеличить трафик и распространить необходимую информацию.

Чаще всего подобные кнопки можно увидеть в блогах. Принимая решения о размещении, в первую очередь, необходимо поставить себя на место пользователя. Большинство подписчиков или просто посетителей сайта сделают репост интересной и полезной статьи, нежели каталога товаров. Хотя некоторые товары также заслуживают внимания – многие пользователи популярной социальной сети Pinterest сохраняют понравившиеся рецепты или мастер классы с яркими фотографиями, чтобы поделиться с подписчиками или сохранить себе на будущее.

Веб-разработчику необходимо знать, как правильно настроить Open Graph, ведь простая установка кнопки «Поделиться» не всегда может отображаться корректно. Поэтому интересный контент и красивое превью не будет замечен другими пользователями.

Проблемы с репостами в социальных платформах

Одним из самых часто встречаемых сбоев при репосте ссылки на соцплатформы – это отображении в превью не того графического контента. Например, пост в соцсети будет иллюстрирован не тем изображением, а картинкой рекламы, которая тоже была размещена на сайте. Подобные неполадки можно исправить без каких-либо сложных манипуляций, просто установив дополнительные мегатеги Open Graph.

Протокол Open Graph от Facebook

Open Graph способствует интеграции между Facebook и другими веб-сайтами, позволяя им превращаться в богатые «графические» объекты с той же функциональностью, что и другие объекты Facebook. Проще говоря, возможен некоторый контроль над тем, как информация перемещается со стороннего веб-сайта на социальную сеть, когда страницей делятся или ставят «нравится», настраивая картинку в превью, а также корректную информацию.

Для чего необходим Open Graph

Посетители увидят правильный текст и картинку, настроенные веб-разработчиком.
Сниппет оформлен в виде поста, который можно репостнуть в соцмедиа, а не в виде ссылки, требующей дополнительного дескрипшена и изображения.
Установленное превью имеет более привлекательный вид, что позитивно влияет на поведенческие факторы, и улучшает показатели CTR.

Open Graph поддерживается практически всеми популярными соцсетями и мессенджерами.

Рассмотрим, как оптимизировать Open Graph.

Основные метатеги Open Graph

Протокол Open Graph включает в себя метатеги, основные из них:

og:title – название контента;
og:description – описание контента, не требует обязательного заполнения;
og:image – ссылка на изображение, необходимое для иллюстрации контента;
og:type – тип добавляемого контента, например, «article» – статья, «movie» – кино и т.д.;
og:url – ссылка на саму страничку, которая опубликуется в социальной платформе.

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

Пример применения Open Graph

Проиллюстрировать практическое применение Open Graph с помощью следующей статьи.

Дополнительно можно установить специальное изображение для социальных платформ, например для блога Twitter, добавив следующие теги:

Сервисы и плагины, сопряженные с Open Graph

Open Graph может работать со многими сервисами – программным обеспечением для разработки кода для определенной странички, плагины CMS, сервисы для проверки.

Как разработать код Open Graph автоматически?

При создании кодов в автоматическом режиме поможет генератор мегатегов Open Graph. Для этого необходимо заполнить все ячейки электронной формы необходимой информацией и сделать копирование полученного кода.

Просмотреть страницу конкурирующих сайтов на наличие микроразметки можно с помощью сервиса парсер мегатегов Open Graph.

Если самостоятельная работа над микроразметкой сайта владельца не прельщает, можно воспользоваться специальными плагинами:

Как проверить микро-разметку Open Graph?

Мониторить работу Open Graph можно с помощью специального сервиса, разработка которого принадлежит Фейсбуку. Он позволяет разработчикам видеть, как превью будет выглядеть в социальных платформах, а также корректировать их внешний вид с помощью редакции мегатегов.

Проверить основные параметры разметки, а также основные характеристики сайта, такие как посещаемость, юзабилити, контент определенной страницы можно с помощью сервиса «Анализ контента».