Создаём Open Graph изображение для кадрового агентства с помощью OGPik

Сегодня разберём пример создания стильного Open Graph изображения для кадрового агентства. Такие изображения идеально подходят для публикаций ссылок на вакансии в LinkedIn, VK или мессенджерах — помогают сделать даже обычную ссылку на вакансию заметной и профессиональной.

Этап 1. Фон и отступы

Начнём с оформления основы.
Сделаем цвет текста чёрным и установим отступы по 50 пикселей со всех сторон.

Далее выберем градиентный фон с углом 90 градусов:

• первый цвет — красный,
• второй цвет — также красный, но его позиция — 15%,
• третий цвет — белый, позиция — 15%.

Такой приём создаст вертикальную красную полосу слева шириной около 180 пикселей. В этой области позже разместим логотип, а оставшееся пространство оставим для основного контента.

Этап 2. Заголовок вакансии

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

Fullstack Developer (Middle / Senior) — PHP / JavaScript / CSS / HTML

Выбираем шрифт Inter, начертание Bold, размер 60 пикселей, высоту строки 72 пикселя.
Устанавливаем отступы: сверху — 50, справа — 50, снизу — 120, слева — 230 пикселей.
Позиция блока — левый нижний угол.

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

Этап 3. Логотип

Загрузим логотип компании, подготовленный заранее (ширина — 80 пикселей).
Размещаем его с отступами по умолчанию — в левом верхнем углу, на красной полосе.
Это поможет создать визуальный баланс и сделать бренд узнаваемым.

Этап 4. Название компании

Теперь добавим название компании, разместив его под заголовком вакансии.
Создадим новый текстовый блок (Text #1) и введём, например:

Acme Corporation

Отступы: сверху — 0, справа — 50, снизу — 50, слева — 230 пикселей.
Шрифт — Inter, размер — 40 пикселей, высота строки — 50, ограничение — 1 строка.
Позиция — левый нижний угол.

Этап 5. Город вакансии

Добавим ещё один текстовый блок (Text #2) с указанием города.
Для примера введём:

New York

Отступы: по 50 пикселей со всех сторон, кроме левой — там 230 пикселей.
Шрифт — Inter, размер и высота строки — по 30 пикселей.
Позиция — правый верхний угол.

Интеграция

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

<script type="application/ogpik">
{
  "title": "Fullstack Developer (Middle / Senior) — PHP / JavaScript / CSS / HTML",
  "texts": [
    "Acme Corporation",
    "New York"
  ]
}
</script>

Результат

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

💡 Пример использования

Такие изображения особенно полезны для публикации вакансий в:

• LinkedIn
• VK
• Telegram и других мессенджерах

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

✨ Вывод

Создание фирменных превью с OGPik помогает кадровым агентствам не только оформить вакансии эстетично, но и сделать бренд более узнаваемым.
А главное — всё это можно сделать за несколько минут, без дизайнера.