Open Graph изображения: размеры, советы и примеры кода
Изображения Open Graph управляют тем, что отображается при публикации вашей страницы в Facebook, Twitter или LinkedIn. Неправильное или отсутствующее изображение снижает кликабельность ещё до посещения сайта.
В этом руководстве рассмотрены оптимальные размеры, принципы дизайна, HTML-разметка и инструменты тестирования — всё для правильного отображения превью в соцсетях на любых платформах.
Содержание
Что такое изображения Open Graph и почему они важны
Open Graph — протокол от Facebook, позволяющий управлять отображением страниц при публикации в соцсетях. Метатег og:image указывает платформам, какое изображение использовать в превью.
При публикации ссылки в Facebook, Twitter или LinkedIn платформа получает метаданные Open Graph и формирует карточку превью с изображением, заголовком и описанием — это часто единственное, что видит пользователь перед кликом.
Качественное изображение Open Graph значительно повышает кликабельность. Отсутствие или неправильный размер приводит к некорректному превью, обрезанному миниатюре или безликой заглушке.
Кликабельность
Страницы с правильно подобранным и контрастным изображением OG стабильно получают больше кликов, чем без изображения или с низкокачественным вариантом.
Больше кликов с каждой публикации
Узнаваемость бренда
Единый визуальный стиль в каждом опубликованном ссылке формирует доверие и узнаваемость бренда ещё до посещения сайта.
Единый стиль на всех платформах
SEO-сигнал
Активность в соцсетях благодаря привлекательным превью создаёт обратные ссылки и сигналы трафика, укрепляющие позиции в органическом поиске.
Косвенная выгода для ранжирования
Требования к изображениям для каждой платформы
Каждая соцсеть рекомендует свои размеры, соотношения сторон и ограничения по весу файлов. Соблюдение этих параметров предотвращает обрезку, искажения и появление заглушек.
| Платформа | Рекомендуемый размер | Соотношение сторон | Максимальный размер файла | Формат |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
Универсальный безопасный размер: 1200 × 630 пикселей
Изображение 1200 × 630 пикселей с соотношением 1.91:1 подходит для Facebook, LinkedIn, WhatsApp, Slack и большинства других платформ. В Twitter используется обрезка 16:9 — размещайте важное в центре, чтобы избежать обрезки.
Принципы дизайна эффективных изображений Open Graph
Изображение отображается в маленьком размере в лентах соцсетей. Сначала проектируйте миниатюру, а не полноразмерное изображение.
Размещайте главный элемент — логотип, заголовок или ключевую иллюстрацию — в центральных 80% изображения. Платформы часто обрезают края, и важное может быть скрыто.
Высокая контрастность
Используйте сильный контраст между текстом, передним планом и фоном. Низкоконтрастные изображения теряются в насыщенных лентах рядом с яркими публикациями конкурентов.
Читаемость в любом размере
Чёткость типографики
Если на изображении есть текст, используйте крупные жирные шрифты (эквивалент 36px и выше) и не более двух строк. Мелкий текст становится нечитаемым в миниатюре.
Сохраняйте читаемость в миниатюре
Последовательность бренда
Добавляйте логотип или фирменные цвета в каждое изображение OG. Каждая публикация — это впечатление о бренде, даже если по ссылке не переходят.
Каждая публикация — точка контакта с брендом
Выбор правильного формата изображения
Для фотографий используйте JPEG, для графики с текстом, логотипами или прозрачностью — PNG. WebP поддерживается всё шире, но ещё не во всех соцсетях.
| Формат | Лучше всего для | Поддержка соцсетей | Типичный размер файла | Рекомендация |
|---|---|---|---|---|
| JPEG | Фотографии, градиенты | Универсальный | 60 – 150 KB | Стандарт для фото |
| PNG | Текст, логотипы, прозрачность | Универсальный | 100 – 300 KB | Стандарт для графики |
| WebP | Оба формата, меньший размер | Twitter, Slack (не все) | 40 – 120 KB | Дополнение |
Оптимальный размер изображения OG — 100–200 КБ. Чем меньше, тем лучше, но не переусердствуйте с сжатием, чтобы не было пикселизации. WhatsApp ограничивает 300 КБ — если важен WhatsApp, держите файлы меньше этого.
Подробнее о компромиссах форматов изображений смотрите в руководством по оптимизации изображений для сайта Для конвертации существующих изображений руководство JPG в WebP описывает повседневный процесс.
HTML-разметка и метатеги
Размещайте метатеги Open Graph внутри элемента <head> вашего HTML. Тег og:image должен содержать абсолютный URL — относительные пути не поддерживаются соцсканерами.
Минимальный набор тегов: og:title, og:description, og:image и og:url. Тег twitter:card активирует формат большой карточки в Twitter.
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">Всегда указывайте og:image:width и og:image:height. Без них платформам приходится загружать и анализировать изображение перед показом превью, что замедляет загрузку и повышает риск появления заглушки.
Если вы используете Blazor, компонент метаданных SEO для Blazor автоматически обрабатывает все теги Open Graph с учётом локализации URL.
Тестирование и отладка изображений Open Graph
Соцсети активно кэшируют метаданные Open Graph. После обновления тегов или изображения используйте официальные инструменты отладки, чтобы принудительно обновить кэш и проверить корректность превью.
Отладчик публикаций Facebook
Введите URL на developers.facebook.com/tools/debug, чтобы получить свежие метаданные, увидеть выбранное Facebook изображение и устранить предупреждения или ошибки.
Принудительное обновление кэша
Проверка карточек Twitter
Используйте cards-dev.twitter.com/validator для точного просмотра вашей карточки Twitter. Нажмите «Preview card», чтобы увидеть миниатюру, заголовок и описание в формате карточки.
Предпросмотр перед публикацией
Инспектор публикаций LinkedIn
Инспектор публикаций LinkedIn на linkedin.com/post-inspector обновляет кэш LinkedIn для вашего URL и показывает, как будет выглядеть превью с текущими метаданными.
Обновить кэш LinkedIn
Распространённые ошибки и их исправление
Большинство проблем с изображениями Open Graph связаны с повторяющимися ошибками. Знание их помогает быстрее устранять неполадки.
- Относительные URL. Соцсканеры не обрабатывают относительные пути. Значение og:image должно быть полным абсолютным URL с протоколом и доменом (https://yourdomain.com/path/image.jpg).
- Отсутствуют теги ширины и высоты. Без og:image:width и og:image:height платформам приходится загружать и анализировать изображение перед созданием превью. Добавьте оба тега, чтобы избежать этого.
- Изображения за авторизацией. Сканеры не могут получить доступ к изображениям, требующим входа или заблокированным robots.txt. Изображение OG должно быть общедоступным без авторизации.
- Неправильное соотношение сторон. Изображение с соотношением, сильно отличающимся от 1.91:1, будет обрезано или показано с чёрными полосами. Всегда проверяйте соотношение перед публикацией.
- Устаревший кэш платформы. Обновление файла изображения без изменения имени или добавления параметра запроса приводит к показу старой версии из кэша. Измените имя файла или используйте отладчик платформы для обновления.
Автоматизация создания изображений Open Graph
Для небольших сайтов и блогов достаточно одного статического изображения OG на страницу. Для крупных изданий или приложений с уникальным превью на каждой странице целесообразна динамическая генерация.
Динамическая генерация OG изображений создаёт уникальное изображение при запросе или сборке на основе заголовка, описания или другого контента страницы. Это обеспечивает уникальное и брендированное превью без ручного создания.
Когда автоматизировать
Автоматизируйте, если у вас много страниц с уникальными изображениями, часто меняющийся контент или ручное создание не справляется с объёмом.
Большой объём или динамический контент
Когда использовать статические изображения
Для большинства страниц — лендингов, руководств и вечнозелёных статей — тщательно подготовленное статическое изображение лучше по качеству и согласованности бренда, чем сгенерированное.
Подход с приоритетом качества
Популярные инструменты для динамической генерации: Cloudinary (преобразования через URL), Vercel OG (рендеринг React/HTML на краю), Puppeteer и Playwright для скриншотов в любых технологиях.