Compartes tu nueva página y la vista previa muestra un título antiguo, un logo recortado o un recuadro gris. La gente juzga un enlace por esa tarjeta antes de hacer clic, así que una vista previa rota te cuesta visitas cada vez que se comparte.
Las vistas previas siguen unas pocas reglas sencillas. Cuando la página da a las apps lo que buscan, el problema suele quedar resuelto para siempre.
De dónde sale la vista previa
Cuando alguien pega un enlace, el rastreador de la app descarga tu página y lee unas cuantas etiquetas del encabezado HTML. El estándar principal es elprotocolo Open Graph, que define og:title, og:type, og:image y og:url. La mayoría de las apps también leen og:description, y X lee sus propias etiquetas twitter:card y recurre a Open Graph para el resto.
El rastreador no hace scroll, no hace clic ni espera como una persona. Lee lo que el servidor envía primero. Lo que JavaScript añade después a menudo no lo ve.
Por qué falla
Faltan las etiquetas, así que la app adivina a partir del texto y las imágenes que encuentra.
Las etiquetas se añaden con JavaScript después de cargar la página, así que el rastreador nunca las ve.
og:image usa una ruta relativa o una dirección http en lugar de una URL https completa.
La imagen es demasiado grande, demasiado pequeña, tiene la forma equivocada o la bloquea un firewall, una protección antibots o un inicio de sesión.
Todas las páginas comparten el mismo título e imagen genéricos, así que todos los enlaces se ven iguales.
La app guardó en caché una versión antigua de la página y la sigue mostrando.
Una imagen que funcione en todas partes
Usa una imagen horizontal de 1200 × 630 píxeles, en JPEG o PNG y de un tamaño razonable. Mantén el texto importante y los logos lejos de los bordes, porque algunas apps recortan a un cuadrado o a un formato más estrecho. Sírvela desde una URL https completa que cualquiera pueda abrir sin iniciar sesión.
Añade también og:image:width, og:image:height y og:image:alt. Ayudan a las apps a maquetar la tarjeta antes de que se descargue la imagen y a describirla a quienes usan lectores de pantalla.
Cómo actualizar una vista previa en caché
Las apps guardan las vistas previas, a veces durante días. Después de corregir las etiquetas, puede que tengas que pedirles que vuelvan a leer la página. El Sharing Debugger de Facebook y el Post Inspector de LinkedIn tienen un botón para volver a descargar una URL. En otras apps, compartir el enlace con un parámetro inofensivo, como ?v=2, genera una vista previa nueva.
Prueba antes de compartir
Miprobador gratuito de vista previa de enlaces descarga tu página como lo hacen los rastreadores, lee las etiquetas Open Graph y de tarjetas de X, descarga las imágenes para comprobar que cargan y mide su tamaño y su peso. Después muestra cómo se verá probablemente la tarjeta en X, LinkedIn, Facebook, WhatsApp, Slack y Discord, con una lista de correcciones.
Cada app tiene sus reglas y las cambia de vez en cuando, así que toma las vistas previas como una guía cercana y no como una copia exacta al píxel.
Que sea automático
En un sitio con muchas páginas, las vistas previas deberían salir del propio contenido: el nombre del producto, el título del artículo o la fecha del evento, con una imagen generada o elegida para cada página. Frameworks como Next.js pueden generar estas etiquetas e imágenes en el servidor. Si todas tus páginas comparten una tarjeta genérica,cuéntame sobre tu sitio y lo configuro para que cada página nueva tenga una vista previa en condiciones sin trabajo extra.