Imágenes OG para entradas de blog
Una imagen OG para entradas de blog es la imagen de vista previa social de 1200×630 que se muestra cuando alguien comparte tu artículo en X, LinkedIn, Facebook, Slack o WhatsApp. FastOG la genera dinámicamente bajo demanda a partir del título, el extracto y el autor de tu entrada, sin trabajo de diseño, sin subidas, sin suscripciones, sin necesidad de iniciar sesión para empezar.
Por qué cada entrada de blog necesita su propia imagen OG
Un enlace compartido sin tarjeta, o con una genérica desactualizada, se confunde con cualquier otra publicación. Una tarjeta por entrada con el título real y un diseño limpio consigue más compartidos y más clics. El coste de generar una por entrada manualmente es el motivo por el que la mayoría de los blogs se conforman con una única imagen por defecto — y ese es exactamente el problema que FastOG elimina.
Cómo obtener una imagen OG dinámica para una entrada de blog
Firmas una URL en el momento de renderizar la página con template=blog, el título de la entrada, un extracto y el autor. El rastreador social la obtiene, FastOG renderiza el PNG una vez, y Cloudflare lo almacena en caché para que cada compartido posterior sea instantáneo y gratuito.
// Next.js App Router — app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
title: post.title,
openGraph: {
images: [generateOgImageUrl({
template: "blog",
title: post.title,
subtitle: post.excerpt,
author: post.author.name,
})],
},
};
}
Usa
template=blogpara una tarjeta de blog dedicada con autor y titular, odefaultpara un diseño más limpio solo con título. Todas las plantillas se renderizan a 1200×630.
Qué plantilla se adapta a tu blog
| Si tu blog… | Usa la plantilla | Ventaja |
|---|---|---|
| Muestra autor + extracto | blog |
incluye la línea de autor |
| Es principalmente título + eslogan | default |
minimalista, centrada en la marca |
| Usa una foto o imagen de portada | editorial / image-right |
diseño protagonizado por la foto |
| Publica entradas de lanzamiento / producto | launch |
campos de versión y dominio |
Preguntas frecuentes
¿Cuánto cuesta FastOG para entradas de blog?
Una renderización por imagen única; las URL idénticas se almacenan en caché en el edge para siempre y no cuentan para tu cuota mensual.
¿Necesito regenerar una imagen cuando edito una entrada?
Solo si cambian el título, el extracto o el autor: la URL depende del contenido, por lo que un cambio de contenido genera una URL nueva y una renderización nueva. Una URL sin cambios permanece en caché y no cuenta para tu cuota.
¿Puedo usar FastOG con mi framework de blog existente?
Sí. Existen signers (funciones de firma) listos para usar en Next.js, React, SvelteKit, Vue/Nuxt, Astro, Express, Vanilla Node.js, JavaScript, PHP/Laravel, Python y Ruby/Rails. Consulta la página del SDK.