OG obrázky pro stránky produktů

OG obrázek pro stránku produktu je sociální náhled (social preview), který při sdílení stránky zobrazuje název produktu, cenu a miniaturu. FastOG jej dynamicky vykresluje v rozlišení 1200×630 a ukládá do edge cache, takže každý produkt získá značkovou kartu bez nutnosti, aby se designér dotýkal šablony.

Proč ecommerce produktové stránky potřebují dynamické OG obrázky

Když zákazník sdílí odkaz na produkt ve WhatsAppu, Slacku nebo Discordu, náhledová karta je mini-reklama. Karta se skutečným názvem produktu, cenou a hodnocením konvertuje mnohem lépe než generické logo obchodu. Ruční vytváření unikátní karty pro každý produkt není škálovatelné – k tomu slouží API.

Jak vygenerovat OG obrázek produktu

Podepište URL pomocí template=ecommerce, názvu produktu, ceny, hodnocení a URL obrázku. API vykreslí kartu na vyžádání a uloží ji do mezipaměti.

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
            })],
        },
    };
}

Pole šablon pro e-commerce

Pole	Co zobrazuje	Volitelné?
`title`	Název produktu (nadpis)	Povinné
`subtitle`	Podtitul nebo kategorie	Volitelné
`price`	Cenovka, např. `$29.99`	Volitelné
`rating`	Hodnocení recenzí, např. `4.9`	Volitelné
`image`	URL obrázku produktu / avatara	Volitelné

FAQ

Načte FastOG můj obrázek produktu do karty?

Ano. Předáte URL obrázku produktu v parametru image a šablona pro e-commerce ho složí do karty.

Je cena zobrazená živě a upravitelná?

Cena je taková, jakou předáte při podpisu. Změníte cenu → změníte URL → jeden nový render.

A co slevové / výprodejové ceny?

Jako price předáte aktuální cenu. Někteří prodejci kartu obnoví, když se sleva změní, aby náhled při sdílení ukazoval aktuální cenu.

Vyzkoušejte zdarma – bez registrace

Náhled a testování dynamických OG obrázků během pár sekund.

Otevřít bezplatný tester OG obrázků

Téma