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

Как создать стильное превью для новостного сайта с помощью OGPik

Как создать стильное превью для новостного сайта с помощью OGPik

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

🖤 Шаг 1. Фон и оверлей

Начнём с базового слоя — фонового изображения.
Для новостных сайтов отлично подходит чёрный фон, создающий контраст и подчёркивающий основной текст.

Чтобы придать изображению глубину, добавим оверлей с градиентом:

  • начальный цвет — чёрный с 0% непрозрачности,
  • конечный цвет — чёрный с 50% непрозрачности,
  • угол градиента — 180°,
  • направление — сверху вниз, начиная с середины изображения.

Это создаёт эффект мягкого затемнения снизу, на котором заголовок будет смотреться особенно чётко.

Для аккуратных отступов установите:

  • по 70 пикселей слева и справа,
  • по 60 пикселей сверху и снизу.

Цвет текста в шаблоне — белый.

📰 Шаг 2. Добавляем заголовок

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

Рекомендуемые параметры:

  • Размер шрифта: 60 px
  • Высота строки: 72 px
  • Количество строк: максимум 2
  • Позиция: левый нижний угол

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

🏷️ Шаг 3. Добавляем логотип

Чтобы изображение выглядело фирменно и узнаваемо, добавляем логотип издания.

Размещаем его в левом верхнем углу, отступы оставляем по умолчанию.
Это создаёт визуальный якорь и помогает мгновенно идентифицировать источник.

🗂️ Шаг 4. Добавляем блок категории

Следующий шаг — категория новости, например “SPORT” или “TECH”.
Добавим новый текстовый блок и настроим его:

  • отступы — по умолчанию,
  • шрифт — любой подходящий или ваш собственный,
  • размер шрифта — 30 px,
  • высота строки — 50 px,
  • выравнивание текста — по центру,
  • позиция — правый верхний угол.

Теперь добавим фон для этого текста:

  • цвет фона — чёрный,
  • внутренние отступы: 24 px по бокам, 0 px сверху и снизу,
  • радиус границы — 10 px.

Благодаря этому элементу категория будет хорошо выделяться и придаст изображению структурность.

⚙️ Шаг 5. Интеграция

Когда шаблон готов, остаётся добавить простую интеграцию на сайт.
Для этого в код страницы вставьте JSON-схему с типом application/ogpik:

<script type="application/ogpik">
{
  "title": "From Routine to Results: How Gym Workouts Transform You", 
  "image": "https://yourdomain.com/article/thumbnail.png",
  "texts": [
    "SPORT"
  ]
}
</script>

Подробнее про интеграцию можно почитать тут.

После этого OGPik автоматически создаст изображение для каждой страницы на основе ваших настроек.

✨ Итог

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

Попробуйте создать свой первый шаблон на ogpik.com — это проще, чем кажется.