La vista previa de enlaces de iMessage no funciona o muestra una burbuja gris
Mensajes obtiene la página por sí misma y no ejecuta JavaScript. Sin la etiqueta og:image y un buen icono, solo obtendrás la típica burbuja gris únicamente con el título.
Última actualización
Solución rápida
Comprueba la página con el verificador de etiquetas meta.
Añade una og:image de al menos 900 px de ancho y un og:title sin el nombre de tu marca.
Proporciona un icono cuadrado de al menos 108 px, como un apple-touch-icon.
Vuelve a enviar el enlace con una cadena de consulta para ver la nueva vista previa.
Por qué la vista previa de iMessage aparece vacía o no se muestra
No hay
og:image. Por defecto, Mensajes muestra una burbuja gris con el título, el dominio y un icono pequeño.Las etiquetas se añaden mediante JavaScript. Las vistas previas de enlaces no ejecutan JavaScript, por lo que los metadatos deben estar en el HTML.
La página utiliza una redirección meta refresh. Mensajes no sigue las redirecciones meta. Las redirecciones del lado del servidor sí funcionan.
La página es demasiado grande. La página principal está limitada a 1 MB, y los iconos, imágenes y vídeos juntos a 10 MB.
Móvil y escritorio reciben HTML diferente. Apple solicita los mismos metadatos para ambos.
Cómo solucionarlo
Lee las etiquetas con el comprobador de metaetiquetas.
Añade
og:imagecon una imagen de al menos 900 px de ancho. No incluyas texto en ella, ya que puede mostrarse a tamaños reducidos.Añade un icono cuadrado de al menos 108 px. Mensajes utiliza un apple-touch-icon, un favicon o un icono
<link rel>. Pruébalo con el comprobador de favicons.Establece
og:titlecon el título de la página sin el nombre del sitio web, y pon la marca enog:site_name.Sustituye cualquier meta refresh por una redirección de servidor.
Etiquetas que lee Mensajes
og:titlepara el pie de foto o títuloog:imagepara la imagenog:site_namepara la marcaog:videootwitter:player:streamapuntando a un archivo de vídeo para reproducción integradaUn icono de
apple-touch-icono el favicon
Reglas de tamaño de imagen
Imágenes de al menos 900 px de ancho
Las imágenes de menos de 150 px de ancho pueden ignorarse o mostrarse como un icono
Iconos cuadrados, de al menos 108 px por lado
HTML de la página hasta 1 MB; todas las imágenes, iconos y vídeos hasta 10 MB
Apple denomina esto directrices y señala que los límites pueden cambiar.
Cómo forzar una actualización
Mensajes no tiene una herramienta de actualización. Envía la URL con una cadena de consulta, como ?v=2. No verificado: Apple no publica cuánto tiempo permanece una vista previa en caché. La herramienta de actualización también cubre las demás aplicaciones.
Fuentes
Preguntas frecuentes
¿Por qué iMessage solo muestra una burbuja de enlace gris?
La página no tiene una etiqueta og:image utilizable, por lo que Mensajes recurre al título, al dominio y al icono. Añade una imagen de al menos 900 px de ancho.
¿Ejecuta iMessage JavaScript para generar las vistas previas?
No. Apple indica que las vistas previas de enlaces no ejecutan JavaScript ni siguen redirecciones mediante metaetiquetas. Las etiquetas deben estar en el HTML.
¿Qué tamaño de icono utiliza iMessage?
Apple solicita un icono cuadrado de al menos 108 px por lado, como por ejemplo un apple-touch-icon.
Comprueba tu página y, a continuación, actualiza la vista previa
Pega tu URL en el comprobador gratuito para ver las etiquetas exactas que lee cada aplicación. Una vez que las etiquetas sean correctas, usa la herramienta de actualización para borrar la vista previa antigua.
Guías relacionadas
La vista previa de los enlaces de WhatsApp no funciona o no aparece
WhatsApp tiene límites estrictos: el head debe estar dentro de los primeros 300 KB del HTML y la imagen debe pesar menos de 600 KB. Si no cumples alguno, la vista previa será pequeña o no aparecerá.
La vista previa del enlace de Slack no funciona o no se actualiza
Slack despliega los enlaces con un bot que lee las etiquetas oEmbed, Open Graph y Twitter Card. Los resultados se guardan en la caché de Slack durante unos 30 minutos.
La tarjeta de X (Twitter) no se muestra o no se actualiza
X genera la tarjeta a partir de las etiquetas twitter: y, en su defecto, de las etiquetas og:. Ya no existe un validador que actualice la caché, por lo que la solución pasa por usar las etiquetas correctas y una URL nueva.