Размер Open Graph картинки: один файл для всех платформ

Одна картинка 1200 на 630 пикселей, в PNG или JPEG, до примерно 1 МБ, с важным содержимым внутри центральных 1080 на 600. Этот файл отвечает опубликованным спецификациям Meta и LinkedIn, и это весь ответ на вопрос о размере Open Graph картинки почти для любого сайта.

Размеры - лёгкая часть. И ломается обычно не она. Ломается текст, стоящий слишком близко к краю, который одна из платформ обрезает, картинка, которая не обновляется, потому что краулер закэшировал старую месяцы назад, или карточка без картинки вовсе, потому что файл весил 4 МБ на медленном источнике. Вопрос о размере OG-картинки - на деле три вопроса, и только один из них о пикселях. Этот гид охватывает спецификацию, безопасную зону, поведение кэша, из-за которого люди думают, что их теги неверны, и то, как превью определяется, когда делятся короткой ссылкой. Если превью отсутствует целиком, а не плохо обрезано, диагностика в материале превью ссылки не показывается.

Размер и почему именно такой

Соотношение 1.91:1 встречается и в документации Meta, и в документации LinkedIn. Сам протокол Open Graph (дата обращения 2026-10-25) размера не задаёт; его примеры - 400x300 и 300x300, а og:image:alt он просит всякий раз, когда вы указываете картинку. Де-факто стандарт сложился вокруг цифр платформ.

Источники: рекомендации Meta по картинкам и справка LinkedIn по превью ссылок. X документирует свои карточки отдельно, но эту документацию мы загрузить не смогли, поэтому проверьте её, прежде чем полагаться на размер для X.

Безопасная зона, о которой никто не говорит

Карточку редко показывают в том соотношении, в котором вы её рисовали. На странице самой LinkedIn сказано, что квадратные и вертикальные картинки могут обрезаться, а всё уже 401 px становится маленькой миниатюрой. Зона 1080 на 600 ниже - наше практическое правило, а не цифра платформ.

Всё, что должно уцелеть, держите внутри центральных 1080 на 600 по центру, а внешнюю полосу считайте декором, которым можно пожертвовать. На практике это значит: заголовок стоит по центру слева, а не вплотную к краю, логотип живёт внутри поля, а не в углу, и тонкой рамки нет, потому что рамка - единственный элемент дизайна, который выглядит сломанным в момент обрезки.

Контраст тоже важен. В одних клиентах карточки лежат на светлом фоне, в других на тёмном, поэтому картинка, которая полагается на окружение для отделения, может потерять края.

Теги вокруг картинки

Работу делают четыре тега. Два из них люди пропускают.

<meta property="og:image" content="https://example.com/og/spring-launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
  property="og:image:alt"
  content="Spring launch: 30 percent off through May"
/>
<meta name="twitter:card" content="summary_large_image" />

Используйте абсолютный URL со схемой и хостом, поскольку краулер читает тег без контекста страницы. По словам Meta, ширина и высота позволяют её краулеру отрисовать картинку при первой публикации, не загружая её заранее. А og:image:alt - тег доступности, который ничего не стоит и почти везде отсутствует.

Почему новая картинка не показывается

Именно это порождает обращения в поддержку. Вы исправили картинку, видите новый файл по его URL, а карточка всё ещё показывает дизайн прошлого квартала.

Документация Meta говорит, что её краулер кэширует картинки по URL и что изменение картинки не обновляет превью существующих публикаций. Три выхода, в том порядке, в котором я бы их пробовал:

• Принудительно пересканируйте через Sharing Debugger Facebook. У LinkedIn тоже есть Post Inspector, хотя прочитанная нами справка не описывает его кэширование.
• Опубликуйте картинку под новым именем файла: это другой URL без записи в кэше. Meta рекомендует именно это, и это надёжный способ.
• Измените сам URL публикации, что тривиально легко, когда вы делитесь короткой ссылкой, которую контролируете, а не постоянным адресом страницы.

Перед публикацией бесплатная проверка Open Graph загружает URL и показывает найденные заголовок, описание, картинку, название сайта и превью карточки Twitter. Она читает только теги. Размеры картинки она не сообщает и кэш платформ не сбрасывает.

Превью, когда вы делитесь короткой ссылкой

У короткой ссылки собственных Open Graph тегов нет, и они ей не нужны. Edge Elido отвечает краулерам обычным редиректом, потому что превью ссылок в чатах должны за ним следовать, и не считает эти запросы кликами (фильтр ботов - список user-agent, поэтому часть скриптовых запросов может проскочить). Карточка строится по тегам страницы назначения. Если она неверна, исправляйте страницу назначения.

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

Один пробел: в Elido нет переопределения OG-картинки или заголовка для отдельной ссылки, поэтому короткая ссылка не может нести карточку, отличную от страницы назначения. У страниц микросайтов поле OG-картинки есть. Если вам нужны карточки на уровне ссылки, скажите нам; это в нашем бэклоге.

Чтобы получить ссылку и данные о кликах в одном месте, заведите рабочее пространство на собственном домене и проверьте карточку перед рассылкой.

Чеклист, который стоит сохранить

• 1200 на 630, PNG или JPEG, абсолютный HTTPS URL, до 1 МБ по нашей привычке. Это и есть всё решение по размеру OG-картинки.
• Ничего важного вне центральных 1080 на 600 (наше практическое правило), никаких тонких рамок.
• Теги og:image:width, og:image:height и og:image:alt на месте.
• twitter:card равен summary_large_image, если хотите большую карточку в X.
• Новая картинка - новое имя файла, затем пересканирование, и только потом анонс.

Сделайте эти пять пунктов правильно один раз, вшейте их в шаблон head страницы, и Open Graph картинки перестанут быть тем, о чём вы думаете. Это и есть правильный объём внимания к ним.

Читайте серию материалов-основ

Этот материал входит в кластер руководств. Для превью, которые не работают совсем, а не плохо обрезаются, превью ссылки не показывается даёт исправления по платформам, а как сделать кликабельную ссылку описывает слой под ним.

Связанные материалы в блоге

• Превью ссылки не показывается? Причины и как исправить
• Сократить ссылку для X (Twitter): что с ней делает t.co
• Как отслеживать ссылки из соцсетей: клики по каналам
• Что такое брендированная ссылка и почему она конвертирует лучше
• Как перенаправить URL: шесть способов и когда подходит каждый
• Короткие ссылки на собственном домене: DNS, TLS и edge