Генератор 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-изображений

  1. Введите заголовок в поле «Заголовок»; он рисуется крупно и жирно и переносится максимум на три строки.
  2. Добавьте необязательный подзаголовок под заголовком или оставьте его пустым, чтобы показать только заголовок.
  3. Откройте «Настройки», чтобы выбрать сплошной или градиентный фон, задать цвета фона и текста и выбрать выравнивание по левому краю или по центру.
  4. При желании вставьте URL изображения логотипа (изображение с поддержкой CORS), чтобы разместить логотип над текстом.
  5. Следите, как предпросмотр 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.