Генератор изображений для соцсетей

bgimage_1image_2image_3image_4

О проекте

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

У каждого пользователя есть доступ к удобному личному кабинету. В нем вы можете:

  • Создать шаблон для OpenGraph изображений.
  • Настроить дизайн шаблона (шрифты, цвета, логотипы, фоновые изображения и расположение элементов).
  • Просматривать предварительный результат и вносить изменения.

Сервис легко интегрируется с любыми сайтами и платформами.

С нами ваш сайт станет ярче, а публикации — заметнее!

Интеграция

Интеграция нашего сервиса OpenGraph изображений — это быстро и просто!
Подключитесь через удобный API, чтобы автоматически генерировать уникальные и привлекательные изображения для страниц вашего сайта. Настройте дизайн в личном кабинете и начните выделяться в соцсетях уже сегодня!

Для интеграции нашего сервиса вручную достаточно добавить динамическую ссылку на сгенерированное изображение в HTML-код вашего сайта. Мы поддерживаем два формата URL для генерации изображений:

1. Без указания заголовка:

https://api.ogimage.ru/generate/{url}/og.png

Здесь {url} — это закодированный (URL-encoded) адрес страницы, для которой создается изображение. Система автоматически извлечет заголовок страницы из тегов в порядке приоритета:

  • <meta property="ogimage:title">
  • <meta property="og:title">
  • <title>

2. С указанием заголовка:

https://api.ogimage.ru/generate/{url}/{title}/og.png

Здесь {url} — адрес страницы, а {title} — заголовок страницы, также закодированный в формате URL-encoded. Этот формат позволяет вручную задать заголовок для изображения.

Для добавления динамического фонового изображения в HTML необходимо использовать следующий тег:

  • <meta property="ogimage:image">

Пример добавления в HTML

<head>
    <!-- без указания заголовка -->
    <meta property="ogimage:title" content="My Custom Title">
    <!-- или -->
    <meta property="og:title" content="My Custom Title">
    <!-- или -->
    <title>My Custom Title</title>
    <meta property="ogimage:image" content="https://mysite.com/article/thumbnail.png">
    <meta property="og:image" content="https://api.ogimage.ru/generate/https%3A%2F%2Fmysite.com%2Farticle/og.png">
    <!-- // без указания заголовка -->
    
    <!-- или с указанием заголовка -->
    <meta property="og:image" content="https://api.ogimage.ru/generate/https%3A%2F%2Fmysite.com%2Farticle/My%2520Custom%2520Title/og.png">
</head>

ВАЖНО: при использовании схемы с передачей заголовка в ссылке, фоновое изображения считываться не будет.