Imágenes OG dinámicas: vistas previas de enlaces automáticas

Una imagen OG dinámica es una imagen de vista previa de enlace que tu sitio genera para cada página, en lugar de que alguien la diseñe a mano. Cuando una página se comparte en LinkedIn, en Slack o en una app de mensajería, la plataforma descarga la imagen indicada en la etiqueta og:image de la página. Si esa imagen se construye con el título y los datos de la propia página, cada artículo, producto y perfil obtiene una vista previa que dice exactamente lo que es.

Esta guía cubre el diseño de la plantilla, las dos formas de generar imágenes, las etiquetas que las conectan, la caché y las pruebas. Para el tamaño en sí y cómo recortan las plataformas, mira nuestra guía del tamaño de la imagen Open Graph.

Por qué cada página debería tener su propia imagen OG

La vista previa suele ser lo primero que alguien ve de tu página, y en un feed saturado es casi todo lo que ve. Una única tarjeta genérica con el logotipo para todo el sitio hace que cada enlace compartido se vea igual, así que ninguno dice qué hay detrás. Una imagen por página lleva el título real de la página con tu identidad visual: reconocible como tuya y lo bastante concreta para ganarse el clic.

Diseñar una plantilla de imagen OG

Diseña la plantilla como diseñarías una miniatura, porque así es como suele verse. Las vistas previas aparecen a una fracción de su tamaño real, y algunas apps muestran una versión más pequeña y recortada. Las palabras que importan deben sobrevivir a ambas.

1. 1

   Empieza en 1200 × 630

   Diseña a tamaño completo y luego revisa a una cuarta parte. Si no puedes leer el título a 300 píxeles de ancho, es demasiado pequeño o demasiado largo.

2. 2

   Usa el título, no toda la página

   Una línea de tipografía grande, o dos como máximo. Los títulos largos necesitan una regla: acórtalos en los datos, o reduce el tamaño de la fuente cuando superen una longitud fijada.

3. 3

   Mantén márgenes amplios

   Mantén el título y el logotipo lejos de los bordes para que un recorte más ajustado no los corte. Unos 60 a 80 píxeles de margen a este tamaño son un buen punto de partida.

4. 4

   Añade un dato de contexto

   Una pequeña etiqueta con la sección, el autor o la fecha ayuda a situar el enlace. Más de una línea extra convierte una vista previa en un documento.

5. 5

   Haz que el fondo lleve la marca

   Un degradado o material coherente hace más por el reconocimiento que un logotipo grande. Mantén su parte más brillante y cargada lejos de las palabras; texto sobre un degradado explica cómo.

Generar imágenes OG al compilar o bajo demanda

Hay dos momentos para crear la imagen. Al compilar, tu sitio renderiza una imagen para cada página una sola vez y la sirve como archivo estático: rápido, barato e ideal para artículos y documentación. Bajo demanda, una ruta dibuja la imagen la primera vez que se pide: lo adecuado para páginas cuyos datos cambian, como el número de seguidores de un perfil o el precio de un producto. Las imágenes bajo demanda deben guardarse en caché, o cada compartición y cada visita de un rastreador repite el trabajo.

La mayoría de los frameworks tienen una forma de dibujar una imagen a partir de un marcado parecido a HTML. En Next.js, un archivo opengraph-image.tsx junto a una ruta genera la imagen de esa ruta con ImageResponse, y Next añade las metaetiquetas por ti. La misma idea funciona en otros sitios con un navegador sin interfaz que hace una captura de una página de plantilla.

// app/guide/[slug]/opengraph-image.tsx
import { readFile } from 'node:fs/promises'
import { join } from 'node:path'
import { ImageResponse } from 'next/og'
import { getArticle } from '@/lib/articles'

export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const article = await getArticle(slug)
  const font = await readFile(join(process.cwd(), 'assets/Inter-SemiBold.ttf'))

  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end',
          padding: 72,
          backgroundImage: 'linear-gradient(135deg, #120a2e 0%, #4c1d95 55%, #db2777 100%)',
          color: '#ffffff',
          fontFamily: 'Inter',
        }}
      >
        <div style={{ fontSize: 28, opacity: 0.8 }}>Field Guide</div>
        <div style={{ fontSize: article.title.length > 40 ? 60 : 76, lineHeight: 1.1 }}>
          {article.title}
        </div>
      </div>
    ),
    { ...size, fonts: [{ name: 'Inter', data: font, weight: 600, style: 'normal' }] },
  )
}

Las etiquetas Open Graph que conectan la imagen

Las plataformas encuentran la imagen mediante metaetiquetas en el head de la página. La dirección de la imagen debe ser absoluta, con https:// y el dominio, porque el rastreador la lee desde fuera de tu sitio. Declarar el ancho y el alto ayuda a algunas plataformas a componer la vista previa antes de haber descargado la imagen, y el texto alternativo la describe para quienes usan lectores de pantalla.

<meta property="og:title" content="How to fix gradient banding" />
<meta property="og:description" content="Why gradients show stripes, and four fixes that work." />
<meta property="og:image" content="https://example.com/guide/gradient-banding/opengraph-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words How to fix gradient banding on a violet gradient" />
<meta name="twitter:card" content="summary_large_image" />

Open Graph 1200 × 630

1200 × 630

Enlace de LinkedIn 1200 × 627

1200 × 627

Publicación de X 1600 × 900

1600 × 900

Caché y pruebas de las imágenes OG

Las plataformas guardan en caché las vistas previas, a veces durante mucho tiempo. Si cambias una imagen pero mantienes su dirección, la gente puede seguir viendo la antigua. Añade una versión a la dirección, como ?v=2, cuando cambie el diseño, o pide a la plataforma que vuelva a leer la página. En las imágenes bajo demanda, envía cabeceras de caché para que tu servidor y cualquier CDN guarden el resultado.

• Pega la página en el Post Inspector de LinkedIn para ver la vista previa y renovar su caché.
• Usa el Sharing Debugger de Meta para Facebook, que también puede volver a leer una página.
• Pega el enlace en un borrador de publicación en X, o en un chat privado de Slack o WhatsApp, para ver la vista previa real sin enviar nada.
• Abre directamente la dirección de la imagen en un navegador para confirmar que devuelve un PNG, del tamaño correcto y sin pedir inicio de sesión.

Trata las imágenes OG como parte de cualquier lanzamiento: están en la lista de nuestra guía de gráficos para el día de lanzamiento, y el conjunto completo de formatos está en tamaños de imágenes para redes sociales. Si diseñas tus vistas previas en Gradiently, su API puede renderizar un diseño guardado como un PNG exacto de 1200 × 630, lo que conviene a los flujos automáticos y a los agentes de IA que crean imágenes por ti.