Imagens OG Dinâmicas para SaaS

Imagens OG dinâmicas para SaaS são pré-visualizações sociais por página, geradas automaticamente conforme seu dashboard, documentação, changelog ou rotas voltadas ao usuário são compartilhadas. O FastOG renderiza cada uma sob demanda e a armazena em cache, permitindo que um SaaS ofereça a cada página um card exclusivo e personalizado, sem nenhum trabalho manual de design.

Por que SaaS precisa de imagens OG dinâmicas

Produtos SaaS têm muitas superfícies compartilháveis — páginas de produto, páginas de documentação, entradas de changelog, perfis públicos de usuários e cartões de conquista. Cada uma compartilhada no X ou no LinkedIn se beneficia de seu próprio cartão em vez de um único fallback de logotipo. Gerar essas imagens manualmente não escala; gerá-las no momento da renderização, sim.

O padrão central

Para cada página em que você deseja um card, assine uma URL com o título da página (e quaisquer campos específicos dela) no momento da renderização. O FastOG gera o PNG no primeiro fetch e o Cloudflare o armazena em cache.

tsx

// Next.js — app/docs/[slug]/page.tsx
export function generateMetadata({ params }) {
    const doc = await getDoc(params.slug);
    return {
        openGraph: {
            images: [generateOgImageUrl({
                template: "default",     // or "devtool", "launch", "company"
                title: doc.title,
                subtitle: doc.excerpt,
                domain: "yoursaas.com",
            })],
        },
    };
}

Casos de uso interessantes para SaaS

Superfície	Ideias de modelos
Páginas de produto / marketing	`company`, `hero`, `product`
Páginas de documentação	`default`, `devtool`
Entradas de changelog	`changelog`, `launch`
Cartões públicos de usuário / avatar	`testimonial`, `stats`, `image-right`
Páginas de preços	`pricing`, `stats`

FAQ

Preciso de um template para cada caso de uso?

Não. Um template + os campos de URL que você passa geralmente é suficiente; alguns templates cobrem o restante. Todos são renderizados em 1200×630.

Como lidar com muitas páginas sem estourar a cota?

URLs idênticas são armazenadas em cache na borda para sempre após a primeira renderização, então a mesma página compartilhada 1.000 vezes conta como 1 renderização. Mudanças de conteúdo apenas geram uma nova URL.

Posso personalizar os cards com a identidade do meu SaaS?

Sim — defina brand_name, brand_logo, bg_color, fontes e padrões por URL. Veja o playground para pré-visualizar os templates 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