OG Image Generator: визуальный редактор Open Graph карточек

Open Graph картинка — единственное, что большинство людей видит до решения кликнуть. Она появляется в групповых чатах, каналах Slack, лентах LinkedIn и X, и в каждом из этих мест конкурирует со всем остальным на экране.

Спецификация свободная. Практические ограничения — нет.

Что делает инструмент

OG Image Generator начинался как генератор картинок 1200×630, но по факту превратился в компактный визуальный редактор. В нём нет одного жёсткого макета, где разрешено поменять только заголовок и два цвета. Вы собираете композицию из независимых элементов и редактируете результат прямо там, где его видите.

Редактор закрывает весь путь от идеи до файла для публикации:

• создаёт Open Graph, Instagram, Story, обложки и изображения произвольного размера;
• позволяет двигать, масштабировать и вращать элементы прямо на холсте;
• держит несколько переводов в одной композиции, включая LTR и RTL;
• сохраняет карточки и черновик локально в браузере;
• переносит отдельные шаблоны или всю библиотеку через JSON;
• экспортирует PNG, JPEG и WebP в 1× или 2×;
• генерирует мета-теги и показывает превью будущей social-карточки.

Почему это визуальный редактор, а не форма с настройками

Основная работа происходит на холсте. Вы выбираете объект и перетаскиваете его мышью или пальцем, тянете за границы для изменения размера, используете отдельный маркер вращения и дважды кликаете по тексту для редактирования на месте. Точные значения координат, ширины, высоты, прозрачности и поворота остаются в инспекторе справа, но они дополняют прямое управление, а не заменяют его.

Для аккуратной композиции есть привычные инструменты редактора:

• Snap и направляющие. Объекты цепляются за края и центр холста, а также за границы соседних элементов. Так можно, например, сделать текстовый блок ровно по ширине изображения.
• Выравнивание и распределение. Несколько выделенных объектов можно поставить по левому, правому или центральному краю и распределить с одинаковыми промежутками.
• Слои. Любой объект можно поднять, опустить, временно скрыть или заблокировать от случайного перемещения.
• Точная подстройка. Стрелки двигают выделение по одному пикселю, а Shift — по десять. История Undo/Redo позволяет спокойно пробовать варианты.
• Safe area и масштаб Fit. Безопасная область помогает не прижимать важный текст к краям, а Fit показывает всю композицию целиком независимо от размера окна.

Из чего собирается карточка

Вместо десятков готовых макетов редактор предлагает небольшой набор универсальных блоков:

• Text — заголовки, подзаголовки, адрес сайта и любые подписи с автоподбором размера;
• Image и Logo — фотографии, иллюстрации и логотипы в PNG, JPEG, WebP или SVG;
• Icon — отдельная встроенная или загруженная иконка;
• Icon + text — компактная строка для телефона, адреса, ссылки или преимущества;
• Icon list — повторяемый список контактов, услуг или преимуществ с drag-and-drop сортировкой, разделителями и выбором положения иконок;
• Panel — цветная, градиентная или текстурированная область для разделения композиции;
• Shape — линия, разделитель или декоративная фигура;
• Button — CTA или визуальная ссылка.

Этого достаточно и для простой карточки «логотип — заголовок — подзаголовок», и для двухколоночного макета с фотографией, контактами и рядом преимуществ. Каждый блок остаётся самостоятельным: его можно дублировать, привязать к панели, изменить порядок слоёв или удалить.

Цвет, фон, изображения и типографика

У документа есть ролевая палитра: фон, панель, акцент, основной и приглушённый текст. Если элемент использует роль, смена цвета в палитре обновляет всю композицию, а не один случайный объект. При необходимости любой цвет можно сделать локальным.

Фон холста и панели поддерживают сплошную и градиентную заливку. У двух точек градиента независимо настраивается прозрачность, поэтому можно сделать переход от прозрачного к цвету. Поверх доступны текстуры точек и сетки; для фоновой фотографии — масштабирование, позиция, цветовой tint и его интенсивность.

Загруженные изображения можно отражать по горизонтали или вертикали, менять прозрачность и вращать по замкнутому диапазону 0–359°. Тексту доступны размер, минимальный размер для auto-fit, начертание, выравнивание, межбуквенный интервал, цвет и тень с отдельными X/Y, blur и opacity.

В редакторе есть семейства для латиницы, кириллицы и иврита: Manrope, Inter, Montserrat, Oswald, Lora, Merriweather, Playfair Display, JetBrains Mono, Rubik, Heebo, Assistant, Noto Sans Hebrew, Frank Ruhl Libre и другие. Шрифт можно задать как языковой по умолчанию или переопределить только для конкретного элемента.

Одна композиция для русского, английского и иврита

Перевод не должен превращаться в ручное копирование макета. В OG Image Generator у карточки один набор элементов и несколько текстовых версий. Вы настраиваете расположение один раз, переключаете языковой чип и меняете только содержание.

Для каждого языка можно задать направление LTR, RTL или автоматическое определение и выбрать подходящий шрифт. В иврите направление меняется не только на итоговом canvas, но и в input/textarea, поэтому строка редактируется с правильной стороны. В Icon list направление можно определять отдельно для каждого пункта, а положение иконки оставить физически слева, справа или связать с направлением текста.

Если добавлен новый язык, текст можно скопировать из существующего: заполнить только пустые поля или сознательно перезаписать всё после подтверждения. При экспорте опция Export all languages создаёт готовый файл для каждой локали с одинаковой геометрией и корректным текстом.

Размеры, которые имеют значение

Для Open Graph основным остаётся 1200×630, соотношение 1.91:1. Все крупные платформы кадрируют из него — поэтому это стандарт де-факто, а не официальный. Ниже примерно 600×315 платформы могут отказаться показывать большую карточку и откатиться к маленькой миниатюре.

Но тот же редактор подходит не только для OG. В списке есть готовые размеры:

• Instagram Square — 1080×1080;
• Instagram Portrait — 1080×1350;
• Instagram Landscape — 1080×566;
• Story — 1080×1920;
• Profile cover — 1500×500;
• Wide — 1920×1080;
• Custom — любой размер от 240 до 4096 пикселей по каждой стороне.

При смене размера можно оставить элементы как есть и изменить только холст либо масштабировать всю композицию. Размеры шрифтов при обычном изменении canvas не переписываются: типографика остаётся отдельной настройкой, а не случайным побочным эффектом смены формата.

Указывайте размер и в разметке:

<meta property="og:image" content="https://example.com/og/post.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

og:image:width и og:image:height позволяют платформе зарезервировать место под картинку до окончания загрузки. Без них карточка может отрисоваться в ухудшенном виде на первом кадре. А без twitter:card со значением summary_large_image X покажет маленькую квадратную карточку, какой бы хорошей ни была картинка.

Повторяемость: шаблоны, локальная библиотека и JSON

Самый затратный этап — не заменить заголовок, а один раз собрать хорошую систему: отступы, палитру, шрифты, положение логотипа, сетку и правила для переводов. Поэтому готовую карточку можно сохранить в локальную библиотеку и использовать как основу для следующих публикаций.

Save обновляет текущую карточку, а Save as new создаёт независимую копию под новым именем. Черновик сохраняется автоматически. При открытии другого шаблона или создании пустого документа редактор проверяет несохранённые изменения и предлагает сохранить их, продолжить без сохранения или отменить действие.

Библиотека хранится локально в браузере. Для резервной копии и передачи другому человеку есть JSON:

• Export JSON сохраняет текущую карточку вместе с элементами, переводами, палитрой и загруженными ассетами;
• Export all as JSON выгружает всю библиотеку;
• Import добавляет карточки как новые записи и проверяет структуру перед загрузкой.

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

Экспорт изображения и мета-тегов

В модалке экспорта выбираются PNG, JPEG или WebP и масштаб 1×/2×. Текущую версию можно скачать или скопировать в буфер обмена; для мультиязычной карточки — выгрузить все локали одной командой. Имя файла включает название карточки, язык и итоговый размер, поэтому версии не смешиваются между собой.

Отдельная модалка Meta tags & social preview связывает карточку с публикацией. В ней можно выбрать, какой текстовый элемент станет og:title, какой — og:description, указать URL страницы и будущий абсолютный URL изображения, проверить визуальное превью и скопировать готовый блок Open Graph/Twitter-разметки.

Редактор создаёт файл, но не загружает его на хостинг. После экспорта картинку всё равно нужно разместить по публичному HTTPS URL и вставить полученную разметку в <head> страницы.

Проектируйте под превью, а не под макет

Именно здесь проваливается большинство генерируемых карточек, и это проблема дизайна, а не техники.

Карточка отлично выглядит на всю ширину вашего монитора. В чате на телефоне она рендерится примерно в треть от этого. Заголовок из 40 слов тонким начертанием становится серым месивом, а подзаголовок с прозрачностью 60% исчезает совсем.

Правила, которые переживают уменьшение:

• Заголовки до ~70 символов. Дальше автоподбор размера вынужденно ужимает шрифт, чтобы уместить его в рамку, и читаемость рушится. Если заголовок продолжает мельчать по мере ввода — это сигнал сократить его.
• Начертание важнее кегля. Жирный заголовок 60px читается в мелком размере лучше, чем тонкий 80px.
• Высокий контраст. Серый текст на сером градиенте в размере превью не виден.
• Одна мысль. Карточка — не слайд. Заголовок, одна поддерживающая строка, бренд; всё остальное — шум.

Перед экспортом уменьшите масштаб в редакторе до 25–50% — примерно в таком размере карточка и правда отображается в чате на телефоне, и заметить нечитаемый заголовок так получается быстрее, чем гадать по полноразмерному холсту.

Только абсолютные URL

Краулеры игнорируют относительные пути. /og/post.png молча не даст картинки — нужен https://example.com/og/post.png. То же касается og:url.

Два смежных сценария, которые стоит проверить, если картинка упорно не появляется:

• Картинка за редиректом или авторизацией. URL должен отдавать байты картинки напрямую на неавторизованный запрос. Редирект 302 на CDN иногда срабатывает, иногда нет — зависит от краулера.
• Файл слишком большой. Держитесь заметно ниже нескольких мегабайт. PNG 1200×630 из плоских цветов и текста обычно весит меньше 200 КБ — одна из причин, почему карточки с canvas выигрывают у скриншотов.

Кеш превью агрессивен

Как только платформа просканировала ваш URL, она кеширует результат — нередко на дни. Замена картинки по тому же URL не обновит уже существующие превью, а часто и новые тоже.

Два выхода: принудительно пересканировать через отладчик платформы или опубликовать новую картинку под другим именем файла и обновить мета-тег. Второй способ надёжнее и работает везде сразу — поэтому версионированные имена файлов хорошая привычка для страниц, у которых карточки меняются.

Порядок работы

1. Выберите подходящий размер: 1200×630 для Open Graph, один из social-пресетов или Custom.
2. Начните с близкого шаблона либо пустого холста и задайте палитру, фон и основные панели.
3. Добавьте логотип, изображение, заголовок, подзаголовок и необходимые контактные или служебные блоки.
4. Выстройте композицию через Snap, направляющие, выравнивание и слои; заблокируйте готовые фоновые элементы.
5. Впишите реальный заголовок, а не заглушку: длина влияет на auto-fit и переносы.
6. Добавьте языки, выберите направление и шрифты, затем замените текст в каждой локали.
7. Уменьшите масштаб до 25–50% и убедитесь, что карточка читается как небольшое превью.
8. Сохраните результат в библиотеку или экспортируйте JSON как переносимый брендовый шаблон.
9. Скачайте PNG/JPEG/WebP, разместите файл по абсолютному HTTPS URL и скопируйте мета-теги в <head>.
10. Если картинка заменяет предыдущую по тому же адресу, запустите повторное сканирование в отладчике нужной платформы.

Текст рисуется через Canvas 2D API. Используемые веб-шрифты загружаются до экспорта, поэтому итоговый файл совпадает с тем, что было на холсте, без незаметной подмены на системный шрифт. Весь документ, изображения и экспорт обрабатываются локально: регистрация и серверная загрузка исходников не нужны.

Похожие инструменты

OG Image GeneratorПеретаскивайте, масштабируйте и вращайте элементы прямо на холсте, чтобы собрать карточку с несколькими языками (включая автоматический RTL) в одном макете, сохраняйте свои шаблоны локально и экспортируйте PNG.SEO & GEO Site AuditВведи публичный URL и получи проверку живого HTML, OpenGraph/Twitter, canonical, заголовков, JSON-LD, robots.txt, sitemap.xml, llms.txt, HTTP-редиректов, DNS и WHOIS, оценку готовности и редактируемый расчёт потерь от AI-поиска. По желанию проверяй до 30 ссылок и ресурсов того же origin на ответы 404/410. Определяй публичные признаки 16 платформ. По желанию анализируй исходную страницу и до четырёх внутренних HTML-страниц, смотри общие проблемы и затронутые URL и скачивай отчёт для клиента на русском или английском в Markdown или печатном HTML/PDF.Color ToolboxКонвертируйте HEX, RGB и HSL, смотрите значение OKLCH, собирайте палитры, извлекайте цвета и проверяйте контраст WCAG.Оптимизатор изображенийПакетно сжимайте до 10 PNG, JPEG или WebP, задавайте максимальные размеры или целевой вес, сравнивайте до и после, скачивайте по одному либо ZIP-архивом — полностью локально.