Якого розміру згенероване зображення?

Завжди 1200x630 пікселів — стандартне співвідношення сторін Open Graph і Twitter summary-large-image (приблизно 1,91:1). Цей розмір чітко відображається у попередніх переглядах посилань у Facebook, X/Twitter, LinkedIn, Slack і Discord.

Як додати власний логотип?

Вставте прямий URL на зображення логотипа в поле «URL логотипа». Зображення завантажується за цим URL і малюється над текстом з фіксованою висотою та збереженням пропорцій. Джерело має дозволяти міжсайтове використання (CORS), інакше браузер заблокує його відмальовування на canvas.

Чи можна керувати кольорами та компонуванням?

Так. У «Налаштуваннях» можна перемикатися між суцільним фоном і двоколірним діагональним градієнтом, задавати колір(и) фону та колір тексту, а також обирати вирівнювання ліворуч або по центру. Заголовок і підзаголовок переносяться автоматично, а надто довгий текст обрізається трикрапкою.

Чи завантажується мій текст або зображення кудись?

Ні. Картка повністю малюється на HTML-canvas у вашому браузері й експортується у PNG локально. Ваш заголовок, підзаголовок і кольори ніколи не надсилаються на сервер. Завантажується лише вказаний вами URL логотипа, і цей запит іде безпосередньо з вашого браузера на обраний вами хост.

Генератор OG-зображень

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

Завантаження інструмента…

Генератор OG-зображень — Створіть Open Graph-зображення 1200x630, яке показується, коли вашою сторінкою діляться у Facebook, X/Twitter, LinkedIn або Slack. Введіть заголовок і підзаголовок, оберіть суцільний фон або двоколірний градієнт, задайте колір і вирівнювання тексту та за бажанням вкажіть URL логотипа. Живий попередній перегляд перемальовується в міру введення, а готову картку можна завантажити у PNG. Зображення повністю малюється на canvas у вашому браузері, тож ваш текст і кольори ніколи не покидають ваш пристрій.

Що таке Генератор OG-зображень?

Генератор OG-зображень — це безкоштовний браузерний інструмент для створення карток для соцмереж (зображень Open Graph / Twitter Card) у стандартному розмірі 1200x630 пікселів. Маркетологи, блогери, інді-розробники та всі, хто публікує лендинг, використовують його, щоб зробити охайну мініатюру попереднього перегляду, не відкриваючи дизайнерський застосунок. Ви вводите заголовок і необовʼязковий підзаголовок, обираєте суцільний колір або діагональний градієнт, задаєте колір тексту та вирівнювання ліворуч або по центру, а також вставляєте URL логотипа, якщо хочете розмістити бренд-знак у кутку. Canvas перемальовується наживо, щоб ви могли точно налаштувати формулювання й кольори, а потім експортуєте PNG, готовий для використання у мета-тезі og:image.

Як користуватися Генератор OG-зображень

Введіть заголовок у полі «Заголовок»; він малюється великим і жирним та переноситься щонайбільше на три рядки.
Додайте необовʼязковий підзаголовок під заголовком або залиште його порожнім, щоб показати лише заголовок.
Відкрийте «Налаштування», щоб обрати суцільний або градієнтний фон, задати кольори фону й тексту та вибрати вирівнювання ліворуч або по центру.
За бажанням вставте URL зображення логотипа (зображення з підтримкою CORS), щоб розмістити логотип над текстом.
Спостерігайте, як попередній перегляд 1200x630 оновлюється наживо, натисніть на нього, щоб збільшити, потім завантажте картку у PNG.

Приклади

Картка для публікації в блозі

Введіть заголовок статті як заголовок, а автора чи назву сайту як підзаголовок, оберіть градієнт у стилі вашого бренду й завантажте PNG 1200x630 для використання як og:image допису.

Банер запуску продукту

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

Поширені запитання

Якого розміру згенероване зображення?: Завжди 1200x630 пікселів — стандартне співвідношення сторін Open Graph і Twitter summary-large-image (приблизно 1,91:1). Цей розмір чітко відображається у попередніх переглядах посилань у Facebook, X/Twitter, LinkedIn, Slack і Discord.
Як додати власний логотип?: Вставте прямий URL на зображення логотипа в поле «URL логотипа». Зображення завантажується за цим URL і малюється над текстом з фіксованою висотою та збереженням пропорцій. Джерело має дозволяти міжсайтове використання (CORS), інакше браузер заблокує його відмальовування на canvas.
Чи можна керувати кольорами та компонуванням?: Так. У «Налаштуваннях» можна перемикатися між суцільним фоном і двоколірним діагональним градієнтом, задавати колір(и) фону та колір тексту, а також обирати вирівнювання ліворуч або по центру. Заголовок і підзаголовок переносяться автоматично, а надто довгий текст обрізається трикрапкою.
Чи завантажується мій текст або зображення кудись?: Ні. Картка повністю малюється на HTML-canvas у вашому браузері й експортується у PNG локально. Ваш заголовок, підзаголовок і кольори ніколи не надсилаються на сервер. Завантажується лише вказаний вами URL логотипа, і цей запит іде безпосередньо з вашого браузера на обраний вами хост.

Схожі інструменти

Код у зображення

Перетворіть фрагмент коду на зображення з підсвічуванням синтаксису прямо в браузері — з понад 20 мовами, власними темами й тлами, номерами рядків та експортом у PNG або SVG.

Перевірка контрастності кольорів

Перевірте контраст WCAG 2.1 і оцінку APCA Lc між кольором тексту та фону, перегляньте позначки AA, AAA і 3:1 та застосуйте найближчий прохідний колір.

Змішувач кольорів

Змішуйте два HEX-кольори у вибраній пропорції в колірному просторі RGB або Lab і зчитуйте отриманий проміжний колір як зразок і копійоване HEX-значення.

Генератор відтінків кольору

Перетворіть один базовий колір HEX на шкалу OKLCH, HSL або RGB з налаштовними щаблями, підказками контрасту WCAG на кожному щаблі та експортом у CSS, Tailwind і JSON.