Изображения Open Graph для сайта приложения

Обновлено 30 октября 2026 г.

Изображение Open Graph — это картинка, которая появляется, когда кто-то делится ссылкой на ваш сайт в X, LinkedIn, Facebook, Slack, iMessage и большинстве других приложений. Сделайте его размером 1200 × 630 пикселей (1,91:1), задайте тегом og:image, добавьте twitter:card со значением summary_large_image, чтобы X показывал его крупно, держите текст подальше от краёв и проверьте превью, прежде чем делиться ссылкой.

Что такое изображение Open Graph

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

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

Размер: 1200 × 630

Сам протокол Open Graph не задаёт размер в пикселях. На практике 1200 × 630, пропорции 1,91:1, почти на всех платформах показывается карточкой во всю ширину, а 1200 × 627 в LinkedIn настолько близки, что то же изображение подходит и там. Используйте этот размер и экспортируйте JPEG или PNG размером не больше нескольких мегабайт, чтобы он быстро загружался, когда приложение его запрашивает.

Оставьте безопасную зону

Разные приложения слегка по-разному подрезают изображение, а некоторые показывают его меньше, как миниатюру. Чтобы оно везде читалось:

Держите текст и устройство не ближе 60–80 пикселей к каждому краю.
Размещайте главное в центральных двух третях.
Используйте крупный шрифт: заголовок не длиннее пяти слов, высотой не меньше 60 пикселей.
Не повторяйте на изображении заголовок страницы. Карточка всё равно показывает его под картинкой.

Какие теги добавить

Добавьте их в <head> каждой страницы. Протокол Open Graph называет обязательными og:title, og:type, og:image и og:url и просит указывать og:image:alt всякий раз, когда вы задаёте изображение.

Тег	Пример значения
`og:title`	YourApp – Следите за привычками
`og:description`	Одно предложение о том, что делает приложение.
`og:type`	website
`og:url`	https://yourapp.com/
`og:image`	https://yourapp.com/og.jpg (полный адрес, а не относительный путь)
`og:image:width` / `og:image:height`	1200 / 630
`og:image:alt`	Главный экран приложения на iPhone, на синем фоне.
`twitter:card`	summary_large_image

В HTML это выглядит так:

<meta property="og:image" content="https://yourapp.com/og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The app's home screen on an iPhone">
<meta name="twitter:card" content="summary_large_image">

Если собственных версий twitter: нет, X берёт заголовок, описание и изображение из тегов Open Graph, поэтому обычно единственный нужный тег специально для X — это twitter:card. Без него X может показать маленькую карточку или не показать никакой.

Своё изображение для каждой страницы

Главной странице достаётся главное изображение. Другие страницы могут иметь свои:

Страницы функций: экран этой функции в рамке.
Посты блога и руководства: заголовок поста на фирменном фоне или скриншот, о котором идёт речь.
Журнал изменений или заметки о выпуске: новый экран из этого выпуска.

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

Проверьте превью

Приложения кэшируют превью, иногда на несколько дней, поэтому проверьте всё, прежде чем широко делиться ссылкой.

Откройте адрес изображения в браузере. Если оно не загружается публично, его не покажет ни одно приложение.
Sharing Debugger от Facebook показывает, что Facebook считывает с вашей страницы, а кнопка Scrape Again обновляет закэшированное превью.
Post Inspector от LinkedIn делает то же самое для LinkedIn.
X: вставьте ссылку в новый пост, не отправляя его. Редактор покажет карточку, которую использует X.
«Сообщения» и Slack: отправьте ссылку себе.

Если упорно показывается старое изображение, измените имя файла изображения (например, на og-2.jpg) и обновите тег. Новый адрес обходит большинство кэшей.

Частые ошибки

Относительный путь к изображению. /og.jpg работает в браузере, но не в карточке превью. Используйте полный адрес с https://.
Изображение закрыто от роботов. Если ваш robots.txt или страница входа блокирует изображение, приложения не смогут его загрузить.
Мелкий текст. В ветке чата карточка может показываться в треть своего размера. Всё, что в оригинале ниже примерно 40 пикселей, становится нечитаемым.
Один высокий скриншот телефона. Обрезанный до 1,91:1, скриншот телефона показывает полоску строки состояния и почти ничего больше. Вместо этого разместите его на широком холсте.

Сделайте изображение с устройством в рамке

Для приложения самое сильное изображение Open Graph — обычно само приложение: лучший экран в рамке устройства, на фирменном цвете, с коротким заголовком. Поскольку 1,91:1 — широкий формат, один телефон в центре оставляет много места. Используйте его для заголовка рядом с телефоном или покажите два-три экрана в ряд.

В FeatureFrame есть готовый холст 1,91:1. На Mac:

Перетащите скриншот. FeatureFrame определит iPhone или iPad по размеру и поместит скриншот в 3D-модель этого устройства.
Выберите холст 1,91:1, а в качестве фона — сплошной цвет, градиент или своё изображение.
Слегка наклоните устройство или добавьте до трёх скриншотов в расположении «Строка».
Экспортируйте в 720p в формате JPEG. Холст 1,91:1 получается размером 1376 × 720 — той же формы, что 1200 × 630, и чуть чётче. Используйте его как есть или уменьшите до точного размера.

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

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