Imagens OG para Páginas de Produto

Uma imagem OG para uma página de produto é a prévia social que mostra o nome do produto, o preço e uma miniatura quando a página é compartilhada. A FastOG a renderiza dinamicamente em 1200×630 e a armazena em cache na borda, para que cada produto receba um cartão personalizado sem que um designer precise mexer em um modelo.

Por que páginas de produtos de ecommerce precisam de imagens OG dinâmicas

Quando um cliente compartilha um link de produto no WhatsApp, Slack ou Discord, o cartão de pré-visualização é um mini-anúncio. Um cartão com o nome real do produto, preço e avaliação converte muito melhor do que a imagem genérica do logotipo da loja. Criar um cartão exclusivo para cada produto manualmente não escala — é para isso que a API serve.

Como gerar uma imagem OG de produto

Assine uma URL com template=ecommerce, o título do produto, preço, avaliação e uma URL de imagem. A API renderiza o card sob demanda e o armazena em 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
            })],
        },
    };
}

Campos do template de e-commerce

Campo	O que mostra	Opcional?
`title`	Nome do produto (título)	Obrigatório
`subtitle`	Slogan ou categoria	Opcional
`price`	Etiqueta de preço, ex.: `$29.99`	Opcional
`rating`	Avaliação de review, ex.: `4.9`	Opcional
`image`	URL da imagem do produto / avatar	Opcional

FAQ

O FastOG carrega a imagem do meu produto no card?

Sim. Passe a URL da imagem do produto no parâmetro image e o template de ecommerce a compõe no card.

O preço exibido é ao vivo e editável?

O preço é o que você passar no momento da assinatura. Altere o preço → altere a URL → um novo render.

E quanto a descontos / preços promocionais?

Passe o preço atual como price. Alguns vendedores atualizam o card quando a promoção muda, para que a prévia compartilhada mostre o preço ao vivo.

Experimente grátis — sem necessidade de cadastro

Visualize e teste imagens OG dinâmicas em segundos.

Abrir o Testador de Imagens OG Grátis

Tópico