OG-изображения для страниц товаров

OG-изображение для страницы товара — это социальный превью (social preview), которое показывает название товара, цену и миниатюру при публикации страницы. FastOG отображает его динамически в формате 1200×630 и кэширует на границе сети (edge-cache), поэтому каждый товар получает фирменную карточку без участия дизайнера в работе с шаблоном.

Почему страницам товаров в ecommerce нужны динамические OG-изображения

Когда покупатель делится ссылкой на товар в WhatsApp, Slack или Discord, карточка предпросмотра — это мини-реклама. Карточка с реальным названием товара, ценой и рейтингом конвертирует гораздо лучше, чем общий логотип магазина. Создавать уникальную карточку для каждого товара вручную нецелесообразно — именно для этого и нужен API.

Как сгенерировать OG-изображение товара

Подпишите URL с помощью template=ecommerce, названия товара, цены, рейтинга и URL изображения. API отрисовывает карточку по запросу и кэширует её.

tsx

// Next.js — app/products/[slug]/page.tsx
export function generateMetadata({ params }) {
    const product = await getProduct(params.slug);
    return {
        openGraph: {
            images: [generateOgImageUrl({
                template: "ecommerce",      // product card
                title: product.name,
                subtitle: product.tagline,  // optional
                price: product.price,       // e.g. "$29.99"
                rating: product.rating,     // e.g. "4.9"
                image: product.imageUrl,    // product photo
            })],
        },
    };
}

Поля шаблона электронной коммерции

Поле	Что отображается	Необязательное?
`title`	Название продукта (заголовок)	Обязательное
`subtitle`	Слоган или категория	Необязательное
`price`	Ценник, например `$29.99`	Необязательное
`rating`	Рейтинг отзывов, например `4.9`	Необязательное
`image`	URL изображения продукта / аватара	Необязательное

FAQ

Загружает ли FastOG изображение моего товара в карточку?

Да. Передайте URL изображения товара в параметре image, и шаблон для электронной коммерции включит его в карточку.

Отображается ли цена в реальном времени и можно ли её редактировать?

Цена — это то, что вы передаёте при подписании. Измените цену → измените URL → получите новый рендер.

А как насчёт скидок / акционных цен?

Передавайте текущую цену как price. Некоторые продавцы обновляют карточку при изменении акции, чтобы общий предпросмотр показывал актуальную цену.

Попробуйте бесплатно — регистрация не требуется

Предпросмотр и тестирование динамических OG-изображений за секунды.

Открыть бесплатный тестер OG-изображений

Тема