Cuando compartes un enlace en WhatsApp, la aplicación descarga tu página, lee unas cuantas etiquetas meta del HTML y arma una tarjeta de vista previa con título, descripción e imagen antes incluso de que el destinatario pulse el enlace. Si esas etiquetas están mal, la vista previa desaparece en silencio. Esta guía explica exactamente qué etiquetas Open Graph lee WhatsApp, por qué og:image debe usar una URL absoluta, qué dimensiones de imagen funcionan de verdad y cómo probar y corregir las vistas previas antes de enviar.
Cómo lee WhatsApp las vistas previas de enlaces
Cada vez que alguien pega una URL en un chat de WhatsApp, el rastreador interno de la aplicación, a veces llamado WhatsApp Link Preview Bot, realiza una petición HTTP GET a esa URL. Analiza la respuesta HTML buscando etiquetas <meta property="og:..."> dentro del <head>. Si encuentra las etiquetas correctas, arma una tarjeta de vista previa. Si no, el enlace aparece como texto plano sin ningún contexto visual.
WhatsApp no es el único rastreador que funciona así: Facebook, LinkedIn, Slack, Telegram, iMessage y Twitter/X siguen el mismo protocolo Open Graph que Facebook desarrolló en 2010. La especificación está en ogp.me y define un conjunto de etiquetas <meta> que cualquier sitio web puede añadir para controlar cómo aparecen sus páginas al compartirse en redes sociales.
¿Cuándo se produce el rastreo?
WhatsApp rastrea una URL la primera vez que la pegas en un chat y se carga la vista previa. El resultado se cachea de forma agresiva: WhatsApp servirá la misma tarjeta de vista previa durante días o incluso semanas después de la primera descarga. Por eso actualizar tus etiquetas OG en el servidor no arregla de inmediato una vista previa rota; la versión cacheada sigue apareciendo. Más sobre invalidar la caché en una sección posterior.
Nota
Vistas previas en chats de grupo frente a mensajes directos
WhatsApp genera vistas previas tanto en mensajes directos como en chats de grupo. El comportamiento es idéntico: se usan las mismas etiquetas OG en ambos contextos. Sin embargo, hay un matiz: si el remitente ha desactivado las vistas previas de enlaces en sus ajustes de WhatsApp (Ajustes → Chats → Generar vistas previas de enlaces), no aparecerán vistas previas por bien configuradas que estén tus etiquetas. Es un ajuste del cliente, no un problema del servidor.
Requisito de URL absoluta en og:image
Esta es la causa más común de vistas previas rotas en WhatsApp: una ruta relativa en la etiqueta og:image. La especificación del protocolo Open Graph no deja lugar a dudas: og:image debe ser una URL absoluta completa. No una ruta relativa a la raíz, no una URL relativa al protocolo, no un fragmento de ruta. Una URL completa con esquema, dominio y ruta.
| Formato | Ejemplo | ¿Funciona en WhatsApp? |
|---|---|---|
| ✓ URL absoluta (correcta) | https://tudominio.com/images/share.jpg | ✓ Sí |
| ✗ Ruta relativa a la raíz | /images/share.jpg | ✗ No: falla en silencio |
| ✗ URL relativa al protocolo | //tudominio.com/images/share.jpg | ✗ Poco fiable |
| ✗ Ruta relativa | images/share.jpg | ✗ No |
| ✗ URI de datos | data:image/jpeg;base64,... | ✗ No |
Las propiedades estructuradas pueden especificarse colocando dos puntos después del nombre de la propiedad y usando otra etiqueta og:image con una URL absoluta.
Por qué las rutas relativas fallan en silencio
Cuando el rastreador de WhatsApp descarga tu página, analiza el HTML de forma aislada: no "conoce" tu URL base como la conoce un navegador. Una ruta relativa como /images/share.jpg no tiene contexto, así que el rastreador o la ignora o intenta resolverla contra una URL base que puede no haber inferido correctamente. El resultado es una imagen ausente sin ningún mensaje de error: la vista previa aparece sin imagen o no aparece en absoluto.
Usa siempre la URL absoluta completa, incluido https://. Si tu sitio admite tanto HTTP como HTTPS, usa siempre https://: muchos rastreadores sociales se niegan a cargar imágenes que no sean HTTPS en las vistas previas por motivos de seguridad.
Aviso
CDN y servidores de imágenes de terceros
Si tus imágenes se sirven desde una CDN o un servidor de terceros (como Cloudinary, Imgix o un bucket de almacenamiento en la nube), el requisito de URL absoluta sigue aplicándose: simplemente usa la URL completa de la CDN. La única consideración adicional son las cabeceras CORS: asegúrate de que tu CDN permite peticiones de origen cruzado, porque algunos rastreadores lo comprueban. Verifica también que la URL de la CDN no tenga tokens de autenticación que caduquen: una URL firmada con límite de tiempo romperá las vistas previas de cualquiera que pulse el enlace después de que caduque el token.
Optimizador de texto de vista previa de Open Graph
Comprueba si las longitudes de tu og:title y og:description están optimizadas para WhatsApp, Facebook, LinkedIn y Twitter al mismo tiempo.
Reglas de tamaño y formato de og:image
Acertar con la URL de la imagen es solo la mitad de la batalla. WhatsApp también tiene requisitos de tamaño y formato que determinan si la imagen se muestra de forma destacada o se omite por completo.
Dimensiones recomendadas
La especificación Open Graph recomienda 1200×630 píxeles con una relación de aspecto de 1,91:1. Este es el objetivo que se ve bien a la vez en WhatsApp, Facebook, LinkedIn y Slack, así que no hay razón para no usarlo como valor predeterminado.
| Plataforma | Tamaño mínimo | Tamaño recomendado | Relación de aspecto |
|---|---|---|---|
| 300×200 px | 1200×630 px | 1,91:1 | |
| 200×200 px | 1200×630 px | 1,91:1 | |
| 200×200 px | 1200×630 px | 1,91:1 o 1:1 | |
| Twitter/X | 280×150 px | 1200×628 px | 2:1 (summary_large_image) |
| Slack | 500×300 px | 1200×630 px | 1,91:1 |
WhatsApp mostrará imágenes de hasta unos 300×200 píxeles, pero cualquier cosa más pequeña tiende a renderizarse como una miniatura diminuta en lugar de una imagen destacada, y las imágenes muy pequeñas pueden omitirse por completo. Las imágenes por debajo del umbral mínimo o con relaciones de aspecto extremas (imágenes de retrato muy altas, por ejemplo) a veces se rechazan.
Formatos de archivo admitidos
- JPEG (.jpg, .jpeg): la mejor opción para fotografías e imágenes con degradados. Ampliamente compatible con todos los rastreadores sociales.
- PNG (.png): la mejor opción para gráficos, logotipos e imágenes con transparencia. También es universalmente compatible.
- WebP: soporte irregular entre rastreadores. Evita usar WebP para og:image aunque tu sitio use imágenes WebP para todo lo demás.
- GIF: ampliamente compatible, pero solo se muestra el primer fotograma (sin animación). Rara vez es ideal para imágenes de vista previa.
- SVG: no es compatible con la mayoría de los rastreadores sociales, incluido WhatsApp. Usa en su lugar un PNG o JPEG rasterizado.
Consideraciones sobre el tamaño de archivo
Mantén tu archivo og:image por debajo de 300 KB. El rastreador de WhatsApp se ejecuta en los servidores de Meta y está optimizado para la velocidad: las imágenes muy grandes tardan más en descargarse y aumentan la probabilidad de un tiempo de espera agotado, lo que da como resultado una vista previa sin imagen. Un JPEG bien optimizado de 1200×630 px debería quedar cómodamente por debajo de 200 KB.
Consejo
Motivos habituales de fallo de las vistas previas
Incluso con etiquetas OG correctas, las vistas previas de enlaces de WhatsApp a veces no se renderizan. Estas son las causas más frecuentes.
URL relativa en og:image
Ya lo hemos visto arriba, pero merece repetirse porque es el error más común. Usa siempre https://tudominio.com/path/to/image.jpg, nunca /path/to/image.jpg. Utiliza el Validador de etiquetas OG para detectarlo antes de compartir.
Etiquetas OG generadas por JavaScript (fuera del HTML renderizado en el servidor)
El rastreador de WhatsApp no ejecuta JavaScript. Si un framework de cliente inyecta tus etiquetas meta después de que cargue la página, algo habitual en aplicaciones de una sola página construidas con React, Vue o Angular sin renderizado en el servidor, el rastreador verá un <head> vacío y no generará ninguna vista previa. Las etiquetas OG deben estar en la respuesta HTML inicial del servidor. Usa renderizado en el servidor (SSR) o generación de sitios estáticos (SSG) para asegurarte de que las etiquetas están en el HTML sin procesar.
El servidor bloquea el rastreador de WhatsApp
Herramientas de seguridad como el Bot Fight Mode de Cloudflare, reglas WAF personalizadas o configuraciones agresivas de robots.txt a veces bloquean el rastreador de WhatsApp. Revisa tu robots.txt para asegurarte de que no bloquea a todos los rastreadores con `User-agent: * Disallow: /`. Comprueba también los registros de seguridad de tu servidor al hacer pruebas: puede que encuentres el rastreador bloqueado con un estado 403 o 429.
og:image devuelve un estado distinto de 200
Si la URL de la imagen devuelve un 404, un 403, una redirección 301 o cualquier respuesta distinta de 200, WhatsApp descarta la imagen de la vista previa en silencio. Verifica que la URL de tu imagen sea directamente accesible (sin redirecciones y sin autenticación) abriéndola en una ventana de navegación privada y comprobando el estado. Usa el Inspector de cabeceras HTTP para revisar las cabeceras de respuesta de cualquier URL de imagen.
og:image alojada en HTTP (no HTTPS)
Los rastreadores sociales suelen exigir HTTPS por seguridad. Una imagen servida por HTTP simple a menudo se omite aunque el resto de tu página sea HTTPS. Asegúrate siempre de que la URL de tu og:image empieza por https://.
og:image supera el límite de tamaño o tiene un formato no válido
Las imágenes muy grandes (más de 5 MB) o los formatos no compatibles (SVG, WebP en algunos rastreadores) se omiten en silencio. Quédate con JPEG o PNG por debajo de 300 KB a 1200×630 px.
Aviso
Invalidar la caché de vistas previas de WhatsApp
WhatsApp cachea las vistas previas de enlaces por URL. Una vez que se ha rastreado una URL, se sirve la misma vista previa a todos los destinatarios que reciben ese enlace, independientemente de si has actualizado las etiquetas OG desde entonces. La duración de la caché no está documentada públicamente, pero en la práctica puede durar de varios días a una semana.
El método de la cadena de consulta
El truco más fiable es añadir una cadena de consulta a la URL cuando la compartes. WhatsApp trata https://tudominio.com/pagina?v=2 como una URL distinta de https://tudominio.com/pagina, así que volverá a rastrear la página desde cero y generará una nueva vista previa. La cadena de consulta puede ser cualquiera (?v=2, ?ref=wa, ?share=1) siempre que sea distinta de la que se compartió antes.
Consejo
Usar el Sharing Debugger de Facebook para cebar la caché
El Sharing Debugger de Facebook (developers.facebook.com/tools/debug) es una herramienta que valida tus etiquetas OG y fuerza un nuevo rastreo de tu URL en la infraestructura de Meta. Como WhatsApp y Facebook comparten la misma infraestructura de Open Graph dentro de Meta, rastrear mediante el Sharing Debugger puede a veces cebar (o limpiar) la caché de vistas previas de WhatsApp para la misma URL. Merece la pena ejecutarlo tras cualquier cambio de etiquetas junto con el método de la cadena de consulta.
Resumen: flujo de trabajo de invalidación de caché
- Actualiza tus etiquetas OG en el servidor y verifica que la respuesta HTML sin procesar contiene los nuevos valores.
- Pasa tu URL por el Validador de etiquetas OG para confirmar que las etiquetas son correctas.
- Envía la URL al Sharing Debugger de Facebook para forzar un nuevo rastreo.
- Al compartir en WhatsApp, añade una nueva cadena de consulta (por ejemplo, ?v=2) para garantizar un rastreo fresco.
Patrones avanzados de etiquetas OG
Una vez que lo básico funciona, algunos patrones avanzados te dan más control sobre cómo aparece tu contenido en WhatsApp y otras plataformas sociales.
Varias etiquetas og:image
La especificación Open Graph permite varias etiquetas og:image en una misma página. Cada etiqueta de imagen adicional se trata como una alternativa: normalmente los rastreadores usan la primera imagen válida que encuentran. Esto es útil para ofrecer un respaldo:
<!-- Primary: large landscape (WhatsApp, Facebook, LinkedIn) -->
<meta property="og:image" content="https://yourdomain.com/share-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Fallback: square (some LinkedIn contexts, Instagram) -->
<meta property="og:image" content="https://yourdomain.com/share-1200x1200.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="1200" />Usar og:image por separado de twitter:image
Twitter/X lee primero twitter:image y solo recurre a og:image si no hay etiquetas de Twitter Card presentes. Esto significa que puedes especificar una imagen distinta para Twitter sin afectar a WhatsApp. El tamaño de imagen recomendado por Twitter para una tarjeta summary_large_image es 1200×628 px (relación 2:1) en lugar de 1200×630 px. La diferencia es pequeña, pero si quieres un renderizado perfecto al píxel en ambas plataformas, especifica las dos:
<!-- Used by WhatsApp, Facebook, LinkedIn, Slack -->
<meta property="og:image" content="https://yourdomain.com/share-1200x630.jpg" />
<!-- Used by Twitter/X specifically -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/share-1200x628.jpg" />Imágenes OG dinámicas
Muchos sitios modernos generan imágenes OG de forma dinámica (para entradas de blog, páginas de producto o perfiles de usuario) mediante servicios o renderizado en el servidor. Si generas imágenes por código, recuerda que la URL debe seguir siendo absoluta y de acceso público. Las URL de imágenes OG dinámicas suelen tener este aspecto: https://tudominio.com/api/og?title=Mi+Titulo+De+Entrada; esto es perfectamente válido siempre que el endpoint devuelva una imagen real con la cabecera Content-Type correcta (image/jpeg o image/png), y no una página HTML.
Validar datos estructurados junto con las etiquetas OG
Las etiquetas Open Graph funcionan junto con (no en lugar de) los datos estructurados JSON-LD. Para artículos, productos y negocios locales, los datos estructurados habilitan los resultados enriquecidos de Google, mientras que las etiquetas OG gestionan las vistas previas al compartir en redes. Los dos sistemas son complementarios: necesitas ambos. Usa el Validador de datos estructurados para comprobar tu esquema JSON-LD mientras el Validador de etiquetas OG se ocupa de tu implementación de Open Graph. El Generador de etiquetas meta puede producir una sección <head> completa con etiquetas OG y de Twitter Card en una sola salida.
Sección head completa recomendada
Como referencia, aquí tienes una sección <head> completa y lista para producción que cubre Open Graph (WhatsApp, Facebook, LinkedIn), Twitter Card y etiquetas meta estándar de SEO:
<head>
<!-- Standard SEO -->
<title>Your Page Title | Site Name</title>
<meta name="description" content="A concise 150-160 character page description." />
<link rel="canonical" href="https://yourdomain.com/your-page" />
<!-- Open Graph (WhatsApp, Facebook, LinkedIn, Slack) -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A concise summary for social sharing." />
<meta property="og:image" content="https://yourdomain.com/images/share-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive alt text for the preview image." />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
<!-- Twitter Card (Twitter/X) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A concise summary for Twitter." />
<meta name="twitter:image" content="https://yourdomain.com/images/share-1200x628.jpg" />
</head>Generador de etiquetas meta
Genera un conjunto completo de etiquetas meta de Open Graph, Twitter Card y SEO de una sola vez, sin escribir nada a mano.
Puntos clave
- WhatsApp lee cuatro etiquetas Open Graph para construir una vista previa de enlace: og:title, og:description, og:image y og:url.
- og:image debe ser una URL HTTPS absoluta completa: las rutas relativas fallan en silencio en WhatsApp y en todos los demás rastreadores sociales.
- Usa un JPEG o PNG de 1200×630 px por debajo de 300 KB como og:image para obtener el mejor renderizado multiplataforma.
- Incluye las etiquetas og:image:width y og:image:height para que los rastreadores puedan maquetar la vista previa antes de que cargue la imagen.
- Las etiquetas OG deben estar en el HTML renderizado en el servidor: WhatsApp no lee las etiquetas meta inyectadas por JavaScript.
- WhatsApp cachea las vistas previas por URL durante días. Añade una cadena de consulta (?v=2) al compartir un enlace actualizado.
- Usa el Validador de etiquetas OG para revisar todas las etiquetas antes de compartir, y el Sharing Debugger de Facebook para forzar un nuevo rastreo tras los cambios.