¿Qué es Open Graph y por qué tu enlace sale sin imagen?

Pegas el enlace de tu web en WhatsApp, en LinkedIn o en Slack y aparece una tarjeta: una imagen, un título y una frase. O no aparece nada. O sale el logotipo pixelado, un título que no es el de esa página o la foto de una entrada antigua.

Esa tarjeta no la improvisa la plataforma. La arma con unas etiquetas que van en el código de tu página y que casi nadie revisa hasta que un enlace importante sale mal. Se llaman Open Graph.

¿Qué es Open Graph?

Es un protocolo que Facebook presentó en 2010 para que cualquier página web pudiera describirse a sí misma cuando alguien la comparte: con qué título, qué descripción, qué imagen y qué tipo de contenido es.

Con los años se convirtió en el estándar de hecho. Hoy lo leen LinkedIn, WhatsApp, Telegram, Slack, Discord, Teams, X y las previsualizaciones de enlaces de muchas aplicaciones de mensajería. Si tu página no tiene estas etiquetas, cada plataforma intenta adivinar con lo que encuentra, y cada una adivina distinto.

Lo que Open Graph no controla es tu resultado en Google. Ahí mandan el title y la meta description, que tienen sus propias reglas y están explicadas en cómo escribir el title y la meta description.

Las etiquetas que importan

Van en el <head> de cada página, con el atributo property:

<meta property="og:title" content="Mantenimiento de aires acondicionados en Cali">
<meta property="og:description" content="Visita técnica en 48 horas y garantía de tres meses.">
<meta property="og:image" content="https://example.com/og/mantenimiento.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Técnico revisando una unidad de aire acondicionado">
<meta property="og:url" content="https://example.com/servicios/mantenimiento/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Frío Norte">
<meta property="og:locale" content="es_CO">

• og:title: el titular de la tarjeta. Puede ser algo más conversacional que el title de la página, porque no compite con nueve resultados más.
• og:description: una o dos frases. Muchas plataformas la cortan pronto o no la enseñan, así que lo importante va delante.
• og:image: la imagen. Es la etiqueta que más se nota y la que más falla.
• og:image:width y og:image:height: le dicen a la plataforma el tamaño antes de descargar la imagen, lo que ayuda a que la tarjeta salga completa la primera vez que alguien comparte el enlace.
• og:image:alt: el texto alternativo, para quien usa un lector de pantalla.
• og:url: la dirección oficial de la página. Agrupa las veces que se comparte con distintos parámetros como una sola.
• og:type, og:site_name y og:locale: el tipo de contenido, el nombre del sitio y el idioma. og:locale se escribe con guion bajo (es_CO), no con guion.

¿Y las etiquetas de Twitter?

X tiene su propio juego de etiquetas, las Twitter Cards, pero cuando no las encuentra usa las de Open Graph. En la práctica basta con una:

<meta name="twitter:card" content="summary_large_image">

summary_large_image pide la tarjeta con la imagen grande; summary, la versión compacta con una miniatura cuadrada. Duplicar título, descripción e imagen en etiquetas twitter: solo tiene sentido si quieres decir algo distinto en esa red.

La imagen: medidas, formato y peso

Es donde se concentran casi todos los problemas.

• Medidas. 1200 × 630 píxeles, una proporción de 1,91:1, es la referencia para la tarjeta grande en la mayoría de plataformas. Por debajo de unos 600 píxeles de ancho se ve borrosa, y con menos de 200 por lado muchas plataformas la descartan.
• Recortes. No todas respetan la proporción. Algunas aplicaciones de mensajería enseñan una miniatura cuadrada, así que lo importante (el logotipo, el producto, una frase corta) debe ir centrado y con margen.
• Texto legible. En el móvil la tarjeta mide menos de la mitad que en tu pantalla. Una frase grande se lee; un párrafo, no.
• Formato. JPG o PNG son la apuesta segura. Otros formatos más modernos no los aceptan todas las plataformas.
• Peso. Algunas aplicaciones ignoran imágenes demasiado pesadas o tardan en procesarlas. Mantenerla ligera, en el orden de unos cientos de KB, evita sorpresas.
• Dirección absoluta y pública. La URL tiene que incluir dominio y protocolo, y la imagen debe poder descargarse sin iniciar sesión.

Lo ideal es que cada página importante tenga su propia imagen, no la misma portada para todo el sitio. Para el resto de decisiones sobre formatos y tamaños, la guía de imágenes para tu web entra en detalle.

¿Por qué cambias las etiquetas y la tarjeta sigue igual?

Porque las plataformas no leen tu página cada vez que alguien comparte el enlace. La leen la primera vez, guardan lo que encontraron y reutilizan esa copia durante días o semanas. Si la primera lectura fue con la imagen equivocada, esa es la que seguirá saliendo aunque ya la hayas corregido.

Hay dos formas de forzar una lectura nueva:

• Las herramientas de cada plataforma. Meta ofrece un depurador de contenido compartido y LinkedIn su Post Inspector. Pasar la URL por ellos hace que vuelvan a leer las etiquetas.
• Cambiar la URL. Añadir un parámetro (?v=2) la convierte en una dirección nueva para la caché. Es un recurso útil para una publicación concreta; el og:url debe seguir apuntando a la dirección limpia.

Ten en cuenta que las publicaciones que ya estaban hechas no se actualizan solas: la caché nueva afecta a lo que se comparta a partir de ese momento.

Errores frecuentes

• Rutas relativas en og:image (/img/portada.jpg). El robot de la plataforma no sabe a qué dominio pertenecen.
• La misma imagen y el mismo título en todas las páginas, porque la plantilla los fija una vez para todo el sitio.
• Compartir desde el entorno de pruebas. Si el primer enlace que se comparte es el de un servidor con contraseña, la plataforma guarda una tarjeta vacía.
• Etiquetas añadidas con JavaScript. Los robots de las redes normalmente no ejecutan scripts, así que solo ven lo que viene en el HTML que entrega el servidor.
• Un cortafuegos que bloquea a los robots. Algunas protecciones contra tráfico automático rechazan también a los lectores de Facebook, LinkedIn o WhatsApp.
• og:url apuntando a la portada en todas las páginas, lo que hace que la plataforma las trate como si fueran la misma.

¿Cómo comprobar la tuya?

El previsualizador de Open Graph lee tu página a partir de su URL, de su código pegado o de los campos rellenados a mano, y enseña a la vez cómo quedaría la tarjeta en Facebook y LinkedIn, en X, en WhatsApp y Telegram, y en Slack y Discord. Señala las etiquetas que faltan, intenta cargar la imagen como lo haría el robot de una red y genera el bloque de etiquetas corregido para copiarlo.

Cuando la tarjeta se vea bien ahí, publica los cambios y pasa la URL por la herramienta de cada plataforma para que olvide la versión antigua. Si además quieres que la página luzca completa en Google, revisa sus datos estructurados: es el equivalente para los buscadores.

---

Una tarjeta bien hecha no cuesta más que unos minutos por página y trabaja cada vez que alguien comparte tu enlace, en sitios donde tú no estás para explicarlo. Merece la pena que diga lo correcto.