Images OG pour les pages produit

Une image OG pour une page produit est l'aperçu social qui affiche le nom du produit, le prix et une vignette lorsque la page est partagée. FastOG la génère dynamiquement en 1200×630 et la met en cache en périphérie, de sorte que chaque produit obtient une carte de marque sans qu'un designer ne touche à un modèle.

Pourquoi les pages produits ecommerce ont besoin d’images OG dynamiques

Lorsqu’un client partage un lien produit dans WhatsApp, Slack ou Discord, la carte d’aperçu est une mini-publicité. Une carte avec le nom du produit, le prix et la note réels convertit bien mieux que l’image générique du logo de la boutique. Créer une carte unique par produit à la main ne passe pas à l’échelle — c’est précisément à cela que sert l’API.

Comment générer une image OG de produit

Signez une URL avec template=ecommerce, le titre du produit, le prix, la note et une URL d’image. L’API génère la carte à la demande et la met en 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
            })],
        },
    };
}

Champs du modèle ecommerce

Champ	Ce qu'il affiche	Facultatif ?
`title`	Nom du produit (titre)	Requis
`subtitle`	Slogan ou catégorie	Facultatif
`price`	Étiquette de prix, ex. `$29.99`	Facultatif
`rating`	Note d'avis, ex. `4.9`	Facultatif
`image`	Image du produit / URL de l'avatar	Facultatif

FAQ

Est-ce que FastOG charge l’image de mon produit dans la carte ?

Oui. Transmettez l’URL de l’image du produit dans le paramètre image et le modèle ecommerce l’intègre dans la carte.

Le prix affiché est-il en direct et modifiable ?

Le prix correspond à ce que vous transmettez au moment de la signature. Modifiez le prix → modifiez l’URL → un nouveau rendu.

Qu’en est-il des prix en promotion / soldés ?

Transmettez le prix actuel comme price. Certains vendeurs actualisent la carte lorsque la promotion change, afin que l’aperçu partagé affiche le prix en direct.

Essayez gratuitement — aucune inscription requise

Prévisualisez et testez des images OG dynamiques en quelques secondes.

Ouvrir le testeur d'images OG gratuit

Sujet