Как создать стильные Open Graph изображения с помощью OGPik

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

В этой статье мы пошагово покажем, как создать красивое изображение для вашего сайта с помощью OGPik — от выбора фона и шрифта до интеграции.

🟣 Шаг 1. Создаём красивый фон

Фон задаёт настроение изображения. Он может быть мягким, ярким или контрастным — главное, чтобы отражал стиль вашего проекта.

Перейдите на сайт gradients.app.
Там можно сгенерировать уникальный фон, просто нажимая кнопку Сгенерировать палитру, пока не появится удачная палитра.

Когда результат вас устроит — нажмите Скачать в FHD, чтобы скачать изображение в хорошем качестве.
Этот фон станет основой будущего шаблона.

🟢 Шаг 2. Оптимизируем размер изображения

Чтобы изображение загружалось быстро и без задержек, его нужно немного “облегчить”.
Сделать это можно через tinypng.com.

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

🔵 Шаг 3. Подбираем шрифт

Шрифт — важный элемент стиля. Он помогает выделить ваш бренд и передать настроение.
Подобрать бесплатный шрифт можно на сайте Google Fonts.

Выберите понравившийся, скачайте и сохраните — позже вы сможете загрузить его в шаблон OGPik.

🟠 Шаг 4. Настраиваем шаблон в OGPik

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

• Войдите в админ панель OGPik и создайте новый сайт.
• На вкладке Defaults в секции Background загрузите подготовленный фон.

• Перейдите на вкладку Title — здесь настраивается основной заголовок.

• Введите примерный текст.
• Настройте смещение — оно нужно, чтобы создать эффект тени под заголовком и добавить глубину.
• Загрузите выбранный ранее шрифт.
• Установите цвет, размер, начертание и позицию текста.

• Перейдите на вкладку Texts.
  Добавьте Text #1, который будет дублировать заголовок без смещения.
  Например, Title розовый (тень), а Text #1 белый (основной текст).

• Таким же образом можно добавить Text #2 и Text #3 — например, для домена сайта или короткой подписи.
  Играйте с цветами и позициями, чтобы добиться гармонии и выразительности.

🟢 Шаг 5. Интеграция с сайтом

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

<script type="application/ogpik">
{
  "title": "Top 10 Instagram Trends", 
  "texts": [
    "Top 10 Instagram Trends"
  ]
}
</script>

OGPik считает данные из этой схемы и создаст Open Graph изображение по вашему шаблону.

Готовая ссылка для генерации будет иметь вид:

https://api.ogpik.com/generate/{uuid}/{path}/og.png

где
{uuid} — ваш уникальный идентификатор сайта в OGPik,
{path} — путь страницы, например blog/trends/.

После этого изображения для всех страниц будут создаваться автоматически — без ручного редактирования.

💡 Итог

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

🔗 Попробуйте прямо сейчас: OGPik.com