Immagini OG per le Pagine Prodotto

Un'immagine OG per una pagina prodotto è l'anteprima social (social preview) che mostra il nome del prodotto, il prezzo e una miniatura quando la pagina viene condivisa. FastOG la genera dinamicamente a 1200×630 e la memorizza nella cache perimetrale (edge cache), così ogni prodotto riceve una card brandizzata senza che un designer debba toccare un template.

Perché le pagine prodotto dell'ecommerce necessitano di immagini OG dinamiche

Quando un cliente condivide un link a un prodotto su WhatsApp, Slack o Discord, la card di anteprima è un mini-annuncio. Una card con il nome effettivo del prodotto, il prezzo e la valutazione converte molto meglio rispetto all'immagine generica del logo del negozio. Creare manualmente una card unica per ogni prodotto non è scalabile — è a questo che serve l'API.

Come generare un’immagine OG per un prodotto

Firma un URL con template=ecommerce, il titolo del prodotto, il prezzo, la valutazione e un URL dell’immagine. L’API genera la card su richiesta e la mette in cache.

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

Campi del template ecommerce

Campo	Cosa mostra	Opzionale?
`title`	Nome del prodotto (titolo)	Obbligatorio
`subtitle`	Tagline o categoria	Opzionale
`price`	Etichetta del prezzo, es. `$29.99`	Opzionale
`rating`	Valutazione delle recensioni, es. `4.9`	Opzionale
`image`	Immagine del prodotto / URL dell'avatar	Opzionale

FAQ

FastOG carica l'immagine del mio prodotto nella card?

Sì. Passa l'URL dell'immagine del prodotto nel parametro image e il template ecommerce la compone nella card.

Il prezzo mostrato è aggiornato in tempo reale e modificabile?

Il prezzo è quello che passi al momento della firma. Cambia il prezzo → cambia l'URL → un nuovo render.

E per i prezzi scontati / in saldo?

Passa il prezzo corrente come price. Alcuni venditori aggiornano la card quando cambia il saldo, così l'anteprima condivisa mostra il prezzo aggiornato.

Provalo gratis — nessuna registrazione richiesta

Anteprima e test delle immagini OG dinamiche in pochi secondi.

Apri il tester gratuito di immagini OG

Argomento