OG-billeder til produktsider

Et OG-billede til en produktside er den sociale forhåndsvisning (social preview), der viser produktnavnet, prisen og et miniaturebillede, når siden deles. FastOG genererer det dynamisk i 1200×630 og cacher det på kanten (edge), så hvert produkt får et brandet kort uden at en designer skal røre en skabelon.

Hvorfor e-handelsproduktsider har brug for dynamiske OG-billeder

Når en kunde deler et produktlink i WhatsApp, Slack eller Discord, er forhåndsvisningskortet en mini-annonce. Et kort med det faktiske produktnavn, pris og bedømmelse konverterer langt bedre end butikkens generiske logo-billede. At opbygge et unikt kort pr. produkt manuelt skalerer ikke – det er det, API'en er til for.

Sådan genererer du et produkt-OG-billede

Signér en URL med template=ecommerce, produkttitlen, prisen, bedømmelsen og en billed-URL. API'et renderer kortet efter behov og cacher det.

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

Felter i ecommerce-skabelonen

Felt	Hvad det viser	Valgfrit?
`title`	Produktnavn (overskrift)	Påkrævet
`subtitle`	Tagline eller kategori	Valgfrit
`price`	Prislabel, f.eks. `$29.99`	Valgfrit
`rating`	Anmeldelsesvurdering, f.eks. `4.9`	Valgfrit
`image`	Produktbillede / avatar-URL	Valgfrit

FAQ

Indlæser FastOG mit produktbillede i kortet?

Ja. Angiv produktets billed-URL i parameteren image, og ecommerce-skabelonen sammensætter det i kortet.

Er prisen vist live og redigerbar?

Prisen er det, du angiver på underskriftstidspunktet. Ændr prisen → ændr URL'en → én ny gengivelse.

Hvad med rabat-/udsalgspriser?

Angiv den aktuelle pris som price. Nogle sælgere opdaterer kortet, når udsalget ændres, så den delte forhåndsvisning viser den live pris.

Prøv det gratis – ingen tilmelding nødvendig

Forhåndsvis og test dynamiske OG-billeder på få sekunder.

Åbn den gratis OG-billedtester

Emne