Por qué tu link sale sin vista previa en WhatsApp.

Lo que busca la plataforma cuando pegas el link

Cuando compartes una dirección, la plataforma manda un bot a buscarla y lee unas etiquetas del <head> que define el protocolo Open Graph. Ese protocolo pide cuatro: og:title, og:type, og:image y og:url. LinkedIn, en su guía para hacer tu web compartible, exige título, imagen, descripción y URL, y pone números a la imagen:

• Tamaño mínimo: 1200 por 627 píxeles, en proporción 1,91 a 1.
• Peso máximo: 5 MB.
• Si mide menos de 401 píxeles de ancho, se muestra como miniatura, no grande.

Meta agrega dos condiciones en su página sobre su rastreador: las etiquetas tienen que estar dentro del primer mega de la página, o se cortan, y el contenido tiene que poder leerse en pocos segundos.

Por qué falla tanto en las webs hechas con IA

Muchas webs de Lovable, Bolt o Vite son una aplicación de una sola página: el servidor manda un HTML casi vacío y JavaScript dibuja todo en el navegador, títulos incluidos. La propia documentación de Lovable lo dice claro: LinkedIn, Slack, Facebook, X y WhatsApp leen las etiquetas Open Graph del HTML, y la mayoría no corre JavaScript. Si las etiquetas las pone un script, el bot no las ve.

Lovable lo resolvió en dos tiempos. Los proyectos creados desde el 13 de mayo de 2026 usan TanStack Start, que arma cada página en el servidor antes de mandarla. Los anteriores, hechos con React y Vite, reciben una copia ya renderizada solo cuando el que pide es un bot verificado, como los de vista previa. Si tu web es vieja o no está en el hosting de Lovable, no des por hecho que te toca lo mismo.

El otro error es el de la misma imagen para todo. Lovable recomienda un og:title, un og:description y un og:image distintos en cada página, imágenes de 1200 por 630 que pesen unos cientos de KB, y advierte que WhatsApp no muestra la vista previa si el archivo es más grande.

Las etiquetas que van en el HTML

Esto va en el <head> de cada página, con los valores de esa página. La imagen, con dirección completa y https:

<meta name="description" content="Lo que gana quien entra, en 140 a 160 caracteres.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://tuweb.com/precios">
<meta property="og:title" content="Precios de Tu Marca">
<meta property="og:description" content="La misma idea que la description, para el chat.">
<meta property="og:image" content="https://tuweb.com/og/precios.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Qué se ve en la imagen">
<meta name="twitter:card" content="summary_large_image">

Si tu web la armó un builder, este prompt suele bastar: «Agrega en cada página las etiquetas Open Graph (og:title, og:description, og:url y og:image de 1200×630, menos de 300 KB, propia de esa página) y twitter:card=summary_large_image. Tienen que estar en el HTML que manda el servidor, no agregadas con JavaScript. No cambies nada más.» Para lo demás que conviene pedirle a cada herramienta, está la guía de builders.

Cómo comprobarlo sin adivinar

• Mira el código fuente, no el inspector: con Ctrl+U (Cmd+Opción+U en Mac) ves el HTML que recibe el bot. Si buscas og:image y no aparece, la plataforma tampoco lo encuentra.
• Usa el depurador de la plataforma: el Sharing Debugger de Meta muestra qué etiquetas leyó y vuelve a buscar la página.
• Cambia el nombre de la imagen si la cambiaste: Meta guarda las imágenes según su URL y no las actualiza mientras la URL sea la misma.
• Mide tu web: el Slop Score marca «Sin preview para compartir» cuando a la portada le falta la imagen o la descripción.

El Slop Score gratis mira la portada. El Slop Score Pro revisa la vista previa en todas las páginas de la web, junto con los títulos y descripciones repetidos y el HTML que llega vacío sin JavaScript.