Open Graph и Twitter Cards — как настроить превью ссылки

Q: Какой тип Twitter Card лучше выбрать: summary или summary_large_image?

Если у вас есть качественное изображение — выбирайте summary_large_image . Он привлекает больше внимания и показывает контент в более презентабельном виде. Если изображение отсутствует или неудачное — используйте summary .

Когда вы делитесь ссылкой на статью, продукт или новость в социальных сетях — вы не просто отправляете URL. Вы передаёте целую историю: заголовок, описание, изображение и даже настроение. Именно поэтому одна и та же ссылка может выглядеть как привлекательный пост с ярким фото и цепляющим заголовком — или как бесцветный кусок текста с абстрактной иконкой. Разница между этими двумя сценариями — в Open Graph и Twitter Cards. Эти технологии позволяют вам контролировать, как ваш контент отображается в Facebook, WhatsApp, Telegram, Twitter (X) и других платформах. Если вы не настроили их — вы теряете до 70% потенциальной вовлечённости. В этой статье вы узнаете, что такое Open Graph и Twitter Cards, зачем они нужны, как правильно настроить изображения, заголовки и описания, почему размер картинки важен, как проверить корректность тегов и как добавить их в WordPress. Вы получите не просто теорию, а практические инструкции, которые можно применить уже сегодня.

Что такое Open Graph и зачем он нужен

Open Graph — это протокол, разработанный Facebook в 2010 году, чтобы сделать внешний вид ссылок в социальных сетях более информативным и привлекательным. До его появления, когда вы копировали ссылку на сайт и вставляли её в Facebook или WhatsApp, система показывала просто адрес — без заголовка, описания и изображения. Пользователь вынужден был кликать, чтобы понять, о чём речь. Open Graph изменил эту ситуацию: теперь при публикации ссылки социальная сеть автоматически извлекает метаданные с вашей страницы и формирует красивый превью — как будто вы сами создали пост.

Эти метаданные встраиваются в HTML-код страницы через специальные теги — OG-теги. Они начинаются с атрибута property="og:" и содержат информацию о заголовке, описании, изображении, URL и других параметрах. Когда кто-то делится вашей ссылкой — Facebook, Telegram или Pinterest читают эти теги и показывают пользователю превью в формате, который вы задали.

Почему это важно? Всё просто: люди решают, кликать или пропустить ссылку, за 2–3 секунды. Превью — это ваше первое впечатление. Яркая картинка с чётким заголовком и лаконичным описанием увеличивает кликабельность в 2–3 раза. Вы можете не только улучшить внешний вид ссылки — вы можете повлиять на конверсию. Например, если у вас интернет-магазин и вы делитесь новой коллекцией — без OG-тегов пользователь увидит просто "https://yourstore.com/new-collection". А с правильно настроенным OG-превью — он увидит фото товара, название коллекции и текст: "Новая осенняя линейка. Скидки до 50% — только эту неделю". Это не просто ссылка. Это рекламный баннер, встроенный в сообщение друга.

Open Graph работает не только на Facebook. Сегодня его поддерживают:

Facebook и Instagram (через встроенные механизмы Facebook)
WhatsApp
Telegram
LinkedIn (с небольшими отличиями)
Pinterest
Вконтакте и Одноклассники (частично)
Многие мессенджеры и CRM-системы

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

Что такое og:title, og:description и другие базовые OG-теги

OG-теги — это HTML-элементы, которые помещаются в <head></head> вашей страницы. Они не видны пользователю на сайте, но их читают социальные сети. Ниже — основные теги, которые необходимо настроить для качественного превью.

og:title — заголовок превью

Что это? Краткий, емкий заголовок, который будет отображаться в посте. Он должен быть цепляющим и точно отражать суть контента.

Пример:

<meta property="og:title" content="Как выбрать идеальный домен для бизнеса в 2025 году">

Важно: не копируйте сюда заголовок H1 страницы. Он может быть слишком длинным или техническим. OG-заголовок — это маркетинговое предложение, а не SEO-описание. Лучше использовать формулу: «Что? + Почему это важно?»

og:description — описание превью

Что это? Краткое описание, которое дополняет заголовок. Здесь нужно объяснить, зачем человеку кликать. Лучше всего — использовать призыв к действию или указать выгоду.

Пример:

<meta property="og:description" content="Узнайте, какие домены сегодня работают лучше всего и как избежать распространённых ошибок при выборе. Включая 5 кейсов реальных бизнесов.">

Длина: оптимально 120–160 символов. Больше — обрежется, меньше — выглядит скудно.

og:image — изображение превью

Что это? Главный визуальный элемент. Изображение, которое сразу привлекает внимание. Оно должно быть релевантным: если вы пишете про кофе — не используйте фото пустого офиса. Используйте чашку ароматного эспрессо с паром.

Пример:

<meta property="og:image" content="https://yourwebsite.com/images/coffee-preview.jpg">

Сейчас мы подробнее разберём, почему размер изображения критически важен.

og:url — адрес страницы

Что это? Полный URL, который будет открыться при клике. Он должен совпадать с адресом страницы, где находится тег.

Это важно для избежания дублирования контента. Если вы используете разные URL для одной страницы (например, с и без www), укажите здесь канонический адрес.

og:type — тип контента

Что это? Указывает, что за контент вы публикуете: статья, сайт, видео, продукт. Это помогает соцсетям правильно отображать превью.

Примеры:

article — для статей и блогов
website — для главной страницы сайта
product — для товаров в интернет-магазине
video.movie — для видеофайлов

Пример тега:

<meta property="og:type" content="article">

og:site_name — название сайта

Что это? Название вашего бренда или сайта, которое отображается под заголовком. Например: "Сайт «Хорошо»".

Это усиливает узнаваемость. Если вы делитесь ссылкой на статью — пользователь видит не просто "ссылка", а "Сайт «Хорошо»: Как выбрать идеальный домен...".

Почему og:image должен быть 1200x630 пикселей

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

Размер 1200x630 пикселей — это золотой стандарт, установленный Facebook. Почему именно он?

Соотношение сторон — 1.91:1. Это идеальное соотношение для превью в ленте новостей. Изображения с таким форматом занимают больше места, выделяются среди других постов и лучше воспринимаются на мобильных устройствах.
Качество при масштабировании. Если вы используете картинку 600x315 — она будет увеличена в два раза. Это приводит к потере чёткости, пикселизации и размытию. А если вы используете 1200x630 — изображение отображается в оригинальном разрешении.
Поддержка всех платформ. Twitter, WhatsApp, LinkedIn — все они используют эту же пропорцию. Если вы сделаете изображение в 1200x630 — оно будет выглядеть идеально почти везде.

Что делать, если ваша картинка другого размера?

Если она слишком маленькая — увеличивайте её с помощью графического редактора (Photoshop, Canva, Figma). Но не растягивайте — сохраняйте пропорции.
Если она слишком большая — сожмите до 1200x630. Слишком большие файлы замедляют загрузку страницы.
Если она квадратная — добавьте белые поля сверху и снизу, чтобы получить нужную пропорцию. Это лучше, чем обрезка.

Важно: файл должен быть в формате JPEG или PNG. GIF и WebP могут не поддерживаться всеми платформами. Размер файла — не более 5 МБ. И обязательно укажите полный URL, а не относительный путь (например: https://yourwebsite.com/images/banner.jpg, а не /images/banner.jpg).

Twitter Cards: как ссылки выглядят в X (бывший Twitter)

Twitter (сейчас X) — это платформа, где каждое слово на счету. Там нет места для длинных описаний, но есть огромная ценность в визуальном воздействии. Именно поэтому Twitter разработал собственную систему — Twitter Cards. Она похожа на Open Graph, но имеет свои правила и теги.

Twitter Cards работают параллельно с Open Graph. Если вы настроили OG-теги, Twitter обычно их использует. Но если вы хотите полностью контролировать внешний вид — лучше добавить специальные Twitter-теги. Они работают только в X, но позволяют точнее настроить отображение.

Какие типы Twitter Cards существуют

Twitter предлагает несколько типов карточек. Выберите тот, который лучше всего подходит для вашего контента.

1. Summary Card (Карточка с кратким описанием)

Это базовый тип. Он отображает:

Заголовок
Описание
Изображение (опционально)
Никнейм автора

Пример тегов:

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Как выбрать идеальный домен для бизнеса в 2025 году">
<meta name="twitter:description" content="Узнайте, какие домены сегодня работают лучше всего и как избежать распространённых ошибок при выборе. Включая 5 кейсов реальных бизнесов.">
<meta name="twitter:image" content="https://yourwebsite.com/images/domains-preview.jpg">
<meta name="twitter:site" content="@yourbrand">

Подходит для статей, блогов и новостей.

2. Summary Card with Large Image (Карточка с большим изображением)

Этот тип — ваш лучший выбор, если вы хотите максимального визуального воздействия. Он показывает крупное изображение слева, а текст — справа. Идеально подходит для:

Изображений продуктов
Фотографий событий
Снимков экрана с результатами
Инфографик

Пример:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Как выбрать идеальный домен для бизнеса в 2025 году">
<meta name="twitter:description" content="Узнайте, какие домены сегодня работают лучше всего и как избежать распространённых ошибок при выборе. Включая 5 кейсов реальных бизнесов.">
<meta name="twitter:image" content="https://yourwebsite.com/images/domains-preview.jpg">
<meta name="twitter:site" content="@yourbrand">

Размер изображения: минимум 300x157 пикселей, но лучше — 1200x600 или больше. Формат: JPG, PNG.

3. App Card и Player Card

App Card — для продвижения мобильных приложений. Показывает иконку, название и кнопку загрузки.

Player Card — для видео и аудио. Позволяет воспроизводить медиа прямо в твите без перехода на сайт.

Обычно эти типы используются в продвинутых кейсах — например, если вы запускаете мобильное приложение или у вас есть видеоподкаст. Для большинства сайтов достаточно Summary Card.

Какие теги нужны для Twitter Cards

Вот полный набор обязательных тегов:

Тег	Назначение	Пример значения
`twitter:card`	Тип карточки (summary или summary_large_image)	`summary_large_image`
`twitter:title`	Заголовок поста (до 70 символов)	`Как выбрать домен для бизнеса`
`twitter:description`	Описание (до 200 символов)	`Лучшие практики выбора домена в 2025 году. Избегайте ошибок, которые делают 90% бизнесов.`
`twitter:image`	Полный URL изображения (1200x600+)	`https://yourwebsite.com/image.jpg`
`twitter:site`	Никнейм вашего аккаунта в X (с @)	`@yourbrand`
`twitter:creator`	Никнейм автора (опционально)	`@authorname`

Важно: теги Twitter Cards должны быть добавлены внутри <head>. Они не работают, если помещены в нижнюю часть HTML. Также убедитесь, что URL изображения доступен без авторизации — Twitter не может загрузить картинку с защищённых страниц.

Как проверить, работает ли OG и Twitter Cards

Настройка тегов — это только половина дела. Главное — убедиться, что они работают. Многие веб-мастера тратят часы на редактирование кода, а потом удивляются: «Почему в WhatsApp не показывается картинка?». Причина — теги неверные, нечитаемые или кэшированные.

Шаг 1: Проверка через инструменты Facebook

Facebook предоставляет официальный инструмент — Sharing Debugger. Он показывает, как именно будет выглядеть ваша ссылка в Facebook и Instagram.

Как проверить:

Перейдите на https://developers.facebook.com/tools/debug/
Вставьте URL вашей страницы.
Нажмите «Проверить».

Инструмент покажет:

Заголовок — совпадает ли он с вашим og:title?
Описание — корректно ли оно отображается?
Изображение — загружено ли? Какой у него размер?
Ошибки — если что-то не так, он укажет: «Неверный URL изображения», «Отсутствует og:title» и т.д.

Важно: после правок нажмите кнопку «Сбросить кэш». Facebook и другие платформы кэшируют превью. Если вы изменили картинку, но не сбросили кэш — старая версия будет показываться ещё несколько дней.

Шаг 2: Проверка через Twitter Card Validator

Twitter (X) также имеет свой инструмент — Card Validator.

Как проверить:

Перейдите на https://cards-dev.twitter.com/validator
Вставьте URL страницы.
Нажмите «Preview card».

Инструмент покажет:

Тип карточки (summary или summary_large_image)
Изображение — видно ли оно? Корректный ли размер?
Заголовок и описание — короткие, понятные?
Ошибки — например: «Не найдено изображение», «Неверный тег twitter:card»

Если вы видите «Card not found» — значит, теги не добавлены или размещены неверно. Проверьте HTML-код страницы.

Шаг 3: Прямая проверка в соцсетях

После настройки и сброса кэша — проверяйте результат в реальных приложениях:

Скопируйте ссылку и вставьте в WhatsApp — появилось ли превью?
Поделитесь ссылкой в Telegram — видно ли изображение и описание?
Опубликуйте в LinkedIn — корректно ли отображается?

Иногда возникают проблемы:

Нет изображения — проверьте URL: он полный? Доступен без логина?
Неправильный заголовок — возможно, теги дублируются или перезаписываются плагинами.
Изображение слишком маленькое — убедитесь, что оно 1200x630 пикселей.

Частые ошибки и как их избежать

Важно: Вот самые распространённые ошибки, которые ломают OG и Twitter Cards:

Использование относительных путей к изображению (например, /images/banner.jpg). Нужен полный URL: https://site.com/images/banner.jpg.
Изображение в формате WebP или GIF — не все платформы их поддерживают.
Слишком большой файл (>5 МБ) — может не загрузиться.
Теги размещены в теле страницы, а не в head.
Изображение заблокировано robots.txt или требует авторизации.
Дублирующие теги — например, два og:title. Система может выбрать случайный.
Нет тега og:type — это не фатально, но снижает точность отображения.

Как добавить OG-теги и Twitter Cards в WordPress

Если вы используете WordPress, вам повезло — нет необходимости писать код вручную. Практически все популярные SEO-плагины автоматически генерируют Open Graph и Twitter Cards. Вот как это сделать.

Вариант 1: Использование Yoast SEO (самый популярный)

Yoast SEO — это стандарт де-факто для WordPress. Он автоматически генерирует OG и Twitter теги на основе заголовка, описания и изображения статьи.

Как настроить:

Установите и активируйте плагин Yoast SEO.
Откройте редактор статьи или страницы.
Прокрутите вниз до блока «Yoast SEO» — он находится под редактором.
Найдите вкладку «Социальные» (Social).
Здесь вы увидите поля для Facebook и Twitter.
В поле «Заголовок» введите заголовок для соцсетей (можно отличный от H1).
В поле «Описание» — краткое описание превью.
В поле «Изображение» — загрузите картинку (рекомендуется 1200x630 пикселей).
Убедитесь, что включена опция «Включить Open Graph».
Сохраните изменения.

Плагин автоматически добавит все необходимые теги в <head></head>. Вы можете проверить результат — откройте исходный код страницы (Ctrl+U) и найдите строки с og: или twitter:.

Вариант 2: Использование Rank Math

Rank Math — это современный и мощный SEO-плагин, который предлагает более гибкие настройки.

Как настроить:

Установите и активируйте Rank Math.
Перейдите в настройки плагина: «Rank Math» → «Настройки».
Выберите вкладку «Социальные сети».
Включите опции: «Facebook Open Graph» и «Twitter Cards».
Укажите логотип сайта — он будет использоваться как изображение по умолчанию.
Сохраните настройки.

Теперь при редактировании статьи:

Найдите блок Rank Math внизу.
Перейдите на вкладку «Социальные сети».
Настройте отдельно для Facebook и Twitter.
Загрузите изображение — плагин автоматически обрежет его до нужного размера.

Rank Math также позволяет задать разные теги для разных типов страниц — например, отдельно для статей и товаров.

Вариант 3: Ручное добавление через functions.php

Если вы используете тему без SEO-плагинов — можно добавить теги вручную. Это требует базовых знаний PHP.

Как добавить:

Перейдите в «Внешний вид» → «Редактор тем».
Выберите файл functions.php.
Вставьте следующий код в конец файла:

<?php
function add_og_tags() {
  if (is_single() || is_page()) {
    global $post;
    $title = get_the_title();
    $desc = wp_trim_words(get_the_excerpt(), 25);
    $url = get_permalink();
    if (has_post_thumbnail()) {
      $image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
      $image_url = $image[0];
    } else {
      $image_url = get_template_directory_uri() . '/images/default-og.jpg';
    }
    echo '<meta property="og:title" content="' . esc_attr($title) . '">' . "\n";
    echo '<meta property="og:description" content="' . esc_attr($desc) . '">' . "\n";
    echo '<meta property="og:url" content="' . esc_url($url) . '">' . "\n";
    echo '<meta property="og:image" content="' . esc_url($image_url) . '">' . "\n";
    echo '<meta property="og:type" content="article">' . "\n";
    echo '<meta property="og:site_name" content="' . esc_attr(get_bloginfo('name')) . '">' . "\n";
    echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
    echo '<meta name="twitter:title" content="' . esc_attr($title) . '">' . "\n";
    echo '<meta name="twitter:description" content="' . esc_attr($desc) . '">' . "\n";
    echo '<meta name="twitter:image" content="' . esc_url($image_url) . '">' . "\n";
    echo '<meta name="twitter:site" content="@yourbrand">' . "\n";
  }
}
add_action('wp_head', 'add_og_tags');
?>

Создайте файл default-og.jpg в папке темы — он будет использоваться, если у статьи нет изображения. И не забудьте заменить @yourbrand на свой Twitter-аккаунт.

Важно: перед сохранением сделайте резервную копию файла. Ошибки в functions.php могут сломать сайт.

Заключение: почему OG и Twitter Cards — это не «опционально», а necessity

Сегодня, когда внимание пользователей — самый ценный ресурс, внешний вид ссылки становится критически важным. Open Graph и Twitter Cards — это не «дополнительные опции для продвинутых». Это базовые инструменты, которые должны быть настроены у каждого сайта, который хочет привлекать трафик из социальных сетей.

Вы уже знаете:

Что такое OG-теги и как они работают
Почему og:image должен быть именно 1200x630
Какие типы Twitter Cards существуют и как выбрать правильный
Как проверить, что теги работают — с помощью Facebook и Twitter инструментов
Как добавить их в WordPress с помощью Yoast SEO, Rank Math или вручную

Но главное — вы поняли: не настроить OG-теги — значит добровольно отказаться от визуального преимущества. Ваш контент перестанет выделяться. Он будет сливаюсь с серым фоном других ссылок. А если вы настроите его правильно — ваш пост станет привлекательным, понятным и кликабельным. Люди будут делиться им чаще. Они будут запоминать ваш бренд. И это превратит простые ссылки в мощные инструменты продвижения.

Сегодня — самое время проверить свои теги. Зайдите в Facebook Sharing Debugger, вставьте ссылку на свою главную страницу или самую популярную статью. Посмотрите, как она выглядит. Если изображение отсутствует — это ваша первая задача. Если заголовок не цепляет — перепишите его. Это займёт 15 минут. А результат — увеличение кликов, вовлечённости и конверсий — будет виден уже через день.

FAQ

Что такое OG-теги и зачем они нужны?

OG-теги — это HTML-метаданные, которые определяют, как ссылка на вашу страницу будет выглядеть при публикации в социальных сетях. Они позволяют задать заголовок, описание и изображение для превью. Без них соцсети показывают случайные фрагменты текста и несвязанные картинки — что снижает доверие и кликабельность.

Как проверить, работают ли мои OG-теги?

Используйте официальные инструменты: Facebook Sharing Debugger для проверки Open Graph и Twitter Card Validator для Twitter. Они покажут, как именно будет выглядеть ваша ссылка и укажут ошибки в тегах.

Можно ли использовать одну и ту же картинку для Open Graph и Twitter Cards?

Да, можно. Рекомендуемый размер — 1200x630 пикселей. Он подходит для обеих платформ. Главное — чтобы изображение было в формате JPG или PNG, а URL был полным и доступен без авторизации.

Почему в WhatsApp не отображается изображение, хотя OG-теги настроены?

WhatsApp кэширует превью. Попробуйте удалить ссылку из чата и отправить её заново. Также убедитесь, что URL изображения не содержит параметров (например, ?v=2), и файл доступен без логина. Иногда проблема в формате — попробуйте JPEG вместо WebP.

Какой тип Twitter Card лучше выбрать: summary или summary_large_image?

Если у вас есть качественное изображение — выбирайте summary_large_image. Он привлекает больше внимания и показывает контент в более презентабельном виде. Если изображение отсутствует или неудачное — используйте summary.

Нужно ли настраивать OG-теги для главной страницы?

Да, обязательно. Главная страница — это лицо вашего сайта. Если кто-то делится ссылкой на ваш домен, он должен видеть логотип, название бренда и краткое описание. Это первое впечатление — и оно должно быть профессиональным.

Могут ли OG-теги повлиять на SEO в Google?

Нет, OG-теги не влияют на ранжирование в Google. Но они косвенно помогают: если ваш контент чаще делятся — он получает больше трафика, ссылок и упоминаний. А это уже положительно влияет на SEO.

Какой размер изображения для OG-тегов оптимален?

Оптимальный размер — 1200x630 пикселей. Это обеспечивает лучшее отображение в Facebook, LinkedIn и Twitter. Формат — JPEG или PNG. Размер файла — не более 5 МБ.

Почему после изменений тегов превью не обновляется?

Социальные сети кэшируют превью на несколько дней. Чтобы обновить его — используйте инструменты Facebook и Twitter, нажмите «Сбросить кэш». Затем поделитесь ссылкой заново — только тогда увидите изменения.

Open Graph и Twitter Cards: как выглядит ссылка в соцсетях

Что такое Open Graph и зачем он нужен

Что такое og:title, og:description и другие базовые OG-теги

og:title — заголовок превью

og:description — описание превью

og:image — изображение превью

og:url — адрес страницы

og:type — тип контента

og:site_name — название сайта

Почему og:image должен быть 1200x630 пикселей

Twitter Cards: как ссылки выглядят в X (бывший Twitter)

Какие типы Twitter Cards существуют

1. Summary Card (Карточка с кратким описанием)

2. Summary Card with Large Image (Карточка с большим изображением)

3. App Card и Player Card

Какие теги нужны для Twitter Cards

Как проверить, работает ли OG и Twitter Cards

Шаг 1: Проверка через инструменты Facebook

Шаг 2: Проверка через Twitter Card Validator

Шаг 3: Прямая проверка в соцсетях

Частые ошибки и как их избежать

Как добавить OG-теги и Twitter Cards в WordPress

Вариант 1: Использование Yoast SEO (самый популярный)

Вариант 2: Использование Rank Math

Вариант 3: Ручное добавление через functions.php

Заключение: почему OG и Twitter Cards — это не «опционально», а necessity

FAQ