Herramienta para Previsualizar y Generar Etiquetas Open Graph para tu aplicación o sitio web

✅ El probador OpenGraph permite previsualizar y generar metatags en un solo lugar con un clic

Ejemplo: https://opengraph.dev
Funciona para Facebook, Whatsapp, Twitter, LinkedIn, Wordpress...
Hero Image

Optimiza tu sitio web con etiquetas Open Graph

Descubre cómo el Protocolo Open Graph mejora el compartir en redes sociales

¿Qué es Open Graph (OG)?

El Protocolo Open Graph, comúnmente conocido como OGP, es crucial para definir cómo aparece el contenido de tu sitio web en las redes sociales. Implementar etiquetas Open Graph asegura que se muestren imágenes, títulos y descripciones específicas cuando tu contenido se comparte en línea.

Tamaño óptimo de imagen para Open Graph

Para maximizar el impacto en dispositivos de alta resolución, usa imágenes de Open Graph que tengan al menos 1200 píxeles de ancho. Facebook, un líder en redes sociales, recomienda imágenes con una proporción de 1.91:1 para mostrar la imagen completa en el Feed sin recortes.

Integración fácil de etiquetas Open Graph

Integra etiquetas Open Graph sin esfuerzo utilizando herramientas como OpenGraph.dev. Genera e inserta las metaetiquetas en la sección 'head' de tu sitio web para mejorar la visibilidad de tu sitio en redes sociales.

La importancia de Open Graph en SEO

Las etiquetas Open Graph optimizadas aumentan significativamente la probabilidad de que tu contenido sea notado y clickeado en redes sociales, lo que conduce a más tráfico hacia tu sitio. Son esenciales para hacer que tu contenido se destaque en los saturados feeds de redes sociales.

¿Qué son las etiquetas Open Graph?

Las etiquetas Open Graph son elementos HTML <meta> ubicados dentro del <head> de una página web que describen cómo debe aparecer la página cuando su URL se comparte en otro lugar — un feed de Facebook, una publicación en X, una actualización de LinkedIn, un chat de WhatsApp, un servidor de Discord, un hilo de iMessage o un canal de Slack. El protocolo Open Graph fue introducido originalmente por Facebook en 2010 y desde entonces se ha convertido en el estándar de facto para las vistas previas de enlaces en prácticamente todas las plataformas importantes. Un conjunto completo de etiquetas meta Open Graph te da control total sobre el título, la descripción, la imagen, el tipo y la URL canónica que aparecen dentro de la tarjeta de vista previa enriquecida — convirtiendo un simple hipervínculo en un fragmento llamativo que supera consistentemente a un enlace simple en tasa de clics.

Un conjunto mínimo viable de etiquetas meta Open Graph 

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary of the page." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />

Open Graph en distintas plataformas sociales

Casi todas las redes sociales y mensajería principales leen los metadatos de Open Graph, pero cada una aplica sus propias reglas sobre tamaño de imagen, caché y alternativas. Cumple con el requisito más estricto y el mismo conjunto de imágenes funcionará en todas partes.

Facebook

El mayor consumidor de datos Open Graph. Usa og:title, og:description y og:image. La imagen recomendada es de 1200×630 px con una proporción de 1,91:1 para que se muestre sin recortes en el News Feed. La caché es agresiva — usa el Sharing Debugger para refrescar tras un cambio.

X (Twitter)

Recurre a las etiquetas Open Graph cuando faltan los meta de Twitter Card, pero para obtener una tarjeta de vista previa grande también debes declarar twitter:card con valor summary_large_image y twitter:image. La imagen debe pesar menos de 5 MB y medir al menos 300×157 px; 1200×630 es el valor predeterminado seguro.

LinkedIn

Lee og:title, og:description, og:image y og:type. La imagen debe pesar menos de 5 MB y medir al menos 1200×627 px (proporción 1,91:1). LinkedIn almacena en caché el primer rastreo durante unos siete días — usa el Post Inspector para forzar una nueva captura tras publicar cambios.

WhatsApp & iMessage

Ambos mensajeros recuperan las etiquetas Open Graph por HTTPS y tienen un presupuesto estricto para el tamaño de imagen. WhatsApp trunca todo lo que supera ~300 KB, así que optimiza la imagen y declara og:image:width y og:image:height para acelerar el renderizado. iMessage prefiere una imagen cuadrada 1:1 cuando está disponible, así que considera proporcionar ambas proporciones mediante varias etiquetas og:image.

Discord, Slack & Telegram

Las tres renderizan vistas previas a partir del trío estándar og:title, og:description e og:image. Discord también respeta theme-color para el color de acento de la barra lateral. Telegram elimina iframes y JS — asegúrate de que tus etiquetas estén presentes en el HTML inicial renderizado en el servidor, no inyectadas en tiempo de ejecución.

Pinterest & Reddit

Pinterest extiende Open Graph con article:author y los tipos de Rich Pin. Reddit toma og:title y og:image cuando se envía un enlace, y usa la imagen como miniatura de la publicación. Ambos premian las imágenes en formato vertical o cuadrado (de 2:3 a 1:1) frente a los banners anchos 1,91:1.

Añade etiquetas meta Open Graph a tu framework

Coloca estos fragmentos en tu proyecto para conectar etiquetas Open Graph en las pilas más comunes. Cada ejemplo renderiza el mismo conjunto mínimo viable en el servidor para que los rastreadores las vean en el primer render.

Next.js (App Router)

ts
// app/page.tsx
export const metadata = {
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A short, compelling summary of the page.',
    url: 'https://example.com/article',
    siteName: 'Example',
    images: [{ url: 'https://example.com/preview.png', width: 1200, height: 630 }],
    locale: 'en_US',
    type: 'website'
  }
}

Nuxt 3

ts
<script setup lang="ts">
useSeoMeta({
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  ogTitle: 'Your Page Title',
  ogDescription: 'A short, compelling summary of the page.',
  ogImage: 'https://example.com/preview.png',
  ogUrl: 'https://example.com/article',
  ogType: 'website',
  ogLocale: 'en_US'
})
</script>

Astro

astro
---
const { title, description, image, url } = Astro.props
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:url" content={url} />
  <meta property="og:type" content="website" />
</head>

WordPress

php
// functions.php — works without an SEO plugin
add_action('wp_head', function () {
  if (!is_singular()) return;
  global $post;
  $img = get_the_post_thumbnail_url($post->ID, 'full') ?: '';
  printf('<meta property="og:title" content="%s" />', esc_attr(get_the_title($post)));
  printf('<meta property="og:description" content="%s" />', esc_attr(wp_trim_words($post->post_excerpt ?: $post->post_content, 30)));
  printf('<meta property="og:image" content="%s" />', esc_url($img));
  printf('<meta property="og:url" content="%s" />', esc_url(get_permalink($post)));
  echo '<meta property="og:type" content="article" />';
});

Preguntas frecuentes sobre Open Graph

Respuestas rápidas a las preguntas que desarrolladores y equipos de contenido nos hacen con más frecuencia al implementar etiquetas meta Open Graph.

¿Las etiquetas Open Graph ayudan al SEO?
Las etiquetas Open Graph no son una señal directa de ranking en la búsqueda de Google, pero mejoran significativamente los resultados indirectos de SEO. Vistas previas más atractivas generan mayores tasas de clics, más compartidos y más enlaces entrantes — todo lo cual retroalimenta el ranking. También aclaran el título, la imagen y el idioma de una página a los rastreadores, reduciendo la posibilidad de que Google elija una miniatura no relacionada o genere su propio fragmento.
¿Cuál es la diferencia entre Open Graph y las Twitter Cards?
Open Graph es el estándar multiplataforma. Twitter Cards es el formato paralelo de X con su propio espacio de nombres twitter:*. X recurre a Open Graph cuando faltan las etiquetas específicas de Twitter, así que para la mayoría de los sitios basta con publicar Open Graph más una sola declaración twitter:card para activar la vista previa de imagen grande.
¿Cuál es el tamaño de imagen Open Graph recomendado?
1200×630 píxeles (proporción 1,91:1) es el valor predeterminado seguro — satisface a Facebook, LinkedIn, las tarjetas grandes de X, Slack y Discord sin recortes. Mantén el archivo por debajo de 1 MB para que WhatsApp e iMessage lo descarguen. Si tu audiencia está muy centrada en Pinterest, proporciona también una imagen vertical adicional de 1000×1500.
¿Por qué mi vista previa sigue mostrando la imagen antigua después de cambiarla?
Todas las grandes plataformas almacenan en caché los datos de Open Graph. Facebook, LinkedIn y X se actualizan con una cadencia distinta (de minutos a una semana). Usa el Sharing Debugger de Facebook, el Post Inspector de LinkedIn y el Card Validator de X para forzar un nuevo rastreo, y añade un parámetro anticaché a og:image cuando reemplaces una imagen con la misma URL.
¿Las aplicaciones de una sola página (SPA) necesitan renderizado del lado del servidor para Open Graph?
Sí, para casi todas las plataformas sociales. WhatsApp, LinkedIn, Slack, Discord y Telegram no ejecutan JavaScript al rastrear una URL, por lo que las meta etiquetas renderizadas solo en el cliente son invisibles para ellas. Usa SSR (Next.js, Nuxt, Astro), generación estática o un servicio dedicado de prerenderizado para asegurarte de que las etiquetas estén en la respuesta HTML inicial.
¿Qué pasa si una página no tiene ninguna etiqueta Open Graph?
La plataforma recurre a lo que pueda extraer: el <title>, la meta description y la primera imagen de tamaño razonable que encuentre en el documento. Los resultados son impredecibles — a menudo una imagen equivocada, un título truncado o ninguna vista previa. Añadir aunque sea tres etiquetas (og:title, og:description, og:image) elimina las conjeturas.
¿Los nombres de las etiquetas Open Graph distinguen mayúsculas y minúsculas?
Sí. Usa minúsculas exactamente como define el protocolo — og:title, no OG:Title. La mayoría de los rastreadores ignoran silenciosamente los nombres de propiedades con mayúsculas mezcladas, lo cual es una de las razones más comunes por las que una vista previa deja de funcionar tras un refactor.
¿Qué herramientas puedo usar para depurar etiquetas Open Graph?
Además de la vista previa de OpenGraph.dev, cada plataforma ofrece su propio validador: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), la documentación de X Cards en developer.x.com, el validador de Rich Pins de Pinterest y el @WebpageBot de Telegram para limpiar su caché.