OG-bilder för produktsidor

En OG-bild för en produktsida är den sociala förhandsvisningen som visar produktnamn, pris och en miniatyr när sidan delas. FastOG renderar den dynamiskt i 1200×630 och edge-cachar den, så varje produkt får ett varumärkesanpassat kort utan att en designer rör en mall.

Varför e-handelns produktsidor behöver dynamiska OG-bilder

När en kund delar en produktlänk i WhatsApp, Slack eller Discord är förhandsvisningskortet en mini-annons. Ett kort med produktens faktiska namn, pris och betyg konverterar betydligt bättre än butikens generiska logotypbild. Att bygga ett unikt kort per produkt för hand skalar inte – det är vad API:et är till för.

Så här genererar du en produkt-OG-bild

Signera en URL med template=ecommerce, produkttiteln, priset, betyget och en bild-URL. API:et renderar kortet på begäran och cachar 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
            })],
        },
    };
}

Fält för e-handelsmallar

Fält	Vad det visar	Valfritt?
`title`	Produktnamn (rubrik)	Obligatoriskt
`subtitle`	Tagline eller kategori	Valfritt
`price`	Prisskylt, t.ex. `$29.99`	Valfritt
`rating`	Betyg/recension, t.ex. `4.9`	Valfritt
`image`	Produktbild / avatar-URL	Valfritt

FAQ

Laddar FastOG in min produktbild i kortet?

Ja. Skicka produktbildens URL i parametern image så komponerar ecommerce-mallen in den i kortet.

Är priset live och redigerbart?

Priset är det du skickar vid signeringstillfället. Ändra priset → ändra URL:en → en ny rendering.

Hur är det med rabatt-/reapriser?

Skicka det aktuella priset som price. Vissa säljare uppdaterar kortet när rean ändras så att den delade förhandsvisningen visar det aktuella priset.

Prova gratis – ingen registrering krävs

Förhandsgranska och testa dynamiska OG-bilder på några sekunder.

Öppna gratis OG-bildtestaren

Ämne