Cómo hacer que el icono de tu web aparezca al lado del enlace cuando alguien lo envíe por WhatsApp

Esta mañana surgía la noticia: en algunos medios se aseguraba que WhatsApp había comenzado a introducir publicidad. Al final, nada de eso. Simplemente en su nueva versión para Android (todavía no en iOS) se ha incluido una especie de previsualizador de enlaces. ¿Qué hace? Simplemente añade un icono al lado de un link cuando lo enviamos en alguna conversación. Podéis ver varios ejemplos sobre estas líneas.

Pero ¿de dónde saca WhatsApp estos iconos? ¿Paga la gente para que la aplicación los incluya? No. Es más, tú mismo puedes hacer que este icono aparezca al lado de tu url cuando alguien la envíe a otra persona a través de esta app. ¿Cómo? Muy sencillo: utilizando el código que Facebook propone para que las miniaturas salgan en su red social.

Un momento... ¿por qué ahora hablo de Facebook si estaba hablando de WhatsApp? Muy sencillo: el sistema de previsualización de WhatsApp utiliza los iconos que las webs han definido para que aparezcan en la previsualización de Facebook. Lío, ¿Verdad? No te preocupes, el conseguir que este icono aparezca es muy sencillo. Además, para los más curiosos, damos una explicación extendida al final de este artículo.

En resumen, esto es lo que tienes que hacer

• Edita el código fuente de tu página y, dentro de los tags , donde deberías tener especificados los metatags, incluye la siguiente línea:

• Sustituye http://direccion.de.tu.imagen.png por la dirección web de dónde tienes alojado el logo que quieres que aparezca. Facebook recomienda que sea de tamaño 200x200 px.

• Vete a la herramienta de Facebook para desarrolladores e introduce tu url para comprobar que todo está correcto (de esta forma, Facebook también actualiza la información de tu web).

Y voilá. Ahora si alguien envía tu dirección url (o sí tú mismo lo haces) a cualquier contacto que tenga la versión más actualizada de la app para Android, ésta mostrará el icono que has elegido. De la misma forma, si ahora introduces la url de tu página en Facebook, te aparecerá siempre el mismo icono.

La explicación detallada

Abre tu cuenta de Facebook y, sin llegar a publicar, prueba a introducir http://www.elmundo.es en una actualización de estado. Observa con detalle la previsualización del enlace que te aparece. Ahora repite el proceso con http://www.elpais.com.

Las diferencias son claras: en la web de El Mundo aparecen tres fotos aleatorias. ¿Qué quiere decir esto? Que no tienen definida una imagen concreta con og:image, como explicábamos en el apartado anterior. Mientras tanto, un rápido vistazo al código fuente de la web de El País os dejará ver que ellos sí han optado por precisar que icono quieren que muestre la red social y que, sorpresa, es el mismo que se muestra en WhatsApp.

Con su open-graph, Facebook permite a los webmasters que especifiquen la imagen, la descripción, el título, la url, el nombre del sitio... Basta con añadir las meta property adecuadas. En Open Graph Program tenéis más detalles de todo lo que se puede personalizar.

Aprovechando que muchas webs utilizan ya este sistema de personalización para Facebook, desde WhatsApp parecen haber incluido una llamada a og:image en su previsualizador de enlaces. Esta imagen se mostrará al lado del enlace de las webs que tengan este parámetro definido. Por contra, y mientras que las webs que no tienen este parámetro en Facebook muestran imágenes recientes, en WhatsApp no se mostrará ninguna imagen. Sencillo, ¿verdad?

PD: Para que esto funcione, recordamos que el que vea la URL tiene que estar utilizando la última versión de WhatsApp en Android. Si no, la dirección se verá como siempre, sin icono asociado. Por ahora, no tenemos noticias de que vayan a implementarlo en otros sistemas operatidos.

En Xataka Móvil | "No, WhatsApp no está introduciendo publicidad, solo previsualizaciones":https://www.xatakamovil.com/aplicaciones/no-whatsapp-no-esta-introduciendo-publicidad-solo-previsualizaciones