> Faqs > Cómo hacer que WhatsApp obtenga la imagen representativa de una página

Cómo hacer que WhatsApp obtenga la imagen representativa de una página

Hola, estoy haciendo una web con una sola página, que no puede ser más simple: una sola imagen, y debajo varios párrafos cortos.

Todos vemos que cuando en un teléfono móvil enviamos a alguien por WhatsApp el link a una página, WhatsApp de alguna forma obtiene una imagen "representativa" (no sé el nombre correcto, seguro que es otro porque buscando en Google con ese no he encontrado ninguna información sobre lo que pregunto aquí) de esa página, lo une al título de esta, y lo manda todo junto con el link, con lo cual la presentación queda mucho más atractiva (y útil para el receptor, por la función aclaratoria de la imagen).

P.ej, si envío por WhatsApp el link a este cómic en Amazon:

https://www.amazon.es/Imposible-Patrulla-X-%C2%A1Segunda-G%C3%A9nesis-Gold/dp/8490248672

WhatsApp se las apaña para buscar, entre la multitud de imágenes que hay en la página, justo la de la imagen del cómic, y la envía junto con el título ("La Imposible Patrulla-X 1. ¡Segunda Génesis! (Gold - Imposible Patrulla X): ... ") y el link, y todo eso es lo que ve el receptor del mensaje; mucho más chulo que si solo viera el link. ¡Y además, Amazon incluye hasta un pequeño resumen!

Pero ¿cómo demonios se hace eso? En mi página solo tengo una imagen y solo una (es la imagen de cabecera), y cuando le envío a alguien el link por WhatsApp, este solo manda el título, sin imagen, y eso que solo tengo una (joder, más fácil para WhatsApp imposible) :-( ...

Muchas gracias por anticipado, un saludo...

Respuestas

WhatsApp usa el mismo mecanismo de Facebook y otras redes sociales para extraer la información con la que se comparte en redes sociales.

El sistema sobre el que te tienes que documentar se llama "Open Grahp". Consiste en agregar una serie de etiquetas meta a tu sitio, por lo que es bastante sencillo de usar.

Encuentras la imformación oficial en: https://ogp.me/

Además, si quieres aquí puedes consultar un tutorial completo para definir tus etiquetas meta de open graph.

Miguel Angel
3295 146 215 17
¡Funcionaaaa! ¡Era eso, era eso! ¡Gracias Miguel Ángel, eres un crak! :-)))) Hola, en concreto es este meta: meta property="og:image" content="https://Dominioc.om/2018-11-21.png"