Розмір зображення Open Graph і OG-теги: повний посібник
Коли посилання вставляють у Facebook, LinkedIn, X, Telegram, Slack чи WhatsApp, платформа не робить знімок сторінки. Її робот завантажує HTML, читає кілька тегів Open Graph у <head> і складає з них картку: заголовок, короткий опис і зображення. Якщо тегів немає або вони заповнені неправильно, платформа вгадує сама — і зазвичай показує обрізаний логотип або картку взагалі без зображення. Нижче — які теги потрібні, якого розміру робити OG-зображення і як змусити соцмережу забути старе прев'ю.
Коротко: розмір зображення для Open Graph
Зробіть одне зображення 1200×630 пікселів (співвідношення 1.91:1) у JPG або PNG і не роздувайте вагу файлу. Таке зображення дає велику картку у Facebook, LinkedIn та X, а месенджери самі зменшують його під свої прев'ю. Заголовок і логотип тримайте в центральній зоні: частина застосунків обрізає краї або показує квадратну мініатюру.
| Платформа | Що радить документація |
|---|---|
| Для великої картки — від 1200×630; зображення, менші за 600×315, показуються в малому форматі; абсолютний мінімум 200×200; файл до 8 МБ | |
| 1.91:1, рекомендовано 1200×627 | |
X, summary_large_image | 2:1, мінімум 300×157, файл до 5 МБ; JPG, PNG, WebP або GIF (лише перший кадр) |
X, summary | Квадратна мініатюра 1:1, мінімум 144×144 |
Пропорції 2:1 в X та 1.91:1 в інших настільки близькі, що зображення 1200×630 підходить усім: X зріже кілька пікселів згори та знизу. Платформи час від часу змінюють верстку карток, тож вважайте таблицю відправною точкою і перед великим запуском перевіряйте картку в офіційному інструменті кожної соцмережі.
Які теги Open Graph обов'язкові
Протокол Open Graph (ogp.me) визначає чотири обов'язкові властивості: og:title, og:type, og:image і og:url. На практиці до них додають опис і тип картки X. Повний набір для статті виглядає так:
<meta property="og:title" content="Як вибрати бігові кросівки при плоскостопості"> <meta property="og:description" content="П'ять перевірок перед покупкою — поради фізіотерапевта."> <meta property="og:type" content="article"> <meta property="og:url" content="https://example.com/blog/krosivky-ploskostopist"> <meta property="og:image" content="https://example.com/img/og/krosivky-1200x630.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Ноги бігуна на біговій доріжці в нейтральних кросівках"> <meta property="og:site_name" content="Example Running"> <meta property="og:locale" content="uk_UA"> <meta name="twitter:card" content="summary_large_image">
| Тег | Статус | На що зважати |
|---|---|---|
og:title | Обов'язковий | Пишеться під стрічку: хвіст « | Бренд» не потрібен, домен картка й так покаже |
og:type | Обов'язковий | website для головної та розділів, article для статей |
og:image | Обов'язковий | Повна адреса з https://, яку робот завантажить без cookies і входу |
og:url | Обов'язковий | Канонічна адреса цієї сторінки: Facebook будує картку за сторінкою, на яку він вказує |
og:description | Бажаний | Одне-два речення; деякі застосунки показують лише перший рядок |
og:image:width, og:image:height | Бажані | Дають Facebook показати картку вже під час першого поширення, не чекаючи завантаження зображення |
og:image:alt | Бажаний | Текстовий опис зображення для екранних читачів |
og:site_name, og:locale | За бажанням | Назва бренду та мова, наприклад uk_UA або pl_PL |
Теги Open Graph пишуть з атрибутом property, теги X — з name. Багато парсерів приймають обидва варіанти, але якщо триматися домовленості, несподіванок не буде. Писати розмітку вручну не обов'язково: генератор мета-тегів збирає блок Open Graph і X разом із title та description.
twitter:card і що підставляється замість відсутніх тегів
X спершу читає власні теги twitter:*. Якщо twitter:title, twitter:description або twitter:image немає, він бере og:title, og:description і og:image. Отже, сторінці з повним Open Graph потрібен лише один додатковий рядок — twitter:card: summary_large_image для великого зображення або summary для маленької квадратної мініатюри. Окремі twitter:* мають сенс, лише якщо в X потрібен інший текст чи інше зображення.
LinkedIn, Telegram, Slack, Discord і WhatsApp теж працюють з Open Graph. Якщо тегів OG немає зовсім, платформа може взяти <title>, meta description і перше придатне зображення на сторінці — так у картці й опиняються піксель лічильника чи логотип із підвалу.
Чому адреса зображення має бути абсолютною
Відносний шлях на кшталт /img/cover.jpg працює в браузері, бо браузер знає, на якій він сторінці. Роботи соцмереж розв'язують його ненадійно, і багато з них просто показують картку без зображення. Завжди пишіть повну адресу з протоколом. І ще три перевірки поруч:
- Без входу та cookies. Зображення має відкриватися в приватному вікні. Захист від хотлінку, перевірка файрволу чи підписане посилання з терміном дії ламають подальші поширення.
- Без JavaScript. Роботи соцмереж, як правило, не виконують скрипти. Якщо односторінковий застосунок підставляє мета-теги на клієнті, робот бачить порожній шаблон. Віддавайте теги із сервера або робіть пререндер.
- Робот не заблокований.
Disallowу robots.txt чи агресивний фільтр ботів віддають роботу сторінку помилки, і картка складається з неї.
Як платформи кешують прев'ю і як його оновити
Кожна соцмережа завантажує адресу один раз і певний час зберігає результат. Після виправлення тегів сторінка вже правильна, але стара картка з'являтиметься, доки платформа її не перечитає. Офіційні способи це пришвидшити:
- Facebook (і посилання в Messenger та директі Instagram): відкрийте Sharing Debugger на developers.facebook.com, вставте адресу й натисніть Scrape Again. Там же видно, які теги він прочитав і які є попередження.
- LinkedIn: проженіть адресу через Post Inspector (linkedin.com/post-inspector) — під час перевірки LinkedIn завантажує сторінку заново.
- Telegram: надішліть посилання офіційному боту @WebpageBot. Він оновлює прев'ю, яке Telegram зберігає для цієї адреси; якщо перша відповідь іще стара, надішліть посилання ще раз.
- X: публічного інструмента для скидання кешу зараз немає. Звичний обхідний шлях — поділитися адресою з нешкідливим параметром на кшталт
?v=2: для X це вже нова URL-адреса. - WhatsApp, Slack, Discord: офіційної кнопки оновлення, наскільки нам відомо, немає. Зміни підтягуються з часом, а на практиці знову рятує новий параметр в адресі.
cover-v2.jpg) і оновіть og:image.Типові помилки
- Одна картка на всі сторінки. Тема виводить усюди заголовок і логотип головної — і всі поширення виглядають однаково. Генеруйте
og:title,og:descriptionіog:imageдля кожної сторінки. - og:url вказує на головну. Facebook вважає
og:urlканонічним і показує картку головної для кожної статті. - Дублі тегів.
og:imageвиводять і SEO-плагін, і тема. Зазвичай перемагає перший тег, і це може бути не той. - Дрібний текст біля країв. На телефоні картка часто займає кілька сотень пікселів завширшки — текст розміром 20 пікселів стає нечитабельним.
- Зображення замале. Менше за 600×315 — і Facebook перемикається на малий формат із мініатюрою збоку.
- Перевірка лише в браузері. Браузер показує нову сторінку, а соцмережі пам'ятають стару. Після правок завжди перечитуйте адресу.
Як перевірити теги
Вставте адресу у налагоджувач Open Graph. Він завантажує сторінку з нашого сервера без виконання JavaScript — так само, як роботи соцмереж, — і показує наближені картки Facebook, X і LinkedIn, список знайдених і відсутніх тегів, реальний розмір зображення в пікселях і попередження про відносні адреси. Прев'ю близькі до справжніх, але останнє слово за поточним дизайном соцмережі та її кешем.
На позиції в Google Open Graph не впливає: сніпет пошуку будується з <title>, meta description і вмісту сторінки. Цей бік перевіряйте окремо — аналізатором мета-тегів і прев'ю видачі. Докладніше — у статтях перевірка мета-тегів і прев'ю у видачі та прев'ю сніпета.