Vista Previa de Enlaces Web en SMS

Fecha de publicación: 2020-01-26
Última actualización: 2020-01-26
Autor: Victor Celer

 

La previsualización o Vista Previa de enlaces web en mensajes SMS es una funcionalidad estandar soportada por muchos teléfonos móviles Android e iOS. Esta funcionalidad consiste en descargar y presentar una vista del contenido web (generalmente una imagen), al cual hace referencia una URL dentro del mensaje de texto SMS. La vista previa enriquece la apariencia del mensaje. Por ejemplo:

Mensaje SMS con Vista Previa de Enlace Web

La funcionalidad de Vista Previa puede ser considerada como una evolución de los enlaces cliqueables dentro de los mensajes SMS. No se debe confundir con la funcionalidad de MMS. El contenido multimedia que se incluye en un mensaje MMS se descarga a través de un APN MMS controlado por el operador, mientras que el contenido de la Vista Previa se puede descargar por medio del APN de Internet o WiFi.

 

Compatibilidad con iOS iOS

La Vista Previa funciona desde iOS 10 introducido en 2016. De acuerdo con las métricas de Apple Store mas del 90% de los iPhone introducidos en los últimos 4 años tienen una versión compatible. Por lo tanto, casi todos los iPhone pueden desplegar la Vista Previa en SMS.

 

Compatibilidad con Android Android

La funcionalidad de Vista Previa es soportada en Android a partir de la versión 3.2 de la app de Mensajes. La mayoría de los teléfonos Android introducidos a partir de 2018 tienen una versión compatible preinstalada, por ejemplo: Samsung A6 (2018), Samsung A7 (2018), Huawei Mate 9.

La app de Mensajes es compatible con Android 5.0 y posterior. Entonces, esta app puede ser instalda por el usuario también en teléfonos anteriores al año 2018.

De acuerdo con el reporte de distribuciones de Google mas del 38% de los terminales Android tienen una versión compatible. Por lo tanto, es seguro asumir que al menos 1 de cada 3 teléfonos Android pueden desplegar la Vista Previa en SMS.

Es posible deshabilitar la funcionalidad de Vista Previa en los ajustes de la app de Mensajes bajo el menú de Mas ajustes:

Ajustes de Vista Previa

Nota: En algunas versiones de la app de Mensajes es posible opcionalmente permitir la descarga de la Vista Previa sólo por WiFi.

 

Limitaciones

Antes de continuar revisemos las principales restricciones de la Vista Previa en SMS:

  • La restricción mas importante consiste en que el remitente del SMS debe estar en la lista de contactos. Esto significa que el teléfono no previsualizará la URL si el remitente es un número desconocido. Esta restricción aplica para todos los iPhone y la mayoría de los Android.
  • Tenga en cuenta que algunos dispositivos no soportan esta funcionalidad o el usuario ha decidido deshabilitarla en los ajustes. De hecho, hay casos en los que la Vista Previa se encuentra deshabilitada por defecto de fábrica, aunque esto no es común. El punto es que algunos usuarios no podrán visualizar el contenido web por restricciones del teléfono.
  • Existe una demora entre el momento en que es recibido el SMS y el momento en que se despliega la Vista Previa. Esta demora puede ser grande si se presenta lentitud en la red y/o en el servidor, en el cual se aloja la página de destino. Inclusive si la demora alcanza unos pocos segundos existe la posibilidad de que el usuario lea el mensaje de texto antes de que se descargue la Vista Previa del contenido web.
  • Algunos dispositivos requieren interacción con el usuario para descargar la previsualización. Por ejemplo, puede ser necesario oprimir un botón para iniciar la descarga.

 

Página de Destino

Al descargar el contenido de la URL el teléfono busca ciertas etiquetas, conocidas como Open Graph. El siguiente ejemplo contiene el mínimo de etiquetas requeridas por compatibilidad con Android e iOS:

<html>
 <head>
  <meta property="og:title" content="Ejemplo de Vista Previa"/>
  <meta property="og:image" content="http://acme.com/img.png"/>
  <meta property="og:url" content="http://acme.com/vista.htm"/>
  <title>Ejemplo de Vista Previa</title>
 </head>
 <body>
  <h1>Esto es un ejemplo de pagina destino</h1>
 </body>
</html>

Nótese que el ejemplo contiene 3 etiquetas Open Graph con prefijo "og:"

  • og:title generalmente se despliega debajo de la imagen a manera de título. Para mayor consistencia los contenidos de la etiqueta "title" y la meta-etiqueta "og:title" deben coincidir. iOS tiene en cuenta la última, mientras que Android tiene en cuenta la primera.
  • og:image es una imagen en formato PNG o JPG. El formato GIF no es soportado en algunos teléfonos. Se debe especificar la URL completa. El ancho de la imagen debe ser al menos 1200 px. De acuerdo con las especificaciones de Apple, el ancho mínimo es de 900 px, pero en nuestras pruebas hemos encontrado que algunos dispositivos sólo despliegan la imagen si el ancho es mínimo 1200 px. Si el tamaño del archivo con la imagen es muy grande la descarga de la Vista Previa se puede demorar mas. Se recomienda optimizar la imagen para reducir el tamaño del archivo. Existen herramientas de optimización de imágenes gratuitas en línea.
  • og:url es la URL completa canónica de la página destino. Se debe usar el mismo valor que la URL en el mensaje SMS.

Etiquetas Open Graph adicionales pueden ser incluidas, pero no es mandatorio hacerlo.

 

SMS con URL

Tenga en cuenta las siguientes recomendaciones en cuanto al formato y ubicación del enlace URL dentro del mensaje SMS:

  • Por compatibilidad con iOS la URL debe aparecer exactamente al comienzo o al final del mensaje de texto. Si la URL se incluye en medio del mensaje la Vista Previa no se desplegará.
  • Evite el símbolo de dolar ($) dentro de la URL por compatibilidad con versiones previas de iOS 10.
  • Es mandatorio especificar la URL completa, incluyendo el prefijo de esquema: http:// o https://
  • El mensaje no debe contener mas de 1 URL. Si se incluyen múltiples URL, la Vista Previa no se desplegará en algunos teléfonos.

Se recomienda evitar URL largas. Si la URL es muy larga considere usar un servicio acortador de URL.

Una buena práctica consiste en probar la Vista Previa antes de enviar el mensaje a otro usuario. Para probar puede enviar el mensaje a su mismo número. Sólamente asegúrese de que su número esté en la lista de contactos antes de enviar el mensaje. Si la Vista Previa no carga, inclusive luego de unos segundos, intente repasar las anteriores recomendaciones.