Imágenes OG a Escala

Generar og:image a escala significa crear una vista previa social única y correcta para cada página de un sitio grande — miles de entradas de blog, productos o páginas de documentación — de forma automática. FastOG renderiza cada imagen bajo demanda (1 render) y Cloudflare almacena en caché las URLs idénticas para siempre, por lo que la escala no multiplica el coste ni el tiempo de configuración.

El problema de las imágenes únicas a escala

Crear manualmente miles de imágenes de 1200×630 no es viable. La mayoría de los equipos recurren a una única tarjeta genérica para todo el sitio, lo que supone una oportunidad perdida, porque una tarjeta por página con el título real consigue más compartidos y clics. La solución es el renderizado determinista bajo demanda: la imagen se deriva de los datos propios de la página en el momento del renderizado.

Por qué FastOG escala

La idea clave son URLs firmadas con contenido y almacenadas en caché:

Firmas una URL a partir del título de la página y los campos en el momento del renderizado (una función pura del contenido).
El rastreador obtiene la URL una vez; FastOG renderiza el PNG (1 renderizado) y lo almacena en caché en el borde.
Cada obtención posterior de la misma URL se sirve desde la caché: instantánea y no se cuenta.

Así, 10 000 páginas distintas cuentan 10 000 renderizados una sola vez, y las comparticiones ilimitadas no cuestan nada después.

Despliegue por lotes / sistemático

Para desplegar og:image en todo un sitio, genera las URLs en tiempo de compilación o al publicar cada página:

tsx

// Static generation — generateMetadata per route
export async function generateStaticParams() {
    return posts.map((p) => ({ slug: p.slug }));
}

export function generateMetadata({ params }) {
    const post = posts.find((p) => p.slug === params.slug);
    return {
        openGraph: {
            images: [generateOgImageUrl({
                template: "blog",
                title: post.title,
                subtitle: post.excerpt,
                author: post.author,
            })],
        },
    };
}

Patrones que mantienen el coste bajo a escala

Patrón	Por qué ayuda
Firmar en tiempo de compilación/renderizado	URLs deterministas → caché compartida
Reutilizar una plantilla por tipo de contenido	Marca coherente, menos decisiones de diseño
Almacenar en caché URLs idénticas	Las comparticiones repetidas no cuentan
Generar al publicar, no en cada petición	Evita renderizados en frío en la primera compartición

Preguntas frecuentes

¿Cuánto cuestan 1.000 o 10.000 páginas?

Un render por imagen única. 10.000 páginas únicas = 10.000 renders una sola vez; los re-compartidos ilimitados no cuestan nada. Consulta precios para los planes de Dynamic API.

¿Qué pasa con las páginas cuyo contenido cambia con frecuencia?

Cada cambio de contenido genera una nueva URL y un nuevo render (1 unidad de cuota). Las páginas estables permanecen en caché.

¿Puedo generar imágenes OG durante una compilación estática?

Sí: muchos equipos generan y almacenan la URL de la imagen en el momento de la compilación/publicación (SSG), de modo que nunca hay un render en frío en el primer compartido.

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