25043 24
How-to Читать 8 минут

Как настроить разметку Open Graph

Как настроить разметку Open Graph на сайте
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — МИКРОРАЗМЕТКА
Инструкцию одобрил
Head of SEO в Ольшанский и Партнеры
Разметка Open Graph нужна для привлекательного отображения анонса любой информации с вашего сайта в соцсети и других сервисах. Чтобы этот небольшой сниппет принял лицеприятный вид — используйте Open Graph для страниц, где есть кнопки соцсетей.

Что такое Open Graph

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

Изначально протокол была создан Facebook и предназначался только для этой социальной сети, однако сейчас микроразметка подходит и для ряда других соцсетей и мессенджеров:

  • ВКонтакте;
  • Twitter;
  • LinkedIn;
  • Telegram;
  • Viber и пр.
Микроразметка Open Graph добавляется на страницу в виде кода html, размещаемого в пределах элемента <head>.

Синтаксис разметки

Ознакомиться с подробной документацией по протоколу Open Graph можно на английском и русском языках. С более сжатой информацией по основным тегам можно ознакомиться в справке Яндекс.Вебмастера.

Если вас интересует внедрение разметки для конкретной соцсети, воспользуйтесь соответствующими руководствами:

Далее рассмотрим основные теги Open Graph.

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

Для правильного отображения достаточно использовать стандартные Open Graph теги:

  • og:title — заголовок статьи, видео или другого объекта со страницы вашего сайта;
  • og:description — описание объекта, может быть в пределах 300 символов;
  • og:image — URL изображения, описывающего статью, видео и т.д.;
  • og:type — тип объекта (новость, видео, статья, музыка и т.д.);
  • og:url — постоянная ссылка, которая будет идентифицировать объект.

Они располагаются в метатеге meta property. В редакторе это выглядит так:
Open Graph tags в редакторе
Теги Open Graph
После обновления и сохранения информации делаем попытку поделиться статьей в Facebook. И вот что получается:
Репост в Facebook с Open Graph meta tags
Пример поста в Facebook с разметкой Open Graph
Пост, которым делится человек в соцсети, полностью соответствует указанным в редакторе метатегов данным.

Что будет, если не использовать разметку Open Graph? После нажатия на кнопку «Поделиться» соцсеть подтянет картинку, заголовок и описание на свое усмотрение. В итоге может получиться нечто малопривлекательное:
Репост в Facebook без OG tags
Репост в Facebook без разметки Open Graph
Нет ни фотографии, ни описания колясок, ни привлекательного заголовка. В новостной ленте или на стене такая информация будет выглядеть некрасиво и уж точно не вызовет желания перейти на ваш сайт. Поэтому чтобы грамотно использовать все инструменты продвижения, лучше внедрить разметку Open Graph.

Дополнительные необязательные теги

В OpenGraph можно использовать такие дополнительные метатеги:

  • og:audio — для добавления аудиофайла;
  • og:description — краткое описание;
  • og:locale — локация, по умолчанию значение тега — en_US;
  • og:site_name — название ресурса для объекта, который является частью большого сайта;
  • og:video — для добавления видео, доступны и другие метатеги.

Как проверить корректность разметки Open Graph

Чтобы посмотреть, как будет выглядеть ваш анонс, достаточно зайти на Facebook for Developers. В «Отладчик» следует ввести адрес поста, новости или иного объекта. Посмотрев на результат работы, вы оцените, что желательно изменить или добавить в этом превью. Инструмент для проверки выглядит так:
Facebook Sharing Debugger
Отладчик перепостов Facebook
Первоначально разметка сайта использовалась только для Facebook, соответственно, инструмент проверки находится здесь. Но теперь Open Graph активно используется и для других социальных сетей. Это значит, если вы настроите разметку для страницы своего сайта, то анонс информации с нее будет корректно отображаться во всех известных соцсетях. Можно еще провести аудит страницы сайта и проверить корректность настройки микроразметки.

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

Плюсы Open Graph

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

Дополнительные возможности

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

Для каждой категории предлагаются отдельные группы метаданных. В основном это те же слова, но с дополнительными двоеточиями. Например, когда для загрузки ссылки на изображение потребуется наличие протокола https:
og:image: secure_url
Для картинки можно задать подробные параметры вплоть до количества пикселей в высоту и в ширину. Можно разместить и несколько версий одного и того же метатега. Это делается для быстрого решения любого конфликта, который может возникнуть при прочтении кода. Предпочтение при этом отдается первой версии.

Все возможные варианты метаданных представлены на официальном сайте Open Graph. Там же можно найти настройки для каждой соцсети.

Как быстро внедрить разметку на популярных CMS

Чтобы быстро настроить Open Graph для конкретного движка, можно воспользоваться готовыми решениями — модулями и плагинами. Например, WordPress позволяет внедрять Open Graph специальным плагином. Аналогичные функции есть в SEO-модуле Yoast SEO.

Также в WordPress Open Graph можно установить и без плагинов: для этого потребуется внести соответствующие метатеги в код HTML.
Метатеги Open Graph в HTML-коде страницы
Метатеги Open Graph в коде страницы
Для Joomla также имеются готовые плагины, например Open Graph Protocol Solution. Чтобы обойтись без плагинов, добавляйте строки с мета тегами в блок <head> через JDocument. Тип и значение метатегов зависят от содержания статьи или данных, которые вы хотите подключить к разметке.

Готовым решением для Opencart является плагин Open Graph Meta. Вручную метатеги разметки добавляются в <head> вашего сайта с учетом версии используемой CMS.

Сервисы для генерации мета-тегов Open Graph

Вне зависимости от используемой CMS, можно генерировать метатеги Open Graph с помощью онлайн-сервисов, например:
Эти онлайн-инструменты имеют интуитивно понятный интерфейс и позволяют быстро сгенерировать код Open Graph для нужного типа контента.

FAQ

Почему разметка Open Graph важна?

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

Какие типы контента можно разметить с помощью Open Graph?

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

Заключение

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

Для настройки нужно добавить соответствующие метатеги в код страниц. С помощью специализированных сервисов и плагинов можно проверить состояние и внешний вид всех таких анонсов.
Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

3.35 из 5 на основе 17 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Поделитесь статьей с вашими друзьями

Вы уверены?

Знакомство с Serpstat

Узнайте об основных возможностях сервиса удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Я принимаю условия Политики конфиденциальности.

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить

Мы используем файлы cookie для обеспечения работоспособности сервиса, улучшения навигации и маркетинговых активностей Serpstat. Нажимая "Принять и продолжить", вы соглашаетесь с нашей Политика конфиденциальности

Открыть чат технической поддержки
mail pocket flipboard Messenger telegramm