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

Одне зображення розміром 1200 на 630 пікселів, у PNG або JPEG, вагою до приблизно 1 МБ, з важливим вмістом усередині центральних 1080 на 600. Цей файл коректно відображається на Facebook, LinkedIn, X, Slack, Discord, WhatsApp та iMessage - і це вся відповідь на питання про розмір зображення Open Graph для майже кожного сайту.

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

Розмір і чому саме такий

Співвідношення 1.91:1 походить із картки посилань Facebook, і воно прижилося, бо всі інші прийняли сумісний макет замість того, щоб винаходити власний. Сама специфікація Open Graph взагалі нічого не каже про пікселі; вона визначає og:image як URL і залишає рендеринг на розсуд споживача, і саме тому навколо одного зручного розміру сформувався фактичний стандарт.

Власні рекомендації Facebook щодо зображень для поширення встановлюють мінімум 200 на 200 і радять більший файл для дисплеїв високої роздільної здатності, а X окремо документує розмітку карток - це єдине місце, де потрібен специфічний для платформи тег, а не специфічний для платформи файл.

Безпечна зона, про яку ніхто не згадує

Картка рідко показується в тому співвідношенні сторін, у якому ви її створили. Чат-застосунки обрізають до квадрата для мініатюри, деякі стрічки зрізають краї на вузьких вьюпортах, а заокруглений кут з'їдає останні кілька пікселів логотипа в кутку.

Тримайте все, що обов'язково має вціліти, усередині центральних 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 має бути абсолютним, включно зі схемою та хостом, бо сканер зчитує тег поза контекстом сторінки і не має відносно чого розв'язувати відносний шлях. Ширина та висота дозволяють платформі зарезервувати правильний простір ще до завантаження файлу - це і є різниця між карткою, що з'являється миттєво, і тією, що перебудовується на льоту. А og:image:alt - це тег доступності, який нічого не коштує і відсутній майже всюди.

Чому ваше нове зображення не показується

Саме через це найчастіше пишуть у підтримку. Ви виправили зображення, бачите новий файл за його URL, а картка досі показує дизайн з минулого кварталу.

Соціальні сканери кешують агресивно, і роблять це без жодних натяків на делікатність. Щойно URL проскановано, саме збережена версія відображається при наступних поширеннях, іноді тижнями, і жодна ваша правка HTML не підказує їм подивитись ще раз. Три способи виходу, у порядку, в якому я б їх пробував:

• Примусово повторно проскануйте власним інструментом платформи: Facebook Sharing Debugger і LinkedIn Post Inspector обидва повторно завантажують сторінку на запит.
• Опублікуйте зображення під новою назвою файлу - це інший URL, тому кешу для нього взагалі не існує. Це найнадійніший варіант.
• Змініть саму URL-адресу, якою ви ділитесь, що тривіально просто, коли те, чим ви ділитесь, - це коротке посилання під вашим контролем, а не постійна адреса сторінки.

Перш ніж щось публікувати, перевірка Open Graph показує картку саме такою, якою її побудує сканер - це займає десять секунд і рятує від незручного повторного поширення.

Превью, коли ви ділитесь коротким посиланням

Коротке посилання не має власних тегів Open Graph і не потребує їх. Сканер слідує переадресації, потрапляє на сторінку призначення і будує картку з тегів там, а це означає, що скорочений URL успадковує те превью, яке має цільова сторінка. Якщо картка неправильна - неправильні теги на сторінці призначення.

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

Якщо хочете мати посилання, картку та дані про кліки в одному місці, створіть робочий простір на власному домені і перевіряйте картку інструментом до розсилки, а не після.

Контрольний список, який варто тримати під рукою

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

Налаштуйте ці п'ять пунктів правильно один раз, зашаблонуйте їх у head сторінки - і зображення Open Graph перестануть бути тим, про що ви думаєте. І це саме та кількість уваги, яку вони заслуговують.

Читайте серію-фундамент

Ця стаття входить до кластера tutorials. Якщо превью повністю не працює, а не просто погано обрізане, превью посилання не відображається - це виправлення для кожної платформи окремо, а як зробити клікабельне посилання охоплює рівень, що лежить нижче.

Ще статті блогу

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