Tecnología

WhatsApp: Cómo mostrar una imagen de la web junto al enlace enviado

Enlace con imagen en WhatsApp.
Figura 1. Diferencia cuando el usuario tiene configurada la descarga automática y manual a la hora de visualizar imágenes del enlace.

Para que se vea una imagen de nuestra web cuando enviamos un enlace de ésta a través de WhatsApp es necesario incluir en el código de la página del enlace una etiqueta meta con la siguiente sintaxis:

<meta property=”og:image” content=”URL-IMAGEN” />

Donde URL-IMAGEN debe sustituirse por la URL de la imagen a mostrar. Ejemplo:

<meta property=”og:image” content=”http://www.seindor.com/maacera.com/imagenes/fotoperfil.png”/>

Los formatos típicos JPG y PNG son admitidos.

A tener en cuenta

Para poder ver la imagen junto al enlace es necesario que en nuestro WhatsApp tengamos activada en Configuración la descarga automática de imágenes. En la figura 1 vemos la diferencia cuando el usuario tiene configurada la descarga automática y manual.

Igualmente, el usuario debe contar con la última versión de WhatsApp y, de momento, sólo está disponible para la versión Android.

Uso en comercio electrónico

Figura 2. Imágenes de blogs y productos junto a enlaces.
Figura 2. Imágenes de blogs y productos junto a enlaces.

En lugar de mostrar el típico icono o logo de la empresa en esta imagen, mostrar una miniatura de una de las imágenes de la página sería lo ideal (ver figura 2). Supongamos que estamos ante un producto de una tienda online, por ejemplo un libro. Si compartimos por WhatsApp el enlace, que se vea la imagen del producto será un plus para captar la atención y darlo a conocer (como mínimo lo verá).

Con este sistema, WhatsApp se fortalece como herramienta para recomendar productos y fomentar compras u otro tipo de acciones. Veremos incrementado su uso seguramente en próximas campañas políticas.

Experimentos

Después de hacer algunas pruebas, comprobé que es posible mostrar imágenes con dimensiones máximas de 82 pixels de alto y 374 px de ancho, o proporcional.

Esto nos permite mostrar imágenes de mayor tamaño, como vemos en la figura 3, aunque parte del texto o enlace que hay junto a la imagen se pierde. Vemos en uno de ellos que se muestra “cera.com”, en lugar de “maacera.com”. En otro vemos “rca de…”, en lugar de “Acerca de…”. Son tres letras las que se pierden, así que sabiendo esto, todo es recurrir a algún truco.

Figura 3. Imágenes de gran tamaño junto a enlaces.
Figura 3. Imágenes de gran tamaño junto a enlaces.

También hay que decir que si la pantalla la tenemos en posición horizontal, sí se ve todo el texto si en lugar de escribir la dirección de la web únicamente, hemos compartido la página desde el navegador. Ver figura 4.

Preocupaciones

Una de las preocupaciones que existen actualmente es la imposibilidad de controlar u observar la actividad creciente que los consumidores desarrollan en WhatsApp.

Cuando las empresas estaban invirtiendo esfuerzos en páginas de Facebook y perfiles en otras redes para contener en ellas parte de las conversaciones y medir la actividad de éstos, muchos son los usuarios que ahora trasladan estas conversaciones a WhatsApp, donde la marca no tienen ningún lugar. ¿Cómo se enfrentarán a esto?

Figura 4. Pantalla en horizontal. Algunos enlaces no pierden texto.
Figura 4. Pantalla en horizontal. Algunos enlaces no pierden texto.
Valora el artículo:
1 Star2 Stars3 Stars4 Stars5 Stars (Vota ahora)
Loading...
  • Luis

    Hola:
    Estoy probando tu método y no me funciona, se manda todo correctamente menos la imagen, uso un teléfono android y aunque en teoría es para iphones, funciona perfectamente todo, excepto eso. me preguntaba si podrías poner un enlace de prueba para salir de dudas.
    Gracias. Muy buen artículo.

  • eva

    Muchas gracias Miguel Ángel, estoy intentando poner esta etiqueta en blogger, pero me da error, no sé si es que blogger no la admite o soy yo la que lo está poniendo en un mal sitio. Feliz Año

  • Eva, las etiquetas META indicadas deben añadirse entre las etiquetas HEAD.

  • Para comprobar si os funciona, debéis revisar cómo se ve en el móvil del destinatario. Además, recordad que para poder ver la imagen junto al enlace es necesario que el destinatario tenga activada en Configuración la descarga automática de imágenes.

  • Aldair

    Hola que tal busque en mi web ,que esta en wordpress y dentro del meta.php ya habia una etiqueta , nose si debo ingresar otra etiqueta para el whatssap ?

  • Luis Angel

    Hola:

    Estamos probando en nuestra web y no conseguimos que funcione.
    ¿ Esta opción esta disponible por WhatsApp o la han quitado ?
    Gracias.

  • Moacir Lemos

    Hola Miguel Ángel.
    Necesitaría ayuda, a ver si me puedes echar una mano.
    He seguido todos los pasos que indicas en tu post (por cierto, muchas gracias por escribirlo y por tu aportación), he definido la imagen con meta property… como indicas, pero de forma “extraña”, los enlaces que mando por whatsapp de algunas de las páginas sí me muestran la fotito… y otros no ¿por qué?

    Incluso si cojo un enlace que muestra la fotito bien, y sustituyo esta foto por otra… deja de mostrarla! y se trata de fotos del mismo tamaño y píxeles y hasta en kb.
    ¿puede que haya alguna propiedad de la foto que sea la causante del fallo?

    por ejemplo: en enlace http: http://moamadridtattoo.com/137_tatuaje_de_rosa_con_alas.html mandado por whatsapp muestra la fotito correctamente y
    http://moamadridtattoo.com/138_tatuaje_de_rosa_alas_cruz_y_nombres.html no la muestra ¿a qué se puede deber?

    Muchas gracias por adelantado.

  • Juan Alberto Torrealba

    Para poder ver la imagen junto al enlace es necesario que en nuestro WhatsApp tengamos activada en Configuración la descarga automática de imágenes. PERO DÓNDE SE ACTIVA ESA CONFIGURACIÓN ?