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

[Canonical HTML page](https://gradiently.design/es/guide/open-graph-tags)

Cada enlace compartido se convierte en un pequeño cartel de tu página, hecho con unas pocas metaetiquetas. Si las aciertas, la vista previa parece diseñada; si falta una, las plataformas adivinan. Aquí está el conjunto completo, listo para copiar.

## The short version

- Las etiquetas Open Graph son metaetiquetas en el head de una página que indican a las redes sociales y apps de mensajería qué título, descripción e imagen mostrar cuando se comparte el enlace.
- El protocolo Open Graph considera og:title, og:type, og:image y og:url las etiquetas básicas obligatorias, y recomienda encarecidamente og:description y og:site_name.
- Una og:image de 1200×630 píxeles, referenciada con una URL https absoluta, funciona bien en Facebook, LinkedIn, X, Slack, iMessage y la mayoría de las demás apps.
- X lee twitter:card para elegir el formato de la vista previa y recurre a las etiquetas Open Graph para el título, la descripción y la imagen cuando faltan las suyas.
- Las plataformas guardan en caché las vistas previas, así que después de cambiar las etiquetas tienes que volver a rastrear la URL en una herramienta de depuración como el Sharing Debugger de Facebook o el Post Inspector de LinkedIn.

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.

```html
<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>
```

Un conjunto completo y funcional. X tomará el título, la descripción y la imagen de las etiquetas Open Graph de arriba.

| Etiqueta | Qué hace | Consejos |
| --- | --- | --- |
| `og:title` | El titular en negrita de la vista previa | Menos de unos 60 caracteres; no hace falta el nombre del sitio |
| `og:description` | Una o dos líneas bajo el título | Entre 110 y 160 caracteres aproximadamente; algunas apps la ocultan |
| `og:image` | La imagen de la vista previa | URL https absoluta, 1200×630 |
| `og:url` | La dirección canónica de la página | Que coincida con tu enlace canónico, sin parámetros de seguimiento |
| `og:type` | Qué es la página | `website` para la mayoría de las páginas, `article` para publicaciones |
| `og:site_name` | Tu marca, en pequeño | Igual en todas las páginas |
| `og:image:alt` | Una descripción de la imagen | Algunos lectores de pantalla la leen en voz alta en ciertas plataformas |

Las etiquetas que importan en la práctica. La lista completa está en la web del propio protocolo, ogp.me.

## 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](https://gradiently.design/es/guide/open-graph-image-size). Aleja de los bordes las palabras importantes y el logo, porque algunas apps recortan a cuadrado o redondean las esquinas.

- Open Graph 1200×630: 1200 × 630
- Imagen de enlace LinkedIn 1200×627: 1200 × 627
- Recorte cuadrado 1200×1200: 1200 × 1200

La forma de vista previa grande y el cuadrado al que recortan algunas apps de chat y la tarjeta summary de X. Centra el mensaje para que sobreviva a ambos.

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](https://gradiently.design/es/guide/png-vs-jpeg) explica la elección, y [optimizar imágenes para la web](https://gradiently.design/es/guide/lighthouse-image-performance) cubre la compresión.

Imagen panorámica para compartir de 1200 por 630 con el nombre de un restaurante, un titular sobre la carta de primavera y una línea de reservas sobre un degradado suave

Una imagen para compartir hecha para la vista previa: pocas palabras, centradas y lo bastante grandes para leerse al tamaño que la muestra un feed.

> **La imagen tiene que ser accesible** Las plataformas descargan `og:image` desde sus propios servidores. Una ruta relativa, una página tras un inicio de sesión, un cortafuegos que bloquea bots desconocidos o una URL firmada caducada te dejan una vista previa en blanco.

## 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.

| Etiqueta | Valores | Notas |
| --- | --- | --- |
| `twitter:card` | `summary_large_image` o `summary` | Imagen grande, o una miniatura cuadrada pequeña |
| `twitter:site` | `@yourbrand` | La cuenta del sitio |
| `twitter:creator` | `@author` | El autor de un artículo |
| `twitter:image:alt` | Texto | Úsala cuando la imagen sea distinta de la versión og |

Añade solo estas y deja que Open Graph aporte el resto.

## 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.

```html
<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" />
```

Las fechas usan ISO 8601. Sé honesto con modified_time; actualízalo solo cuando el contenido cambie de forma significativa.

## 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.

```ts
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' },
}
```

Consulta la documentación de tu versión del framework, porque las API de metadatos cambian entre versiones. Para imágenes generadas por página, mira [imágenes OG dinámicas](https://gradiently.design/es/guide/dynamic-og-images).

## Probar y corregir las vistas previas al compartir

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. **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. **Vuelve a rastrear** Pasa la URL por el Sharing Debugger de Facebook y el [Post Inspector de LinkedIn](https://www.linkedin.com/post-inspector/) para vaciar sus cachés.
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. **Compártelo en privado** Envíate el enlace en Slack o en una app de mensajería para ver una vista previa real.

### Vista previa en blanco o incorrecta

- Etiquetas inyectadas con JavaScript en el cliente
- Ruta relativa en og:image
- og:url apunta a otra página
- Imagen diminuta o con una forma rara
- Etiquetas cambiadas, vista previa igual

### Solución

- Renderiza las etiquetas en el servidor
- Usa una URL https completa
- Haz que og:url coincida con la dirección canónica
- Exporta a 1200×630
- Vuelve a rastrear, o cambia el nombre de la imagen

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](https://gradiently.design/es/guide/social-media-image-sizes).

## FAQ

### ¿Qué son las etiquetas Open Graph?

Metaetiquetas en el head de una página, como og:title y og:image, que indican a las redes sociales y apps de mensajería qué mostrar cuando se comparte el enlace.

### ¿Qué etiquetas Open Graph son obligatorias?

El protocolo enumera og:title, og:type, og:image y og:url como las etiquetas básicas. Añade og:description y og:site_name para una vista previa completa.

### ¿Qué tamaño debe tener una og:image?

1200×630 píxeles funciona en Facebook, LinkedIn, X y la mayoría de las apps de chat. Usa una URL https absoluta y mantén centrado el contenido clave.

### ¿Necesito etiquetas de Twitter card si ya tengo Open Graph?

Añade `twitter:card`, normalmente con el valor `summary_large_image`. X recurre a Open Graph para el título, la descripción y la imagen.

### ¿Por qué no se actualiza la vista previa de mi enlace?

Las plataformas guardan en caché las vistas previas. Vuelve a rastrear la URL en el Sharing Debugger de Facebook o en el Post Inspector de LinkedIn, o cambia el nombre del archivo de imagen.

### ¿Debo usar property o name en las etiquetas og?

Las etiquetas Open Graph usan `property`, y las de Twitter usan `name`. La mayoría de los analizadores aceptan cualquiera de los dos, pero seguir la convención evita sorpresas.