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

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

Розміри - це легка частина. Зазвичай ламаються не вони. Ламається текст, що стоїть надто близько до краю, який одна з платформ обрізає, зображення, що ніколи не оновлюється, бо краулер закешував старе кілька місяців тому, або картка без картинки взагалі, бо файл розміром 4 МБ лежав на повільному origin. Питання про розмір 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 checker завантажує 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 зображення перестануть бути тим, про що ви думаєте. Це правильна кількість уваги до них.

Читайте серію cornerstone

Цей допис стоїть у кластері посібників. Для прев'ю, що не працюють зовсім, а не погано обрізаються, прев'ю посилання не показується - виправлення платформа за платформою, а як зробити клікабельне посилання охоплює шар під ним.

Читайте також у блозі

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