⚠ Advertencia Image

Faltan las dimensiones de og:image — Por qué debes especificar ancho y alto

Especificar og:image:width y og:image:height ayuda a las plataformas a renderizar tu imagen correctamente.

¿Qué son las dimensiones de og:image?

Las meta etiquetas og:image:width y og:image:height indican a las plataformas sociales el tamaño exacto de tu imagen Open Graph antes de descargarla. Esto les permite renderizar el diseño de la previsualización correctamente sin esperar a que la imagen se cargue.

¿Por qué es importante?

Sin dimensiones explícitas:

  • Cambio de diseño — El área de previsualización puede saltar o redimensionarse mientras la imagen se carga
  • Renderizado más lento — Las plataformas deben descargar primero la imagen para determinar su tamaño
  • Visualización incorrecta — Algunas plataformas pueden recortar o escalar mal la imagen sin conocer su relación de aspecto
  • Problemas de caché — El rastreador de Facebook puede agotar el tiempo de espera antes de obtener las dimensiones de la imagen

Cómo solucionarlo

Añade las etiquetas de ancho y alto junto a tu og:image:

<meta property="og:image" content="https://yoursite.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Dimensiones recomendadas

El tamaño universalmente recomendado para imágenes OG es 1200 x 630 píxeles (relación de aspecto 1.91:1). Funciona bien en todas las plataformas principales:

PlataformaRecomendadoMínimo
Facebook1200x630600x315
Twitter/X1200x628300x157
LinkedIn1200x627200x200
Discord1200x630256x256
WhatsApp1200x630300x200

Implementación según el framework

Next.js (App Router):

export const metadata = {
  openGraph: {
    images: [{
      url: 'https://yoursite.com/og-image.jpg',
      width: 1200,
      height: 630,
    }],
  },
}

HTML:

<meta property="og:image" content="https://yoursite.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Verifica tus etiquetas Open Graph

Artículos relacionados

✕

og:image rota

La URL de og:image no devuelve una imagen válida. Las plataformas sociales mostrarán una vista previa rota o vacía.

 ℹ

La URL canónica difiere de la URL de la página

La URL canónica apunta a una URL diferente a la de la página actual.

 ℹ

El charset no es la primera etiqueta meta

La declaración de charset debería ser el primer elemento dentro de <head>.

 ℹ

og:description podría ser más larga

Tienes espacio para una descripción más detallada que aumente la interacción.

 ⚠

og:description contiene una URL

La og:description debería ser un resumen legible, no una URL.

 ⚠

Keyword stuffing en og:description

Repetir las mismas palabras excesivamente en la descripción se percibe como spam.