Imagens OG Dinâmicas para SaaS

As imagens OG dinâmicas para SaaS são pré-visualizações sociais por página, geradas automaticamente à medida que o seu dashboard, documentação, changelog ou rotas voltadas para o utilizador são partilhadas. A FastOG renderiza cada uma sob demanda e armazena-a em cache, permitindo que um SaaS atribua a cada página um cartão de marca único, sem qualquer trabalho manual de design.

Porque é que o SaaS precisa de imagens OG dinâmicas

Os produtos SaaS têm muitas superfícies partilháveis — páginas de produto, páginas de documentação, entradas de changelog, perfis públicos de utilizadores e cartões de conquistas. Cada uma partilhada no X ou no LinkedIn beneficia do seu próprio cartão, em vez de um único logótipo como fallback. Gerar estes cartões manualmente não escala; gerá-los no momento da renderização escala.

O padrão central

Para cada página para a qual pretenda um cartão, assine um URL com o título da página (e quaisquer campos específicos da página) no momento da renderização. O FastOG gera o PNG no primeiro pedido e o Cloudflare armazena-o 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 adequados 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 utilizador / avatar	`testimonial`, `stats`, `image-right`
Páginas de preços	`pricing`, `stats`

FAQ

Preciso de um modelo por caso de utilização?

Não. Um modelo, juntamente com os campos de URL que passa, costuma ser suficiente; um par de modelos cobre o resto. Todos são renderizados a 1200×630.

Como posso lidar com muitas páginas sem esgotar a quota?

URLs idênticas são armazenadas em cache no edge para sempre após a primeira renderização, pelo que a mesma página partilhada 1.000 vezes conta como 1 renderização. Alterações de conteúdo apenas geram um novo URL.

Posso personalizar os cartões com a identidade do meu SaaS?

Sim — defina brand_name, brand_logo, bg_color, tipos de letra e padrões por URL. Consulte o playground para pré-visualizar modelos 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