Безкоштовний генератор зображень 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 до HTML head

<!-- 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 зображення для контенту, який часто оновлюється.