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

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

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

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

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