Когда вы вставляете ссылку в сообщение, твит, пост в LinkedIn или канал Slack, платформа подтягивает карточку-превью — крупную картинку, заголовок, короткий фрагмент текста. Эта картинка и есть изображение Open Graph (OG), и работает она сильнее вашего заголовка. В быстро листающейся ленте именно картинка останавливает палец. Пустое или сломанное превью выглядит как небрежность и его пролистывают.
Вот как сделать такое изображение, которое заработает клик: в правильном размере и с текстом, который действительно читается.
Размер: 1200×630
Стандартное OG-изображение — это 1200×630 пикселей, соотношение 1.91:1. Facebook, LinkedIn, Slack, Discord и большинство систем превью ссылок построены вокруг него. Сделайте его правильно — и вы закрыты почти везде.
Пара смежных размеров всплывает в зависимости от того, куда попадёт ссылка:
| Платформа / применение | Размер | Соотношение |
|---|---|---|
| Open Graph (по умолчанию) | 1200×630 | 1.91:1 |
| Twitter/X большая карточка | 1200×628 | ~1.91:1 |
| Превью YouTube | 1280×720 | 16:9 |
| Квадрат (ленты/IG) | 1080×1080 | 1:1 |
| Сторис / вертикаль | 1080×1920 | 9:16 |
Все они для статьи в блоге не нужны — рабочая лошадка это 1200×630. Но если вы заодно делаете превью для видео или квадратный пост для соцсетей, лучше сгенерировать нужную форму, чем криво кадрировать одну картинку под всё.
Правила по тексту: читаемо в размере превью
Ошибка, которая убивает OG-изображения, — относиться к ним как к плакату, который будут смотреть во весь экран. Не будут. Большинство людей видит карточку размером примерно в треть от реального, на телефоне, посреди прокрутки. Проектируйте именно под это.
- Крупный текст, мало слов. Короткий заголовок — пять-восемь слов — который читается, когда карточка уменьшена. Если приходится щуриться при полном размере, в ленте он вообще нечитаем.
- Сильный контраст. Светлый текст на тёмном или насыщенном фоне, или наоборот. Текст, лежащий на пёстром фото без подложки, пропадает.
- Держите важное по центру. Разные платформы обрезают края немного по-разному. Держите текст и логотипы подальше от внешних полей, чтобы ничего не срезалось.
- Одна мысль на картинку. OG-изображение — это крючок, а не пересказ. Заголовок, может быть подзаголовок, и всё.
Фоны, на которых текст выделяется
Плоский градиент — надёжный выбор. Он даёт тексту чистую опору, выглядит современно и никогда не спорит со словами так, как пёстрое фото. Градиент от тёмного к чуть более тёмному со светлым текстом почти безотказен.
Инструмент OG Image построен ровно вокруг этого: выберите пресет размера (OG 1200×630, Twitter, YouTube, квадрат или сторис), возьмите градиентный фон и добавьте заголовок с подзаголовком. Вы получаете карточку для шеринга, которая чётко читается в любом размере, без запуска полноценного графического редактора.
HTML, благодаря которому она появляется
Сделать картинку — это половина дела. Платформа должна знать, где её найти. Добавьте эти теги в <head> вашей страницы:
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Your title">
<meta property="og:description" content="One clear sentence.">
<meta name="twitter:card" content="summary_large_image">
Строка twitter:card со значением summary_large_image — это то, что даёт вам большую карточку в X вместо крошечного превью. Абсолютные URL (с https://) важны — относительные пути часто не разрешаются, когда парсер запрашивает вашу страницу.
После деплоя проверьте. Вставьте свой URL в отладчик превью ссылок платформы (Sharing Debugger у Facebook, Post Inspector у LinkedIn), чтобы убедиться, что картинка грузится, и сбросить закешированную старую версию. Платформы агрессивно кешируют превью, так что если вы обновили картинку, а всё ещё видите старую, кнопка повторного парсинга в отладчике — это и есть решение.
Сделайте её, а не загружайте
Всё это работает в вашем браузере — изображение собирается локально через Canvas и никогда не загружается на сервер. Это бесплатно, без регистрации, без водяного знака поперёк вашей карточки, и работает офлайн после первого визита. Сгенерируйте 1200×630, пропишите мета-теги, разок прогоните через отладчик — и ваши ссылки начнут отрабатывать свой вес.