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

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

Чому сторінки товарів в електронній комерції потребують динамічних 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-зображень

Тема