– Читать 8 минут –

23 ноября 2021

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

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — МИКРОРАЗМЕТКА

Инструкцию одобрил
Head of SEO в Ольшанский и Партнеры

Алексей Матвейчук

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

Содержание

Что такое Open Graph
Синтаксис разметки
- Основные теги разметки Open Graph
- Дополнительные необязательные теги
Как проверить корректность разметки Open Graph
Плюсы Open Graph
- Дополнительные возможности
Как быстро внедрить разметку на популярных CMS
- Сервисы для генерации мета-тегов Open Graph
FAQ
Заключение

Что такое 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

После обновления и сохранения информации делаем попытку поделиться статьей в Facebook. И вот что получается:

Репост в Facebook с Open Graph meta tags

Пример поста в Facebook с разметкой Open Graph

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

Что будет, если не использовать разметку Open Graph? После нажатия на кнопку «Поделиться» соцсеть подтянет картинку, заголовок и описание на свое усмотрение. В итоге может получиться нечто малопривлекательное:

Репост в 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

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

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

Плюсы Open Graph

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

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

Репост выглядит завершенным, привлекательным, доработанным.

В краткой форме передается содержание страницы.

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

Разработчики разметки 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 от Pc-Ry;
open graph generator от Searchenginereports;
The Ultimate Open Graph Generator;
Open Graph Generator от Small SEO Tools;
Open Graph Generator от FreeCodeTools и др.

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

FAQ

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

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

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

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

Заключение

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

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

Эта статья — часть модуля «Список задач» в Serpstat

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

Начать работу со «Списком задач»

Serpstat — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

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

3.53 из 5 на основе 19 оценок

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

Используйте лучшие SEO инструменты

Подбор ключевых слов

Поиск ключевых слов – раскройте неиспользованный потенциал вашего сайта

Возможности Serpstat

Возможности Serpstat – комплексное решение для эффективного продвижения вебсайтов

Кластеризация ключевых слов

Кластеризация ключевых слов автоматически обработает до 50 000 запросов в несколько кликов

SEO аудит страницы

Проанализируйте уровень оптимизации документа используя SЕО аудит страницы