OG-afbeeldingen voor productpagina's

Een OG-afbeelding voor een productpagina is de sociale preview die de productnaam, prijs en een miniatuur toont wanneer de pagina wordt gedeeld. FastOG rendert deze dynamisch op 1200×630 en cacht deze aan de edge, zodat elk product een gebrandmerkte kaart krijgt zonder dat een ontwerper een sjabloon hoeft aan te raken.

Waarom ecommerce-productpagina's dynamische OG-afbeeldingen nodig hebben

Wanneer een klant een productlink deelt in WhatsApp, Slack of Discord, is de previewkaart een mini-advertentie. Een kaart met de daadwerkelijke productnaam, prijs en beoordeling converteert veel beter dan de generieke logo-afbeelding van de winkel. Het handmatig bouwen van een unieke kaart per product schaalt niet — daar is de API voor bedoeld.

Een product-OG-afbeelding genereren

Onderteken een URL met template=ecommerce, de producttitel, prijs, beoordeling en een afbeeldings-URL. De API rendert de kaart op aanvraag en cached deze.

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

Velden voor het ecommerce-sjabloon

Veld	Wat het toont	Optioneel?
`title`	Productnaam (kop)	Verplicht
`subtitle`	Tagline of categorie	Optioneel
`price`	Prijskaartje, bijv. `$29.99`	Optioneel
`rating`	Beoordelingsscore, bijv. `4.9`	Optioneel
`image`	Productafbeelding / avatar-URL	Optioneel

FAQ

Laadt FastOG mijn productafbeelding in de kaart?

Ja. Geef de afbeeldings-URL van het product door in de parameter image en de ecommerce-sjabloon verwerkt deze in de kaart.

Wordt de prijs live weergegeven en is deze bewerkbaar?

De prijs is wat je op het moment van ondertekenen doorgeeft. Wijzig de prijs → wijzig de URL → één nieuwe render.

Hoe zit het met kortings- / aanbiedingsprijzen?

Geef de huidige prijs door als price. Sommige verkopers verversen de kaart wanneer de aanbieding verandert, zodat de gedeelde preview de live prijs toont.

Probeer het gratis — geen aanmelding vereist

Bekijk en test dynamische OG-afbeeldingen in seconden.

Open de gratis OG-afbeeldingstester

Onderwerp