OG-bilder for produktsider

Et OG-bilde for en produktside er sosial forhåndsvisningen som viser produktnavnet, prisen og et miniatyrbilde når siden deles. FastOG gjengir det dynamisk i 1200×630 og mellomlagrer det på kanten, så hvert produkt får et merket kort uten at en designer må røre en mal.

Hvorfor e-handelssider trenger dynamiske OG-bilder

Når en kunde deler en produktlenke i WhatsApp, Slack eller Discord, er forhåndsvisningskortet en mini-reklame. Et kort med selve produktnavnet, prisen og vurderingen konverterer langt bedre enn butikkens generiske logobilde. Å bygge et unikt kort per produkt manuelt skalerer ikke – det er det API-en er til for.

Slik genererer du et produkt-OG-bilde

Signér en URL med template=ecommerce, produkttittelen, prisen, vurderingen og en bilde-URL. API-en gjengir kortet på forespørsel og bufrer 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
            })],
        },
    };
}

Felt i e-handelsmalen

Felt	Hva det viser	Valgfritt?
`title`	Produktnavn (overskrift)	Påkrevd
`subtitle`	Slagord eller kategori	Valgfritt
`price`	Prisetikett, f.eks. `$29.99`	Valgfritt
`rating`	Vurderingsscore, f.eks. `4.9`	Valgfritt
`image`	Produktbilde / avatar-URL	Valgfritt

FAQ

Laster FastOG produktbildet mitt inn i kortet?

Ja. Send produktets bilde-URL i parameteren image, så setter e-handelsmalen det sammen i kortet.

Er prisen vist direkte og redigerbar?

Prisen er det du sender inn ved signeringstidspunktet. Endre prisen → endre URL-en → én ny rendering.

Hva med rabatt-/salgspriser?

Send gjeldende pris som price. Noen selgere oppdaterer kortet når salget endres, slik at den delte forhåndsvisningen viser den levende prisen.

Prøv gratis – ingen registrering nødvendig

Forhåndsvis og test dynamiske OG-bilder på sekunder.

Åpne den gratis OG-bildetesteren

Emne