Генератор OG-зображень — конструктор зображень для соціальних мереж

Зображення Open Graph — це зображення, яке показується, коли посилання вставляють у чат, твіт чи канал Slack — і кожна платформа, яка його показує, очікує полотно приблизно 1200×630 пікселів, розмір, на який розраховані картки Facebook og:image і Twitter summary_large_image. Якщо помилитися з розміром, зображення виходить обрізаним, розмитим або стиснутим; якщо помилитися з макетом, заголовок читається як нерозбірлива смужка на тлі зайнятого фото. Цей інструмент створює зображення у справжній цільовій роздільній здатності за допомогою Canvas 2D API, тому те, що ви бачите на попередньому перегляді, є саме тим піксельним сіткою, яка потрапить у PNG.

Виберіть тло — суцільний колір, двоколірний лінійний градієнт із двох вибраних вами кольорів або завантажене фото, яке обрізається, щоб заповнити весь кадр 1200×630 так само, як це робить CSS background-size: cover, замість того щоб розтягуватися непропорційно. Введіть заголовок і опціональний підзаголовок: обидва вимірюються символ за символом за допомогою власних метрик шрифтів полотна, тому заголовок, який задовгий для одного рядка, переноситься на другий або третій рядок на справжній межі слів, а не виходить за край і не обрізається непомітно. Виберіть вирівнювання по центру або ліворуч, виберіть колір тексту, який читається на вашому тлі, і за бажанням розмістіть логотип у куті фіксованого, зручного для читання розміру.

Під полотном чотири маленькі картки приблизно показують, як готове зображення виглядає, коли справжня платформа оформлює його у своєму власному стилі: картка Twitter/X показує лише домен і жирний заголовок під зображенням без рядка опису, Facebook додає смужку домену великими літерами над блоком із заголовком і описом, LinkedIn розміщує домен під заголовком взагалі без опису, а вставка Discord показує домен, заголовок і опис над зображенням у власній темній темі. Це стилізовані наближення для планування — чітко позначені як ілюстративні, з рядком домену, який ви вводите самі — а не жива вибірка чи скріншот справжніх платформ, оскільки саме поширення посилання і дозвіл власному сканеру кожної платформи прочитати справжні метатеги og:image і og:title вашої сторінки створює живу картку.

Усе рендериться локально на елементі HTML canvas у вашому браузері: заголовок, підзаголовок, завантажене тло та логотип ніколи не залишають ваш пристрій, а експортований файл — це чистий PNG, отриманий через canvas.toBlob(), який містить лише те, що ви створили — жодні рамки макетів, фальшиві панелі браузера чи логотипи платформ не потрапляють у завантажене зображення. Якщо після цього вам потрібно змінити розмір або конвертувати експортований PNG, інструменти цього сайту для зміни розміру та конвертації зображень продовжать роботу там, де цей інструмент зупинився.