Стандартный размер OG image — 1200×630 пикселей с соотношением сторон 1.91:1. Используйте этот единственный размер — и превью ваших ссылок будут корректно отображаться в Facebook, X (Twitter), LinkedIn, Slack, Discord, WhatsApp и Telegram.
Это короткий ответ. Остальная часть руководства разбирает детали, на которых обычно и спотыкаются: размеры по платформам, безопасную зону для текста, лимиты веса файла и метатеги, которые сообщают каждой платформе, где лежит ваша картинка.
Один размер, который работает везде
Если запомнить только одно число, пусть будет это:
| Свойство | Рекомендуемое значение |
|---|---|
| Размеры | 1200 × 630 px |
| Соотношение сторон | 1.91:1 |
| Формат | PNG или JPG |
| Вес файла | До 1 MB (жёсткие лимиты выше, но лёгкие файлы загружаются быстрее) |
| URL | Абсолютный HTTPS-URL |
Каждая крупная платформа либо использует 1.91:1 нативно, либо аккуратно кадрирует из этой пропорции. Дизайн ровно под 1200×630 означает одну картинку на страницу вместо пяти.
Размер OG image по платформам
Платформы немного различаются в том, что они предпочитают и что требуют:
| Платформа | Рекомендуемый размер | Примечания |
|---|---|---|
| 1200 × 630 | Минимум 200×200; картинки меньше 600×315 показываются маленькой миниатюрой вместо большой карточки | |
| X (Twitter) | 1200 × 630 | Карточки summary_large_image кадрируются ближе к 2:1 — держите важный контент по центру |
| 1200 × 627 | 1.91:1; фактически та же картинка, что и для Facebook | |
| Discord | 1200 × 630 | Использует og:image для больших эмбедов ссылок |
| Slack | 1200 × 630 | Развороты ссылок берут данные напрямую из тегов Open Graph |
| 1200 × 630 | Держите файл лёгким (заметно меньше 300 KB), иначе превью может не загрузиться | |
| Telegram | 1200 × 630 | Читает og:image; кэширует агрессивно |
| 1000 × 1500 | Исключение — пины предпочитают вертикальный формат 2:3, поэтому для Pinterest готовьте отдельные картинки |
Вывод: за пределами Pinterest одна картинка 1200×630 закрывает всё.
Безопасная зона: где должен находиться текст
Платформы кадрируют по-разному: X тяготеет к 2:1, некоторые мобильные вёрстки срезают края. Чтобы заголовок оставался читаемым везде:
- Держите весь текст и логотипы внутри центральной области 1120 × 560 (примерно 5% отступа с каждой стороны).
- Исходите из того, что внешние края могут быть обрезаны, — никогда не прижимайте важный контент вплотную к границе.
- Тестируйте с реальным заголовком в реальном размере: текст, который выглядит нормально в дизайн-инструменте, в масштабе ленты часто оказывается слишком мелким. Практическое правило — держите заголовки 48px или крупнее на холсте 1200×630.
Наши бесплатные шаблоны уже содержат эти отступы, поэтому всё, что вы наберёте, останется внутри безопасной зоны.
Вес файла, формат и разрешение
- Формат: PNG для графики с большим количеством текста (чёткие края), JPG для фотографических фонов. WebP уже работает на крупных платформах, но PNG/JPG остаются самым надёжным выбором для менее популярных приложений.
- Вес файла: Facebook допускает до 8 MB, X — до 5 MB, но краулеры отваливаются по таймауту на медленных картинках. Практическая цель — держаться в пределах 1 MB (и меньше 300 KB для надёжной работы в WhatsApp).
- Разрешение: 1200×630 в 1x достаточно. Удвоение до 2400×1260 «под Retina» редко улучшает отображение в ленте и вдвое увеличивает вес файла.
Метатеги, которые заставляют всё работать
Размеры — только половина дела: платформы находят вашу картинку через метатеги Open Graph в <head> страницы:
<meta property="og:image" content="https://example.com/og/launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Launch day: v2.0 — changelog" />
<meta name="twitter:card" content="summary_large_image" />Три детали важнее, чем кажутся:
og:imageдолжен быть абсолютным HTTPS-URL — относительные пути молча игнорируются большинством краулеров.og:image:widthиog:image:heightпозволяют платформам зарезервировать нужное место до загрузки картинки, поэтому уже первый репост отрисуется полной карточкой, а не пустой.twitter:cardсо значениемsummary_large_image— именно то, что превращает превью в X из маленького квадрата в карточку на всю ширину.
Частые ошибки (и быстрые исправления)
- Картинка меньше 600×315. Facebook понижает её до крошечной миниатюры сбоку. Экспортируйте в 1200×630.
- Текст прижат к краям. Кадрирование X его срезает. Держите текст в центральной безопасной зоне.
- В превью показывается старая картинка. Платформы кэшируют агрессивно — решение смотрите в нашем руководстве по проверке и обновлению OG image.
- URL относительный или закрыт авторизацией. Краулеры не могут получить
/images/og.pngили что-либо, требующее входа. Используйте публичный абсолютный URL. - Одна универсальная картинка на весь сайт. Страницы с конкретными, релевантными OG image стабильно собирают больше кликов, чем переиспользуемая карточка с логотипом.
Создайте OG image правильного размера за секунды
Можно самостоятельно настроить артборд 1200×630, направляющие безопасной зоны и пресеты экспорта — а можно пропустить всю эту подготовку. Наш бесплатный генератор OG image стартует с шаблонов, уже подогнанных под 1200×630 (и 1500×500 для обложек X), удерживает текст внутри безопасной зоны и экспортирует оптимизированный PNG, готовый для ваших метатегов. Без регистрации и водяных знаков.
FAQ
Какой размер OG image лучше всего?
1200×630 пикселей (соотношение сторон 1.91:1). Такая картинка отображается большой карточкой в Facebook, X, LinkedIn, Slack, Discord, WhatsApp и Telegram без дополнительных вариантов.
Какой минимальный размер OG image?
Facebook принимает картинки вплоть до 200×200, но всё, что меньше 600×315, теряет формат большой карточки. Считайте 600×315 практическим минимумом, а 1200×630 — целью.
Нужна ли отдельная картинка для X (Twitter)?
Обычно нет. Картинка 1200×630 с контентом по центру подходит для карточек summary_large_image. Отдельные картинки для X имеют смысл, только если ваш дизайн размещает важный контент у верхнего или нижнего края.
Влияет ли OG image на SEO?
На позиции в выдаче напрямую — нет, но она сильно влияет на кликабельность, когда ссылкой делятся, а социальное распространение подпитывает обнаружение контента. Понятное брендированное превью — один из самых дешёвых способов поднять CTR.
