Зачем нужна Open Graph разметка
Open Graph — это протокол микроразметки, который определяет, как ссылка на страницу отображается при публикации в социальных сетях и мессенджерах. Когда кто-то вставляет ссылку на вашу статью в Telegram, ВКонтакте, Facebook или WhatsApp — мессенджер автоматически подтягивает заголовок, описание и изображение. Эти данные берутся из Open Graph мета-тегов.
Без Open Graph разметки мессенджер попытается самостоятельно выбрать заголовок и картинку из содержимого страницы. Результат непредсказуем: может подтянуться логотип размером 50×50 пикселей, случайная картинка из сайдбара или описание, обрезанное на полуслове. Ссылка выглядит непривлекательно, и по ней не кликают.
С правильной Open Graph разметкой вы контролируете, как именно выглядит превью ссылки. Это влияет на кликабельность ссылок в социальных сетях и мессенджерах, что в свою очередь влияет на трафик. По моему опыту, страницы с оптимизированным превью получают в 2-3 раза больше переходов из социальных каналов, чем страницы с дефолтным или некорректным отображением.
Связь Open Graph с SEO
Open Graph напрямую не является фактором ранжирования — ни Google, ни Яндекс не используют og-теги для определения позиций. Однако косвенное влияние есть:
- Привлекательный превью увеличивает переходы из социальных сетей — а это трафик, который улучшает поведенческие метрики.
- Контент с хорошим превью чаще расшаривают, что генерирует дополнительные ссылки и упоминания.
- Яндекс учитывает социальные сигналы как один из факторов ранжирования. Активность вокруг контента — положительный сигнал.
Пошаговая инструкция
Шаг 1. Разберитесь в основных Open Graph тегах
Open Graph разметка размещается в <head> HTML-страницы в виде мета-тегов. Основные теги, которые нужно настроить:
- og:title — заголовок страницы для превью. Не обязательно совпадает с HTML-тегом
<title>. Оптимальная длина — 60-90 символов. Заголовок должен быть привлекательным и отражать суть страницы. - og:description — описание страницы для превью. 150-200 символов. Должно побуждать к клику, но не быть кликбейтом.
- og:image — URL изображения для превью. Самый важный тег, потому что изображение занимает основную площадь превью. Рекомендуемый размер: 1200×630 пикселей. Это универсальный формат, который корректно отображается во всех социальных сетях и мессенджерах.
- og:url — каноническая ссылка на страницу. Указывайте полный URL с протоколом:
https://example.com/page/. - og:type — тип контента. Для обычных страниц:
website. Для статей:article. Для страниц товаров:product. - og:locale — язык контента. Для русскоязычного сайта:
ru_RU.
Пример полного набора Open Graph тегов:
<meta property="og:title" content="Как настроить внутреннюю перелинковку сайта">
<meta property="og:description" content="Пошаговая инструкция по настройке внутренних ссылок: иерархия, анкоры, оптимальное количество. Примеры и типичные ошибки.">
<meta property="og:image" content="https://example.com/images/internal-linking-guide.jpg">
<meta property="og:url" content="https://example.com/internal-linking/">
<meta property="og:type" content="article">
<meta property="og:locale" content="ru_RU">
<meta property="og:site_name" content="Название сайта">Шаг 2. Подготовьте изображение правильного размера
Изображение — ключевой элемент превью. Требования к og:image:
- Размер: 1200×630 пикселей. Это стандарт, который поддерживают все основные платформы: Telegram, ВКонтакте, Facebook, WhatsApp, Twitter/X, LinkedIn.
- Формат: JPG или PNG. JPG для фотографий, PNG для изображений с текстом и графикой. Избегайте GIF и SVG — не все платформы их поддерживают.
- Размер файла: до 300-500 Кб. Слишком тяжёлое изображение может не загрузиться — платформа покажет превью без картинки.
- Текст на изображении. Если добавляете текст — располагайте его в центре. Разные платформы обрезают края по-разному. Текст должен занимать не более 20% площади изображения и читаться на мобильном экране.
- Не используйте логотип как og:image. Маленький логотип на белом фоне растянется до 1200×630 и будет выглядеть непрофессионально. Создайте отдельное тематическое изображение.
Шаг 3. Настройте Open Graph через Yoast SEO
Если сайт на WordPress с установленным Yoast SEO, настройка Open Graph займёт несколько минут:
Глобальные настройки:
- Перейдите в Yoast SEO → Общие → Вкладка «Вебмастер-инструменты».
- Убедитесь, что Open Graph включён (в Yoast SEO → Общие → Возможности → переключатель «Open Graph data»).
- В разделе Yoast SEO → Общие → Ваша организация — загрузите логотип и укажите название сайта. Эти данные будут использоваться как fallback.
Настройка для отдельной страницы:
- Откройте редактирование записи или страницы в WordPress.
- Прокрутите до блока Yoast SEO внизу редактора.
- Перейдите на вкладку «Социальные сети» (иконка с сердцем или шарик).
- Заполните поля: заголовок для социальных сетей, описание, загрузите изображение 1200×630.
- Если не заполнить эти поля, Yoast использует стандартный title и meta description.
Для Rank Math настройка аналогична: при редактировании записи откройте панель Rank Math → вкладка Social → заполните поля Open Graph.
Шаг 4. Настройте Open Graph вручную (без плагина)
Если вы не используете SEO-плагин, добавьте Open Graph теги через functions.php дочерней темы:
function custom_open_graph_tags() {
if (is_singular()) {
global $post;
$title = get_the_title($post->ID);
$description = get_the_excerpt($post->ID);
$url = get_permalink($post->ID);
$image = get_the_post_thumbnail_url($post->ID, 'full');
echo '<meta property="og:title" content="' . esc_attr($title) . '">' . "\n";
echo '<meta property="og:description" content="' . esc_attr($description) . '">' . "\n";
echo '<meta property="og:url" content="' . esc_url($url) . '">' . "\n";
echo '<meta property="og:type" content="article">' . "\n";
echo '<meta property="og:locale" content="ru_RU">' . "\n";
if ($image) {
echo '<meta property="og:image" content="' . esc_url($image) . '">' . "\n";
echo '<meta property="og:image:width" content="1200">' . "\n";
echo '<meta property="og:image:height" content="630">' . "\n";
}
}
}
add_action('wp_head', 'custom_open_graph_tags');Этот код автоматически генерирует Open Graph теги для всех записей и страниц на основе заголовка, отрывка и миниатюры записи.
Шаг 5. Проверьте отображение превью
После настройки обязательно проверьте, как превью выглядит на разных платформах:
- Facebook Sharing Debugger (
developers.facebook.com/tools/debug/) — показывает, какие Open Graph теги распознал Facebook. Если превью некорректное — нажмите «Scrape Again» для обновления кэша. Учтите: инструмент может быть недоступен из РФ без VPN. - ВКонтакте — вставьте ссылку в поле создания записи. ВК покажет превью перед публикацией. Если превью не обновилось — используйте инструмент очистки кэша ВК:
vk.com/dev/pages.clearCache. - Telegram — отправьте ссылку в чат «Избранное». Telegram кэширует превью агрессивно. Чтобы обновить, отправьте ссылку через бота
@WebpageBot— он перезагрузит кэш. - Twitter/X Card Validator — если платформа актуальна для вашей аудитории, проверьте через валидатор Twitter Cards.
Шаг 6. Настройте Twitter Card (дополнительно)
Помимо Open Graph, существует отдельный протокол Twitter Cards. Основные теги:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Заголовок страницы">
<meta name="twitter:description" content="Описание страницы">
<meta name="twitter:image" content="https://example.com/image.jpg">Yoast SEO и Rank Math генерируют Twitter Card теги автоматически. Значение summary_large_image обеспечивает большое превью с изображением.
Шаг 7. Установите изображение по умолчанию
Не на всех страницах есть подходящее изображение. Для таких случаев настройте fallback — изображение по умолчанию. В Yoast SEO это делается в разделе SEO → Общие → Ваша организация → Логотип/изображение по умолчанию.
Создайте универсальное брендированное изображение 1200×630 с логотипом и названием сайта. Оно будет использоваться для всех страниц, у которых не задано индивидуальное og:image.
Типичные ошибки
- Отсутствие og:image. Превью без изображения никто не замечает в ленте. Изображение — главный элемент, который привлекает внимание. Без него кликабельность ссылки минимальна.
- Неправильный размер изображения. Картинка 300×200 растягивается до 1200×630 и выглядит размытой. Или квадратная картинка 1000×1000 обрезается непредсказуемо. Всегда используйте 1200×630.
- Дублирование title и og:title. Технически это не ошибка, но упущенная возможность. Title оптимизирован для поисковой выдачи (с ключевыми словами), а og:title можно сделать более привлекательным для социальных сетей (с интригой, цифрами, эмоцией).
- Логотип вместо тематического изображения. Маленький логотип на белом фоне размером 1200×630 выглядит как техническая ошибка. Создавайте для каждой важной страницы отдельное превью.
- Забыли сбросить кэш. После обновления Open Graph тегов социальные сети и мессенджеры продолжают показывать старое превью из кэша. Используйте инструменты очистки кэша каждой платформы.
- Относительные URL в og:image. Указали
/images/photo.jpgвместоhttps://example.com/images/photo.jpg. Open Graph требует абсолютных URL. Некоторые платформы не распознают относительные пути. - HTTP вместо HTTPS. Если сайт работает на HTTPS, но в og:image указан HTTP — часть платформ заблокирует загрузку изображения из-за mixed content.
Что проверить в итоге
- На каждой странице сайта присутствуют мета-теги og:title, og:description, og:image, og:url, og:type.
- Изображение og:image имеет размер 1200×630 пикселей и весит не более 500 Кб.
- URL в og:image — абсолютный (начинается с https://).
- Настроено fallback-изображение для страниц без индивидуальной картинки.
- Превью проверено через Facebook Sharing Debugger (или аналог) — ошибок нет.
- Превью проверено в Telegram и ВКонтакте — изображение и текст отображаются корректно.
- Twitter Card теги настроены (twitter:card = summary_large_image).
- og:title и og:description заполнены осмысленно, а не дублируют HTML title и meta description один-в-один.
- При обновлении контента страницы обновляются и Open Graph теги.
