OG Images for Product Pages

An OG image for a product page is the social preview that shows the product name, price, and a thumbnail when the page is shared. FastOG renders it dynamically at 1200×630 and edge-caches it, so every product gets a branded card without a designer touching a template.

Why ecommerce product pages need dynamic OG images

When a customer shares a product link in WhatsApp, Slack, or Discord, the preview card is a mini-ad. A card with the actual product name, price, and rating converts far better than the store's generic logo image. Building a unique card per product by hand does not scale — that is what the API is for.

How to generate a product OG image

Sign a URL with template=ecommerce, the product title, price, rating, and an image URL. The API renders the card on demand and caches it.

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 template fields

Field	What it shows	Optional?
`title`	Product name (headline)	Required
`subtitle`	Tagline or category	Optional
`price`	Price tag, e.g. `$29.99`	Optional
`rating`	Review rating, e.g. `4.9`	Optional
`image`	Product image / avatar URL	Optional

FAQ

Does FastOG load my product image into the card?

Yes. Pass the product's image URL in the image parameter and the ecommerce template composes it into the card.

Is the price shown live and editable?

The price is whatever you pass at sign time. Change the price → change the URL → one new render.

What about discount / sale prices?

Pass the current price as price. Some sellers refresh the card when the sale changes so the shared preview shows the live price.

Try it free — no signup required

Preview and test dynamic OG images in seconds.

Open the Free OG Image Tester

Topic