Коли ви вставляєте посилання в повідомлення, твіт, допис у LinkedIn чи канал Slack, платформа підтягує картку-прев'ю — велике зображення, заголовок, короткий опис. Це зображення й є Open Graph (OG), і воно робить більше роботи, ніж ваш заголовок. У стрічці, яку швидко гортають, саме картинка зупиняє палець. Порожнє чи «зламане» прев'ю сприймається як зроблене абияк — і його прогортають.
Ось як зробити таке, що заслуговує на клік: правильного розміру та з текстом, який справді читається.
Розмір: 1200×630
Стандартне OG-зображення має розмір 1200×630 пікселів, співвідношення 1.91:1. Facebook, LinkedIn, Slack, Discord і більшість систем прев'ю посилань побудовані навколо нього. Зробіть його правильно — і ви охоплені майже всюди.
Кілька суміжних розмірів виникають залежно від того, де опиниться посилання:
| Платформа / застосування | Розмір | Співвідношення |
|---|---|---|
| Open Graph (за замовчуванням) | 1200×630 | 1.91:1 |
| Twitter/X велика картка | 1200×628 | ~1.91:1 |
| Мініатюра YouTube | 1280×720 | 16:9 |
| Квадрат (стрічки/IG) | 1080×1080 | 1:1 |
| Сторіз / вертикаль | 1080×1920 | 9:16 |
Для допису в блозі всі ці розміри вам не потрібні — 1200×630 є робочою конякою. Але якщо ви ще й робите мініатюру для відео чи квадратний допис для соцмереж, краще згенерувати правильну форму, ніж невдало обрізати одне зображення під потрібний розмір.
Правила для тексту: читабельність у розмірі мініатюри
Помилка, яка вбиває OG-зображення, — ставитися до нього як до плаката, який ви розглядатимете на весь екран. Не розглядатимете. Більшість людей бачать картку приблизно у третину її справжнього розміру, на телефоні, посеред гортання. Проєктуйте саме під це.
- Великий текст, мало слів. Короткий заголовок — п'ять-вісім слів — який читається, коли картка стиснута. Якщо доводиться примружуватися в повному розмірі, у стрічці він нечитабельний.
- Сильний контраст. Світлий текст на темному чи насиченому тлі, або навпаки. Текст на строкатому фото без підкладки просто зникає.
- Тримайте важливе по центру. Різні платформи трохи по-різному обрізають краї. Тримайте текст і логотипи подалі від зовнішніх полів, щоб нічого не обрізалося.
- Одна ідея на зображення. OG-зображення — це гачок, а не підсумок. Заголовок, можливо, підзаголовок — і все.
Тло, на якому текст «вистрілює»
Плаский градієнт — надійний вибір. Він дає тексту чисту поверхню, виглядає сучасно й ніколи не конкурує зі словами так, як строкате фото. Градієнт від темного до трохи темнішого зі світлим текстом — практично безпрограшний.
Інструмент OG Image побудований саме навколо цього: оберіть пресет розміру (OG 1200×630, Twitter, YouTube, квадрат чи сторіз), виберіть градієнтне тло й додайте заголовок та підзаголовок. Ви отримаєте картку для репосту, яка чітко читається в будь-якому розмірі, — і без відкриття повноцінного дизайнерського застосунку.
HTML, завдяки якому вона з'являється
Зробити зображення — це половина роботи. Платформа має знати, де його знайти. Додайте ці теги в <head> вашої сторінки:
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Your title">
<meta property="og:description" content="One clear sentence.">
<meta name="twitter:card" content="summary_large_image">
Рядок twitter:card зі значенням summary_large_image — це те, що дає вам велику картку в X замість крихітної мініатюри. Абсолютні URL (з https://) мають значення — відносні шляхи часто не резолвяться, коли скрапер завантажує вашу сторінку.
Після розгортання протестуйте. Вставте свій URL у налагоджувач прев'ю посилань платформи (Sharing Debugger від Facebook, Post Inspector від LinkedIn), щоб підтвердити, що зображення завантажується, і скинути будь-яку кешовану стару версію. Платформи агресивно кешують прев'ю, тож якщо ви оновили зображення, а досі бачите старе, кнопка повторного скрапінгу в налагоджувачі — це і є розв'язання.
Зробіть його, а не завантажуйте
Уся справа відбувається у вашому браузері — зображення компонується за допомогою Canvas локально й ніколи не завантажується на сервер. Це безкоштовно, без реєстрації, без водяного знака, відштампованого поперек вашої картки, і працює офлайн після першого візиту. Згенеруйте 1200×630, підключіть мета-теги, один раз проженіть через налагоджувач — і ваші посилання почнуть відпрацьовувати свою вагу.