OG-Bilder für Produktseiten

Ein OG-Bild für eine Produktseite ist die soziale Vorschau (Social Preview), die Produktname, Preis und ein Vorschaubild anzeigt, wenn die Seite geteilt wird. FastOG rendert es dynamisch in 1200×630 und cached es am Edge, sodass jedes Produkt eine markenkonforme Karte erhält, ohne dass ein Designer eine Vorlage anfassen muss.

Warum dynamische OG-Bilder für E-Commerce-Produktseiten notwendig sind

Wenn ein Kunde einen Produktlink in WhatsApp, Slack oder Discord teilt, ist die Vorschaukarte eine Mini-Werbung. Eine Karte mit dem tatsächlichen Produktnamen, Preis und der Bewertung konvertiert deutlich besser als das generische Logo des Shops. Eine individuelle Karte pro Produkt manuell zu erstellen, skaliert nicht – genau dafür ist die API da.

So generieren Sie ein Produkt-OG-Bild

Signieren Sie eine URL mit template=ecommerce, dem Produkttitel, Preis, der Bewertung und einer Bild-URL. Die API rendert die Karte bei Bedarf und speichert sie zwischen.

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

Ecommerce-Vorlagenfelder

Feld	Was es anzeigt	Optional?
`title`	Produktname (Überschrift)	Erforderlich
`subtitle`	Slogan oder Kategorie	Optional
`price`	Preisschild, z. B. `$29.99`	Optional
`rating`	Bewertungsnote, z. B. `4.9`	Optional
`image`	Produktbild-/Avatar-URL	Optional

FAQ

Lädt FastOG mein Produktbild in die Karte?

Ja. Übergeben Sie die Bild-URL des Produkts im Parameter image, und die E-Commerce-Vorlage fügt sie in die Karte ein.

Ist der Preis live sichtbar und bearbeitbar?

Der Preis entspricht dem, was Sie zum Zeitpunkt der Signierung übergeben. Preis ändern → URL ändern → ein neuer Render.

Was ist mit Rabatt- bzw. Sonderangebotspreisen?

Übergeben Sie den aktuellen Preis als price. Einige Verkäufer aktualisieren die Karte, wenn sich das Angebot ändert, damit die geteilte Vorschau den Live-Preis anzeigt.

Kostenlos testen – keine Anmeldung erforderlich

Vorschau und Test dynamischer OG-Bilder in Sekunden.

Kostenlosen OG-Bild-Tester öffnen

Thema