Бесплатный генератор Open Graph изображений

Легко создавайте потрясающие OG изображения, заголовки для Twitter/X и многое другое в несколько кликов — без навыков дизайна. Обеспечьте лучшее отображение в социальных сетях, таких как Twitter, Facebook и LinkedIn, используя форматы PNG (рекомендуется), JPEG или WebP. Нужна автоматизация? Генерируйте Open Graph изображения мгновенно с помощью нашего мощного API.

Choose a template

Свойства шаблона
Настройте ваше изображение, изменив свойства.
Фон
Установите пользовательский фон для вашего изображения.
Направление градиента
Наложение сетки
0.15
Preview
Оптимальные форматы изображений для Open Graph
Выберите лучший формат изображения для публикации в соцсетях.
  • PNG: Обеспечивает превосходное качество для текста и логотипов.
  • JPEG: Отлично подходит для фотографий и изображений со сложными цветами.
  • WebP: Современный формат, обеспечивающий отличное сжатие при сохранении высокого качества.
Скачать изображение
Экспортируйте ваше изображение в формате PNG, JPEG или WebP.

Для лучшего отображения Open Graph (OG) изображений на платформах, таких как Twitter, Facebook и LinkedIn, рекомендуется использовать форматы PNG (предпочтительно), JPEG или WebP.

Интеграция API
Генерируйте Open Graph изображения мгновенно с помощью нашего API.

Скопируйте тело запроса в формате JSON или как команду cURL.

Добавление Open Graph изображений стало проще

Легко добавляйте изображения для предпросмотра в соцсетях на ваш сайт за считанные минуты. Выберите предпочтительный метод ниже — используя HTML или Next.js App Router.

1. Сохраните изображение

Сохраните сгенерированное OG изображение как og.png в корневой директории вашего сайта.

2.Сгенерировать и добавьте Open Graph тег в head HTML

<!-- Basic OG Tags -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://yourdomain.com/og.png" />
<meta property="og:url" content="https://yourdomain.com" />

<!-- Twitter/X Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og.png" />

<!-- Optional but recommended -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />

Убедитесь, что заменили yourdomain.com на ваше настоящее доменное имя.

Советы экспертов

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