Por qué tu vista previa de enlace se ve mal, y cómo arreglarla con Open Graph

Compartes el enlace de tu nueva página de destino y la vista previa sale sin imagen, con el título de tu página de inicio o con un banner de hace dos campañas. La página en sí está bien. La vista previa se construye a partir de otra cosa: unas líneas de código en la cabecera (head) de la página que casi nadie ve.

Esta publicación cubre las seis causas detrás de la mayoría de vistas previas rotas, en el orden en que conviene revisarlas. Si quieres que las etiquetas se escriban por ti, el generador de Open Graph gratuito las crea, las escapa correctamente y las comprueba frente a los límites de abajo.

Cómo se crea una vista previa de enlace

Cuando se pega un enlace en una publicación o un mensaje, la app envía un rastreador a la página. El rastreador lee las etiquetas <meta> del <head> y dibuja la tarjeta a partir de ellas. Esas etiquetas vienen del protocolo Open Graph, que exige cuatro:

• og:title: el título de la página tal como debe aparecer en la tarjeta.
• og:type: qué es la página, normalmente website o article.
• og:image: la imagen.
• og:url: la URL canónica de la página, que el protocolo llama su identificador permanente.

Añade og:description y tendrás la tarjeta. Un conjunto mínimo y completo se ve así:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Causa 1: faltan las etiquetas

Sin etiquetas og:, cada app tiene que recurrir a lo que encuentre en la página, como el <title> o la primera imagen, y lo que elija depende de cada app. Así es como un mismo enlace puede verse bien en un sitio y mal en otro. La solución es declarar las cuatro etiquetas obligatorias más una descripción en cada página que la gente vaya a compartir, no solo en la de inicio. Una página de producto compartida con las etiquetas de la página de inicio muestra la tarjeta de la página de inicio.

Causa 2: la URL de la imagen es relativa

Este fallo es fácil de pasar por alto, porque la página se ve bien en tu propio navegador. content="/images/og.jpg" funciona para un navegador que ya está en tu sitio, pero el rastreador está fuera de él. Escribe la dirección completa, empezando por https:// y tu dominio. Lo mismo vale para og:url.

Causa 3: la imagen tiene el tamaño o la forma incorrectos

Cada plataforma indica lo que quiere, y casualmente coinciden en una imagen ancha:

• LinkedIn dice en su guía para hacer un sitio web compartible que la imagen debe medir al menos 1200 × 627 píxeles, con una proporción recomendada de 1.91:1, y no superar los 5 MB.
• Meta, en sus buenas prácticas para compartir, recomienda imágenes de al menos 1080 píxeles de ancho para pantallas de alta resolución, y de al menos 600 de ancho para mostrar enlaces de imagen en anuncios.
• La tarjeta de imagen grande de X admite una proporción 2:1 desde 300 × 157 hasta 4096 × 4096 píxeles, menos de 5 MB, en JPG, PNG, WEBP o GIF, y no admite SVG, según su documentación para desarrolladores (la página original ahora redirige, así que este enlace pasa por Internet Archive).

Un solo tamaño sirve para las tres: 1200 × 630. Cumple el mínimo de LinkedIn de 1200 × 627, es más ancho que los 1080 de Meta, y su proporción es 1200 ÷ 630 = 1.905, a menos de un 5% de la 2:1 de X. Una imagen cuadrada o alta se recortará para formar una tarjeta ancha, así que mantén la parte importante en el centro. La calculadora de proporción de aspecto muestra lo que conserva un recorte central.

Indica también el tamaño en las etiquetas. Meta pide og:image:width y og:image:height para que su rastreador pueda renderizar la imagen de inmediato en lugar de descargarla y procesarla primero. Su guía para webmasters lo resume así: especifica la altura y el ancho para que la imagen se cargue bien la primera vez que se comparte la página.

Causa 4: las etiquetas las añade JavaScript

Algunos creadores de sitios y aplicaciones de una sola página añaden etiquetas meta después de cargar la página, en el navegador. Un rastreador que lee el HTML que envía tu servidor puede que nunca ejecute ese código, así que nunca ve las etiquetas. Revisa el código fuente de la página (Ver código fuente, no el inspector, que muestra la página después de ejecutar los scripts). Si las etiquetas no están en el código fuente, lo más probable es que el rastreador tampoco las vea. La solución está en la configuración de tu sitio o en su plantilla del lado del servidor.

Causa 5: los caracteres especiales rompieron la etiqueta

Un título con comillas dobles, como El lino «solo» que necesitas, cierra el atributo content="..." antes de tiempo y se pierde el resto del título. Los caracteres que importan dentro de un atributo deben escaparse: " se convierte en ", & en & y < en <. Los navegadores y los rastreadores los vuelven a convertir en los caracteres originales al leer la etiqueta. El generador hace esto por ti, y eso es en parte la razón para usar uno.

Causa 6: la app recordó la versión antigua

Corregiste las etiquetas, volviste a compartir y la tarjeta vieja sigue ahí. Eso es la caché. Las apps guardan lo que han leído y lo reutilizan, y las dos grandes redes te dan una herramienta para pedir una nueva lectura:

• Facebook: pega la URL en el Depurador de uso compartido de Meta. La guía para webmasters de Meta dice que muestra qué etiquetas leyó el rastreador, con cualquier error o advertencia, y que desencadena una nueva lectura. Las buenas prácticas de Meta añaden que el contenido leído se actualiza en un periodo estándar de 24 horas.
• LinkedIn: pasa la URL por el Inspector de publicaciones. La página de ayuda de LinkedIn es clara sobre el límite: la actualización solo cambia la vista previa de las publicaciones nuevas. Las publicaciones que ya incluyen la URL conservan la anterior.

Esa nota de LinkedIn es la que conviene recordar antes de un lanzamiento. Revisa la vista previa antes de que salga la primera publicación, porque no puedes arreglar una publicación antigua arreglando la página.

La etiqueta twitter:card: una línea, no cuatro

X también lee Open Graph. Su referencia de marcado de tarjetas indica un respaldo para cada etiqueta: twitter:title recurre a og:title, twitter:description a og:description, twitter:image a og:image, y twitter:image:alt a og:image:alt. Así que no tienes que repetirlo todo. La única línea que hay que añadir es twitter:card: summary_large_image para una imagen de ancho completo, o summary para una pequeña cuadrada. Si la omites, la misma referencia dice que X puede mostrar una tarjeta de resumen pequeña, por eso una imagen grande a veces llega como miniatura. Esa referencia también limita el título a 70 caracteres, la descripción a 200 y el texto alternativo a 420.

Una revisión de cinco minutos antes del lanzamiento

1. Mira el código fuente de la página y busca las etiquetas og:. Las cuatro obligatorias, más una descripción.
2. Comprueba que og:image y og:url empiecen por https://.
3. Abre la URL de la imagen por sí sola en un navegador. Debe cargarse, a 1200 × 630 o algo parecido.
4. Pega la URL en el Depurador de uso compartido y en el Inspector de publicaciones, y revisa las tarjetas.
5. Solo entonces compártela.

Dónde encaja Hermoso

Hermoso es un agente de marketing con IA: investiga los anuncios que ya funcionan en tu mercado, crea anuncios de imagen y vídeo con tu marca, programa las publicaciones en tus propias cuentas y ejecuta campañas de pago en tus propias cuentas publicitarias. Una buena vista previa de enlace es lo que hace que esas publicaciones merezcan un clic. Hermoso funciona en la app web, o dentro de Claude, ChatGPT y Cursor a través de su servidor MCP.

Preguntas frecuentes

¿Por qué mi enlace no muestra imagen en Facebook o LinkedIn?

Normalmente porque falta la etiqueta og:image, usa una ruta relativa en lugar de una dirección https:// completa, o apunta a una imagen demasiado pequeña. LinkedIn pide al menos 1200 × 627 píxeles. Después de arreglarlo, pasa la URL por el Depurador de uso compartido de Meta o por el Inspector de publicaciones de LinkedIn para que vuelvan a leerla.

¿Qué tamaño debe tener una imagen Open Graph?

1200 × 630 píxeles funciona en las grandes redes. Cumple el mínimo de LinkedIn de 1200 × 627 con una proporción de aproximadamente 1.91:1, es más ancho que los 1080 píxeles que recomienda Meta, y se acerca a la 2:1 que X admite para tarjetas de imagen grande.

¿Cómo actualizo la vista previa de un enlace en LinkedIn?

Arregla las etiquetas de la página y luego introduce la URL en el Inspector de publicaciones de LinkedIn. La vista previa actualizada se aplica solo a publicaciones nuevas. Las publicaciones que ya contienen la URL conservan la vista previa antigua.

¿Necesito etiquetas twitter: si ya tengo etiquetas og:?

Solo twitter:card. X recurre a og:title, og:description, og:image y og:image:alt cuando faltan las versiones twitter:.