iSocialWeb

Open Graph

Las etiquetas que deciden cómo se ve tu enlace al compartirlo

Open Graph es un protocolo de etiquetas meta que indica a redes sociales y apps de mensajería qué título, descripción e imagen mostrar cuando alguien comparte una URL. Sin estas etiquetas, cada plataforma elige por su cuenta y el resultado suele ser una tarjeta pobre o sin imagen.

De dónde viene Open Graph

Facebook creó el protocolo para convertir cualquier página web en un objeto que pudiera representarse dentro de su red. La especificación es pública y está en ogp.me. Hoy lo leen casi todas las plataformas que generan vistas previas de enlaces, no solo Facebook.

Las etiquetas básicas de Open Graph

Se colocan en el <head> de cada página. La especificación considera obligatorias og:title, og:type, og:image y og:url; og:description es opcional, pero conviene incluirla siempre: 

<meta property="og:title" content="Guía de zapatillas de trail para mujer">
<meta property="og:description" content="Cómo elegir amortiguación, drop y agarre según tu terreno.">
<meta property="og:image" content="https://www.ejemplo.com/img/guia-trail-1200x630.jpg">
<meta property="og:url" content="https://www.ejemplo.com/guia-zapatillas-trail/">
<meta property="og:type" content="article">
  • og:title: el titular de la tarjeta. Puede ser distinto del meta title, más pensado para redes que para Google.
  • og:description: una o dos frases bajo el título. Puede coincidir con la meta description o adaptarse al tono social.
  • og:image: la imagen de la tarjeta, siempre con URL absoluta.
  • og:url: la URL canónica de la página. Debe coincidir con tu URL canónica para que las interacciones se sumen en una sola dirección.
  • og:type: el tipo de objeto. Lo habitual es website para la home y páginas generales, y article para posts y noticias.

Tamaño de la imagen

La documentación de Meta para webmasters recomienda imágenes de al menos 1200 × 630 píxeles, con una proporción cercana a 1,91:1. Deja el texto importante lejos de los bordes, porque algunas plataformas recortan la imagen en formato cuadrado o más estrecho.

Quién lee las etiquetas Open Graph

  • Facebook y Messenger.
  • LinkedIn, tanto en publicaciones como en mensajes.
  • WhatsApp, Telegram y Slack al generar la vista previa de un enlace.
  • X (Twitter), que usa sus propias etiquetas twitter: pero recurre a las de Open Graph cuando faltan. Lo único que conviene añadir es <meta name="twitter:card" content="summary_large_image"> para que muestre la imagen grande.

Por qué importa

Cada vez que alguien comparte tu página, la tarjeta funciona como un anuncio gratuito. Una imagen nítida y un título claro hacen que el enlace destaque en el feed o en un grupo de WhatsApp; una tarjeta sin imagen o con el logo pixelado pasa desapercibida. Esto pesa mucho en contenidos que viven de la distribución social: artículos, lanzamientos, landings de campaña o páginas que esperas que se compartan en social ads y publicaciones orgánicas.

Open Graph no es un factor de ranking en Google. Su efecto es indirecto: más clics desde redes, más visitas y más posibilidades de que alguien enlace o mencione la página.

Cómo comprobar tus etiquetas Open Graph

  1. Revisa el código fuente de la página (no el inspector, que puede mostrar cambios hechos con JavaScript) y confirma que las etiquetas están en el <head> del HTML.
  2. Pasa la URL por el Sharing Debugger de Facebook. Te muestra la vista previa, los avisos y te permite forzar que vuelva a leer la página.
  3. Haz lo mismo en el Post Inspector de LinkedIn, que también refresca su caché.
  4. Envía el enlace a un chat de prueba en WhatsApp o Slack para ver el resultado real.

Si prefieres una revisión rápida, la auditoría SEO gratis comprueba también las etiquetas sociales de tu página junto al resto de elementos on-page.

Errores habituales

  • Sin og:image: la plataforma coge cualquier imagen de la página (un icono, un banner) o no muestra ninguna.
  • URLs relativas: /img/portada.jpg no funciona; la imagen y la URL deben ir completas, con https:// y dominio.
  • Vistas previas antiguas en caché: cambias la imagen y sigue saliendo la anterior. Fuerza la actualización con las herramientas de depuración.
  • Las mismas etiquetas en todo el sitio: la plantilla repite el título y la imagen de la home en cada página, así que todos los enlaces compartidos parecen iguales.
  • Etiquetas generadas solo con JavaScript: muchos rastreadores de redes sociales no ejecutan JavaScript y no las verán.
  • Imágenes bloqueadas por robots.txt, por autenticación o por un tamaño de archivo excesivo.

Preguntas frecuentes

  • Es un protocolo creado por Facebook que, mediante etiquetas meta en el HTML, indica qué título, descripción e imagen deben mostrarse cuando alguien comparte una URL en redes sociales o apps de mensajería.

  • Meta recomienda imágenes de al menos 1200 × 630 píxeles, con una proporción cercana a 1,91:1, para que se vean bien en pantallas de alta resolución sin recortes.

  • No es un factor de posicionamiento en Google. Su valor está en que tus enlaces compartidos se vean bien y reciban más clics, lo que puede traducirse en más visitas y menciones.

  • Porque guardan en caché la vista previa la primera vez que alguien comparte la URL. Pasa la URL por el Sharing Debugger de Facebook o por el Post Inspector de LinkedIn para que vuelvan a leer las etiquetas.