Vistas previas de enlaces: por qué se ven rotas y cómo arreglarlas

La imagen de vista previa de un enlace sale de una línea del HTML de tu página: la etiqueta og:image. Cuando una plataforma como WhatsApp, Slack, LinkedIn o iMessage ve un enlace, un rastreador descarga la página, lee esa etiqueta y baja la imagen. Si la vista previa está en blanco o es incorrecta, algo falló en esa cadena: falta la etiqueta, la dirección de la imagen es relativa, el rastreador está bloqueado o la plataforma sigue mostrando una copia antigua de su caché.

Por qué se rompen las vistas previas: tabla de diagnóstico

Empieza por el síntoma que ves. La tabla siguiente recoge las ocho causas de las vistas previas rotas, empezando por las más habituales.

Las etiquetas que necesita una vista previa que funcione

Necesitas sorprendentemente poco. Un título, una descripción, una URL de imagen completa, el tamaño de la imagen y una línea extra para que X muestre una tarjeta grande en lugar de una miniatura. La URL canónica de la página en og:url ayuda a las plataformas a agrupar los envíos de una misma página.

<head>
  <title>Autumn menu | Hearth Bakery</title>
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/autumn">
  <meta property="og:title" content="Our autumn menu is here">
  <meta property="og:description" content="Pumpkin loaf, apple buns and spiced coffee, baked every morning.">
  <meta property="og:image" content="https://example.com/share/autumn-1200x630.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Autumn menu at Hearth Bakery">
  <meta name="twitter:card" content="summary_large_image">
</head>

Los frameworks facilitan equivocarse. Una aplicación de una sola página que define las etiquetas después de cargar se verá bien en unos pocos sitios y fallará en la mayoría. Usa en su lugar la función de metadatos del lado del servidor de tu framework, o genera la imagen por página como se describe en las imágenes OG dinámicas.

Cómo actualizar una vista previa de enlace en caché

Las plataformas descargan una página una vez y guardan el resultado un tiempo, así que arreglar tus etiquetas no arregla las publicaciones que ya compartió la gente, y a veces ni las nuevas. Usa las herramientas propias de cada plataforma donde existan y cambia la URL donde no.

1. 1

   LinkedIn

   Pega la URL en el Post Inspector de LinkedIn. Vuelve a descargar la página y muestra exactamente lo que ve LinkedIn.

2. 2

   Facebook, Instagram y WhatsApp

   El Depurador de contenido compartido de Meta, en sus herramientas para desarrolladores, muestra las etiquetas que encontró y tiene un botón para volver a rastrear. WhatsApp puede tardar más en ponerse al día.

3. 3

   Slack, Discord, iMessage y otros

   La mayoría no tiene una herramienta pública de actualización. Cambia el nombre del archivo de imagen, por ejemplo autumn-v2.png, y actualiza la etiqueta, para que el rastreador vea una dirección nueva.

4. 4

   Casos tercos

   Comparte la página con una cadena de consulta inofensiva como ?v=2. Las plataformas la tratan como un enlace nuevo y la descargan de cero.

Diseñar una imagen que se vea bien en todas partes

Cuando las etiquetas funcionan, la imagen en sí decide si alguien pulsa. Hazla de 1200×630, un marco ancho de cerca de 1,91 a 1 que aceptan todas las plataformas importantes. Algunas apps la muestran más pequeña o recortan un poco los lados, y unas pocas recurren a un cuadrado, así que mantén las palabras en el centro. La historia completa de los tamaños está en el tamaño de imagen OG.

Una vista previa es diminuta en un hilo de chat, así que valen las reglas del texto de las miniaturas: pocas palabras grandes, mucho contraste, una sola idea. En Gradiently, el Mark de un diseño mantiene su zona más calmada detrás de las palabras y elige texto claro u oscuro por línea, así que el titular sigue legible por mucho que la plataforma escale la tarjeta. Empieza desde el tamaño Vista previa de enlace en el Studio y el mismo diseño puede convertirse en tu banner de blog de 1200×600 y en el resto de tus tamaños de imagen para redes sociales.

Una prueba de dos minutos antes de compartir

1. Mira el código fuente de la página y confirma que og:image está ahí con una URL https completa.
2. Abre la URL de esa imagen en una ventana privada del navegador. Si no carga ahí, los rastreadores tampoco pueden cargarla.
3. Pasa la URL por el Post Inspector de LinkedIn o por el depurador de Meta para ver las etiquetas analizadas.
4. Envíate el enlace por WhatsApp o Slack y míralo en un móvil.
5. Si algo está desfasado, cambia el nombre del archivo de imagen y vuelve a probar.

Haz esto una vez por cada plantilla de tu sitio, no por cada página, y las vistas previas rotas dejarán de ser una sorpresa. Si estás creando un sitio desde cero, la guía del fondo para la portada de un sitio web trata la imagen principal de la que suelen tomar esas vistas previas.