¿Odias los anuncios? Ir Sin publicidad Hoy 

Generación Automatizada de Imágenes OG Crea tarjetas sociales dinámicas con una API de captura de pantalla

Publicado el 2 de feb. de 2026

Deja de crear manualmente imágenes de vista previa social. Aprende a generar hermosas imágenes OG sobre la marcha utilizando plantillas HTML y una API de captura de pantalla. Tutorial con mucho código y ejemplos reales.

Generación Automatizada de Imágenes OG: Crea Tarjetas Sociales Dinámicas con una API de Capturas de Pantalla

ANUNCIO PUBLICITARIO · ¿ELIMINAR?

Pasas horas creando la publicación perfecta para tu blog, le das a publicar y la compartes en Twitter. Y luego… una aburrida caja gris. Sin vista previa. Sin imagen. Solo un enlace triste y desprotegido que nadie quiere hacer clic.

¿Te suena familiar? Las imágenes OG (Open Graph) son los héroes anónimos del contenido compartido en redes sociales. Son literalmente la diferencia entre que tu contenido sea ignorado o que reciba clics. Y si todavía las estás creando manualmente en Figma para cada página, tenemos que hablar.

¿Qué Son las Imágenes OG (Y Por Qué Deberías Preocuparte)?

Las imágenes OG son las tarjetas de vista previa que aparecen cuando compartes un enlace en redes sociales, Slack, Discord o en cualquier lugar que despliegue URLs. Se definen en el HTML de tu página <meta> etiquetas:

<meta property="og:image" content="https://yoursite.com/og/your-page.png" />
<meta property="og:title" content="Your Awesome Title" />
<meta property="og:description" content="A compelling description" />

¿El problema? Crear estas imágenes manualmente no es escalable. ¿Tienes 100 publicaciones de blog? Son 100 imágenes. ¿Tienes páginas de productos dinámicas? Buena suerte para mantener el ritmo.

La Solución: Generar Imágenes OG Sobre la Marcha

Esta es la estrategia: en lugar de pre-generar imágenes, renderizaremos una plantilla HTML y le tomaremos una captura de pantalla en tiempo real utilizando una API de capturas de pantalla. El flujo se ve así:

Crea una plantilla HTML para tu tarjeta OG
Alójala con parámetros dinámicos (título, autor, etc.)
Apunta tu og:image etiqueta meta a la API de capturas de pantalla
Hecho. Cada página obtiene una tarjeta de vista previa única y atractiva.

Paso 1: Construye tu Plantilla OG

Primero, crea una página HTML simple que renderice tu tarjeta social. Puede ser una ruta dedicada en tu aplicación o un archivo HTML estático.

<!-- /og-template?title=Hello%20World&author=John -->
<!DOCTYPE html>
<html>
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 1200px;
      height: 630px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 60px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      font-family: system-ui, sans-serif;
      color: white;
    }
    h1 {
      font-size: 64px;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 24px;
    }
    .author {
      font-size: 28px;
      opacity: 0.9;
    }
    .logo {
      position: absolute;
      bottom: 40px;
      right: 60px;
      font-size: 24px;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1 id="title">Your Title Here</h1>
  <p class="author">by <span id="author">Author Name</span></p>
  <div class="logo">yoursite.com</div>
  <script>
    const params = new URLSearchParams(window.location.search);
    document.getElementById('title').textContent = params.get('title') || 'Untitled';
    document.getElementById('author').textContent = params.get('author') || 'Anonymous';
  </script>
</body>
</html>

La clave aquí: 1200×630 píxeles. Ese es el tamaño mágico para las imágenes OG. Twitter, Facebook, LinkedIn, todos funcionan bien con esta dimensión.

Paso 2: Hazle una Captura de Pantalla con una API

Ahora, la parte divertida. En lugar de implementar Puppeteer en tu servidor (y lidiar con todo ese drama de Chrome sin cabeza), usa una API de capturas de pantalla para renderizar tu plantilla.

Aquí tienes un ejemplo de Node.js que muestra el patrón general:

// Generate OG image URL using a screenshot API
function getOgImageUrl(title, author) {
  const templateUrl = encodeURIComponent(
    `https://yoursite.com/og-template?title=${encodeURIComponent(title)}&author=${encodeURIComponent(author)}`
  );
  
  // Most screenshot APIs follow this pattern:
  // Pass your template URL + dimensions, get back an image
  return `https://your-screenshot-api.com/capture?` +
    `url=${templateUrl}` +
    `&width=1200` +
    `&height=630` +
    `&format=png`;
}

Paso 3: Intégralo en tus Etiquetas Meta

En la <head>de tu página, establece dinámicamente la imagen OG:

// Next.js example (pages/_app.js or layout.tsx)
import Head from 'next/head';

export default function BlogPost({ post }) {
  const ogImage = getOgImageUrl(post.title, post.author);
  
  return (
    <>
      <Head>
        <meta property="og:image" content={ogImage} />
        <meta property="og:title" content={post.title} />
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:image" content={ogImage} />
      </Head>
      <article>{/* Your content */}</article>
    </>
  );
}

Paso 4: Agrega Caché (¡Importante!)

No querrás llamar a la API cada vez que el rastreador de Twitter revise tu página. Configura una capa de caché:

// Edge function example (Vercel/Cloudflare)
export default async function handler(req) {
  const { title, author } = req.query;
  
  // Call your screenshot API
  const screenshotUrl = buildScreenshotUrl({
    url: `https://yoursite.com/og-template?title=${title}&author=${author}`,
    width: 1200,
    height: 630,
    format: 'png'
  });
  
  const response = await fetch(screenshotUrl);
  const imageBuffer = await response.arrayBuffer();
  
  return new Response(imageBuffer, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=86400, s-maxage=604800', // Cache for a week
    },
  });
}

Ahora tu etiqueta meta apunta a tu propio endpoint, que almacena en caché el resultado:

<meta property="og:image" content="https://yoursite.com/api/og?title=My%20Post&author=John" />

Consejos Pro 🔥

Usa fuentes web: Google Fonts funciona muy bien. Solo asegúrate de que se carguen antes de que se tome la captura de pantalla.
Agrega tu marca: Logos, degradados, patrones, haz que sea reconocible en un feed.
Mantén el texto grande: Las tarjetas sociales a menudo se ven como miniaturas. 48px+ para los títulos.
Prueba con validadores: Usa el Validador de Tarjetas de Twitter y el Depurador de Facebook para previsualizar.

Ejemplos del Mundo Real

Este patrón es utilizado por algunos de los mejores blogs de desarrollo:

Vercel/Next.js: Sus imágenes OG incluyen el título de la publicación, la fecha y el tiempo de lectura.
GitHub: Las tarjetas de repositorio muestran estrellas, forks y descripción.
Dev.to: Tarjetas de artículo con avatar del autor y recuento de reacciones.

Puedes hacer lo mismo en 20 minutos con una API de capturas de pantalla. Sin infraestructura que mantener, sin binarios de Chromium que manejar.

El Flujo Completo

// Full working example with error handling
async function generateOgImage(title, author, category) {
  const templateParams = new URLSearchParams({
    title: title.slice(0, 60), // Truncate long titles
    author,
    category: category || 'Blog'
  });
  
  const templateUrl = `https://yoursite.com/og-template?${templateParams}`;
  
  try {
    // Adapt this to your screenshot API of choice
    const response = await fetch(SCREENSHOT_API_ENDPOINT, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.SCREENSHOT_API_KEY}`
      },
      body: JSON.stringify({
        url: templateUrl,
        viewport: { width: 1200, height: 630 },
        format: 'png',
        waitUntil: 'networkidle' // Wait for fonts/images to load
      })
    });
    
    if (!response.ok) throw new Error('Screenshot failed');
    
    return await response.arrayBuffer();
  } catch (error) {
    console.error('OG generation failed:', error);
    // Return a fallback image
    return fetch('https://yoursite.com/default-og.png').then(r => r.arrayBuffer());
  }
}

¿Por Qué Usar una API de Capturas de Pantalla en Lugar de Auto-Alojar?

Tú podrías ejecutar Puppeteer tú mismo. Pero esto es lo que parece:

Imágenes Docker de más de 600 MB con Chromium
Picos de memoria que bloquean tu servidor
Procesos zombie que acechan tus contenedores
Problemas de renderizado de fuentes en diferentes entornos

O podrías simplemente… no hacerlo. Una API de capturas de pantalla maneja todo eso, y pagas por captura de pantalla en lugar de por hora de servidor. Para la mayoría de los sitios, eso es drásticamente más barato.

Empezar

¿Listo para que tus comparticiones en redes sociales se vean profesionales? Echa un vistazo a Snapopa para una API de capturas de pantalla construida específicamente para este caso de uso. Tendrás imágenes OG dinámicas funcionando en menos de 30 minutos.

Tu juego de Twitter está a punto de subir de nivel. 📈