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

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

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

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

Этап 1. Фон

Загружаем изображение фона (в примере — тёмный фон с узором).
Цвет фона задаём аналогичный изображению, чтобы избежать контраста.
Цвет текста — контрастный (например, белый).
Отступы со всех сторон — 70 пикселей.

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

Добавляем заголовок — это название товара.
Шрифт: Raleway, размер — 40 px, высота строки — 48 px, количество строк — до 5.
Отступы: по всем сторонам 70 px, справа — 590 px.
Позиция — нижний левый угол.

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

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

Этап 4. Изображение товара

Добавляем Изображение #1 — основное фото товара.
Отступы — 0 со всех сторон, слева — 660 px.
Позиция — правый центр.
Рекомендуемое минимальное разрешение изображения — 540×630 пикселей.

Этап 5. Рейтинг товара

Добавляем новый текстовый блок Текст #1.
Отступы — 30 px со всех сторон.
В качестве текста используем ⭐⭐⭐⭐☆ (или любой другой вариант звёзд).
Задаём фоновую подложку: чёрный цвет, внутренние отступы — 5 px вертикальные и 10 px горизонтальные.
Ограничиваем текст одной строкой.
Размер и высота шрифта — 24 px.

Интеграция

Для интеграции достаточно передать данные о товаре в JSON-схеме:

<script type="application/ogpik">
{
  "title": "Wireless Headphones X200",
  "texts": [
    "⭐⭐⭐⭐☆"
  ],
  "images": [
    "https://myshop.com/images/headphones-x200.jpg"
  ],
}
</script>

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

Интеграция с WordPress

Если ваш интернет-магазин работает на WordPress, добавить автоматическую генерацию Open Graph изображений можно с помощью плагина OGPik.

После установки плагина:

  1. В разделе OGPik Settings укажите свой UUID сайта.
  2. Выберите, для каких типов постов (включая товары WooCommerce) создавать превью.
  3. Настройте тексты и изображения — глобально для всех страниц или индивидуально для каждой записи.

Плагин автоматически добавит нужную схему в HTML и свяжет ваш сайт с OGPik API.

Скачать плагин OGPik для WordPress

Выводы

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