Что такое Open Graph?
Open Graph-теги – это небольшие фрагменты кода, которые я добавляю на страницы сайта, чтобы управлять тем, как контент отображается при его публикации в соцсетях.
Их придумали в Facebook, чтобы стандартизировать процесс извлечения метаданных и их отображения в ленте. Сегодня OG-теги работают не только там, но и в LinkedIn, X (бывший Twitter), Pinterest и других платформах.
Пример: пост с правильно настроенным og:image выглядит заметно привлекательнее, чем публикация без него. Картинка делает его кликабельным, добавляет визуальный акцент и сразу даёт понять, о чём речь.
Все OG-теги размещаются в разделе <head> страницы. Основные: title, image, description, type, locale и site_name. Дальше расскажу, как их настроить и зачем это важно.
Почему Open Graph-теги так важны?
Они создают привлекательные и информативные превью страниц, что напрямую влияет на метрики в соцсетях: клики, показы, репосты, реакции.
По исследованию INMA (2024), посты с картинками в Facebook показывают вдвое больше вовлечённости и на 114% больше показов, чем публикации без изображений.
Дополнительные плюсы OG-тегов:
- Больше кликов (CTR): красивые превью мотивируют переходить по ссылкам.
- Рост числа репостов: контент с оформленным предпросмотром охотнее делятся.
- Укрепление бренда: оформление в едином стиле повышает узнаваемость.
- Профессиональный вид: отсутствие тегов создаёт ощущение заброшенности сайта.
- Косвенные плюсы для SEO: больше переходов, обратных ссылок и взаимодействий.
Open Graph: обязательные и дополнительные теги
Обязательные OG-теги
- og:title – заголовок страницы. Должен совпадать с её содержанием и мотивировать клик.
- og:image – картинка предпросмотра. Лучше всего 1200×630 px, в формате JPG или PNG, связанная с содержанием.
- og:url – канонический URL страницы. Помогает соцсетям правильно подтягивать метаданные.
- og:type – тип контента (website, article, video и т. д.). Выбираю основной, чтобы соцсети понимали формат.
Дополнительные OG-теги
- og:description – краткое описание (до 120 символов). Работает как подзаголовок и мотивирует клик.
- og:site_name – название сайта или бренда.
- og:locale – язык и страна (например, ru_RU или en_US).
Как настроить OG-теги
WordPress
Самый простой способ – установить плагин Yoast SEO (премиум-версия). После активации включаю Open Graph в настройках и задаю теги на каждой странице во вкладке «Social».
Wix
Wix автоматически добавляет OG-теги, но их можно кастомизировать. Для этого в настройках SEO выбираю нужную страницу и задаю свои значения для заголовка, описания и изображения.
Squarespace
Тоже поддерживает OG по умолчанию. Для кастомизации открываю страницу, захожу в «Advanced» и вставляю нужные мета-теги в «Page Header Code Injection».
Как проверить OG-теги
Использую Sharing Debugger. Вставляю URL, жму «Debug» и смотрю, как выглядит предпросмотр. Там же отображаются ошибки.
Для проверки служит Post Inspector. Вставляю ссылку – и сразу вижу превью.
X (Twitter)
Валидатора больше нет, поэтому проверяю через Tweet Composer: вставляю ссылку и смотрю, как она отобразится в ленте.
Аудит OG-тегов
Чтобы проверить, на каких страницах они установлены, провожу аудит сайта. В отчётах ищу раздел «Open Graph» – там видно, какие страницы корректно настроены, а где нужно доработать.