3 min read Руководства

Создание фирменных Open Graph изображений для корпоративного сайта с OGPik

Создание фирменных Open Graph изображений для корпоративного сайта с OGPik

Красивое и аккуратное превью с логотипом и фирменными цветами делает сайт компании заметнее при публикации ссылок в соцсетях и мессенджерах. В этом примере мы создадим стильную Open Graph картинку для сайта банка — с чистым дизайном и сбалансированной композицией.

🧩 Этап 1. Создаем фон

Перейдите на сайт Haikei.app и выберите генератор Blob Scene.

  1. Установите размер изображения — 1200×630 пикселей.
  2. Настройте углы, форму и цвета фигуры, используя фирменную палитру компании.
  3. Нажимайте кнопку генерации, пока не получите желаемый результат.

Скачайте фон, затем загрузите его в OGPik.
Установите отступы по 70 пикселей со всех сторон.
Подберите цвет текста и цвет фона, чтобы композиция выглядела гармонично.

🏷 Этап 2. Добавляем заголовок

Теперь создадим заголовок, например:

Debit Cards
  • Размер шрифта: 60 px
  • Высота строки: 70 px
  • Стиль: Bold
  • Отступы: 60 px сверху и снизу, 70 px слева, 540 px справа

(Отступ справа нужен для изображения, которое мы добавим позже.)
Размещаем заголовок в левой нижней части изображения — так он будет хорошо заметен и не перегружает фон.

🏦 Этап 3. Добавляем логотип и название компании

  • Загрузите логотип и разместите его в левом верхнем углу
  • Добавьте новый текстовый элемент (Text #1) и введите, например, название банка — Acme Bank.
  • Подберите шрифт и размер. Высота строки должна совпадать с высотой логотипа, чтобы элементы выглядели на одной линии.
  • Настройте отступы, чтобы текст находился рядом с логотипом и выглядел сбалансировано.

🖼 Этап 4. Добавляем изображение

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

  1. Загрузите изображение, например карточку или иллюстрацию, подходящую по теме.
  2. Установите все отступы в 0 пикселей.
  3. Позиция: правый нижний угол.

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

🔗 Этап 5. Интеграция

Чтобы автоматически генерировать такие изображения при публикации страниц, нужно добавить JSON-схему в код страницы.

<script type="application/ogpik">
{
  "title": "Debit Cards"
}
</script>

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

🔄 Пример для других страниц

Для других страниц сайта достаточно передать в схеме другой заголовок и ссылку на изображение — сервис OGPik автоматически сгенерирует нужное превью для этой страницы.

<script type="application/ogpik">
{
  "title": "Mobile App",
  "images": [
    "https://yourdomain.com/assets/images/mobile-app.png"
  ]
}
</script>

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

💡 Выводы

С помощью OGPik вы можете легко создавать фирменные Open Graph изображения для корпоративного сайта — без дизайнеров и ручной верстки.

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