Imágenes OG dinámicas para SaaS

Las imágenes OG dinámicas para SaaS son vistas previas sociales por página que se generan automáticamente cuando se comparten tu dashboard, documentación, changelog o rutas visibles para el usuario. FastOG renderiza cada una bajo demanda y la almacena en caché, de modo que un SaaS puede dar a cada página una tarjeta de marca única sin ningún trabajo de diseño manual.

Por qué el SaaS necesita imágenes OG dinámicas

Los productos SaaS tienen muchas superficies compartibles: páginas de producto, páginas de documentación, entradas del changelog, perfiles públicos de usuario y tarjetas de logros. Cada una de ellas compartida en X o LinkedIn se beneficia de su propia tarjeta en lugar de un único fallback con el logo. Generarlas a mano no escala; generarlas en tiempo de renderizado sí.

El patrón principal

Para cada página de la que quieras una tarjeta, firma una URL con el título de la página (y cualquier campo específico de la página) en el momento del renderizado. FastOG genera el PNG en la primera solicitud y Cloudflare lo almacena en caché.

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 recomendados para SaaS

Superficie	Ideas de plantillas
Páginas de producto / marketing	`company`, `hero`, `product`
Páginas de documentación	`default`, `devtool`
Entradas de changelog	`changelog`, `launch`
Tarjetas públicas de usuario / avatar	`testimonial`, `stats`, `image-right`
Páginas de precios	`pricing`, `stats`

Preguntas frecuentes

¿Necesito una plantilla para cada caso de uso?

No. Una plantilla más los campos de URL que pasas suele ser suficiente; un par de plantillas cubren el resto. Todas se renderizan a 1200×630.

¿Cómo gestiono muchas páginas sin agotar la cuota?

Las URL idénticas se almacenan en caché en el edge para siempre tras el primer renderizado, así que compartir la misma página 1.000 veces cuenta como 1 renderizado. Los cambios de contenido simplemente generan una URL nueva.

¿Puedo personalizar las tarjetas con la identidad de mi SaaS?

Sí: configura brand_name, brand_logo, bg_color, las fuentes y los patrones por URL. Consulta el playground para previsualizar las plantillas en vivo.

Pruébalo gratis: no se requiere registro

Previsualiza y prueba imágenes OG dinámicas en segundos.

Abrir el probador gratuito de imágenes OG

Tema