Imagens OG para Páginas de Produto

Uma imagem OG para uma página de produto é a pré-visualização social que mostra o nome do produto, o preço e uma miniatura quando a página é partilhada. A FastOG renderiza-a dinamicamente a 1200×630 e faz cache na edge, para que cada produto receba um cartão com a marca sem que um designer precise de tocar num modelo.

Porque é que as páginas de produtos de ecommerce precisam de imagens OG dinâmicas

Quando um cliente partilha uma ligação 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 logótipo da loja. Criar um cartão único por produto manualmente não é escalável — é para isso que serve a API.

Como gerar uma imagem OG de produto

Assine um URL com template=ecommerce, o título do produto, o preço, a classificação e um URL de imagem. A API renderiza o cartão a pedido e armazena-o 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 modelo de comércio eletrónico

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`	Classificação de avaliação, ex.: `4.9`	Opcional
`image`	URL da imagem/avatar do produto	Opcional

FAQ

O FastOG carrega a imagem do meu produto para o cartão?

Sim. Passe o URL da imagem do produto no parâmetro image e o modelo de ecommerce compõe-no no cartão.

O preço é apresentado em tempo real e é editável?

O preço é o que você passar no momento da assinatura. Altere o preço → altere o URL → uma nova renderização.

E quanto a preços com desconto / de saldo?

Passe o preço atual como price. Alguns vendedores atualizam o cartão quando o saldo muda, para que a pré-visualização partilhada mostre o preço em tempo real.

Experimente gratuitamente — sem necessidade de registo

Pré-visualize e teste imagens OG dinâmicas em segundos.

Abrir o Testador Gratuito de Imagens OG

Tópico