Etiquetas Open Graph: guía completa para vistas previas al compartir

Las etiquetas Open Graph son etiquetas <meta> en el <head> de una página que deciden cómo se ve al compartirla: el título, la descripción breve, la imagen y el enlace. Facebook creó el protocolo, y hoy lo leen LinkedIn, X, Slack, Discord, WhatsApp, iMessage y la mayoría de las demás apps. Cuatro etiquetas forman el núcleo, og:title, og:type, og:image y og:url, y añadir una descripción, el tamaño de la imagen y una etiqueta de Twitter card cubre casi todas las plataformas.

Las etiquetas Open Graph que necesita cada página

Pega esto en el head de una página y cambia los valores. Cada etiqueta usa property, no name, y todas las URL son absolutas.

<head>
  <title>Spring menu at Harbour Kitchen</title>
  <meta name="description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://harbourkitchen.example/spring" />
  <meta property="og:title" content="Spring menu at Harbour Kitchen" />
  <meta property="og:description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />
  <meta property="og:site_name" content="Harbour Kitchen" />
  <meta property="og:locale" content="en_GB" />
  <meta property="og:image" content="https://harbourkitchen.example/og/spring.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="The spring menu title over a soft green gradient" />

  <!-- X (Twitter) -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@harbourkitchen" />
</head>

La og:image: tamaño y formato

La imagen es lo que la gente realmente ve. Usa 1200×630 píxeles, una proporción de aproximadamente 1,91:1, que es el tamaño que esperan las plataformas para las vistas previas grandes y el que figura en tamaño de imagen Open Graph. Aleja de los bordes las palabras importantes y el logo, porque algunas apps recortan a cuadrado o redondean las esquinas.

Guárdala en PNG cuando sea sobre todo tipografía y degradado, o en JPEG de alta calidad para fotografías, y mantén el archivo ligero, idealmente unos cientos de kilobytes, ya que las plataformas fijan sus propios límites de tamaño y los archivos grandes cargan despacio en los feeds. PNG vs JPG explica la elección, y optimizar imágenes para la web cubre la compresión.

Etiquetas de Twitter card para X

X usa sus propias etiquetas twitter:, escritas con name en lugar de property. La que importa es twitter:card. Cuando faltan twitter:title, twitter:description o twitter:image, X recurre a las etiquetas Open Graph equivalentes, así que rara vez necesitas duplicarlas.

Etiquetas Open Graph para artículos

Las entradas de blog y las páginas de noticias pueden decir más de sí mismas con og:type en article y unas pocas propiedades extra. Algunas apps muestran la fecha o el autor, y ayudan a las plataformas a entender la página.

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-10-01T09:00:00Z" />
<meta property="article:modified_time" content="2026-10-03T14:30:00Z" />
<meta property="article:author" content="https://harbourkitchen.example/about/ana" />
<meta property="article:section" content="Menus" />

Configurar etiquetas Open Graph en un framework

La mayoría de los frameworks generan estas etiquetas a partir de datos. En Next.js, exporta un objeto metadata desde la página o el layout y el framework escribe las etiquetas por ti. Define una vez metadataBase para que las rutas de imagen relativas pasen a ser absolutas.

export const metadata = {
  metadataBase: new URL('https://harbourkitchen.example'),
  title: 'Spring menu at Harbour Kitchen',
  description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
  openGraph: {
    type: 'website',
    url: '/spring',
    title: 'Spring menu at Harbour Kitchen',
    description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
    siteName: 'Harbour Kitchen',
    images: [{ url: '/og/spring.png', width: 1200, height: 630, alt: 'The spring menu title over a soft green gradient' }],
  },
  twitter: { card: 'summary_large_image', site: '@harbourkitchen' },
}

Probar y corregir las vistas previas al compartir

1. 1

   Mira el código fuente

   Abre el código fuente de la página, no el inspector, y confirma que las etiquetas están en el HTML del servidor. Muchos rastreadores no ejecutan JavaScript.

2. 2

   Comprueba la URL de la imagen

   Pega la dirección de og:image en una ventana privada. Debería cargar sin iniciar sesión.

3. 3

   Vuelve a rastrear

   Pasa la URL por el Sharing Debugger de Facebook y el Post Inspector de LinkedIn para vaciar sus cachés.

4. 4

   Versiona la imagen

   Si se queda pegada una imagen antigua, cambia su nombre de archivo o añade un parámetro como ?v=2 y vuelve a rastrear.

5. 5

   Compártelo en privado

   Envíate el enlace en Slack o en una app de mensajería para ver una vista previa real.

Las etiquetas son la parte fácil; la imagen es el trabajo de diseño, y tiene que leerse al tamaño de una miniatura. En Gradiently, la vista previa de enlace es uno de los tamaños incluidos, a 1200×630, el Mark mantiene su zona más tranquila detrás de las palabras, y el Designer puede crear la imagen para compartir de una página a partir de una frase, y luego los tamaños de publicación a juego para todas las plataformas.