Si no quieres leer el post completo puedes ir a ver la Causa del problema y la Solución

Un día como cualquier otro, recibí un ticket para revisar por qué nuestros enlaces, al compartirlos en un chat, no tenían vista previa. Esto sonaba como una solicitud fácil, pero hace unos días implementamos una función importante que hizo que todos apuntaran a que fue causado por la nueva versión. Como imaginaran, terminó siendo un día estresante, de hecho, más de un día.

Se informó que se utilizó una herramienta de automatización web para verificar las vistas previas y que tampoco funcionaba.

[!note] Las vistas previas de los enlaces de los ambientes de desarrollo estaban funcionando, solo produccion estaba fallando.

Investigando, descubrí que se debía a la optimización de imágenes de nuestra CDN, en combinación con el favicon de nuestro sitio web. Al parecer, la CDN bloqueaba cualquier intento de cargar el favicon desde la vista previa de los chat. La solución fue sencilla: simplemente se cambio la url del favicon de CDN a otro origen y, en menos de 20 minutos, teníamos una nueva versión del sitio web funcionando. Ejemplo del cambio:

De:

<link rel="icon" type="image/x-icon" href="https://CDN.andrevops.com/img/favicon.png">

A:

<link rel="icon" type="image/x-icon" href="https://andrevops.com/favicon.png">

[!info] El tamaño del favicon se cambió de 192x192 a 32x32px, ahorrando aproximadamente el 80% del tamaño de la imagen.

Tras implementar los cambios, comprobé que los enlaces en varios chats funcionaban. También descubrí que la herramienta de automatización web tiene una extensión de navegador que me permitió confirmar que la vista previa del link funcionaba correctamente. Ejemplo:

Pasted image 20250403202008.png

Pensé que estaba resuelto pero solo fue el inicio.

El problema principal se solucionó con la actualización del favicon, pero había otro problema del que nadie se había quejado hasta ese momento: las vistas previas no funcionaban en Slack.

En ese momento, estaba casi seguro de que el problema no era de nuestro lado, pero afirmaron que la vista previa del chat de Slack era una función importante y que necesitaban que funcionara lo antes posible. Seguí revisando el código para confirmar que toda la metadata estuvieran configurada. Descubrí que algunos valores no estaban configurados y se desplego una nueva versión. ¿Adivinas? Slack seguía sin funcionar.

Pasted image 20250403203238.png

Me dijeron que la imagen añadida apuntaba a una ruta relativa (introducida hace 4 años) y que debería apuntar a la ruta completa. ¡Actualizado! No funcionó.

De:

<meta property="og:image" content="/preview_image.png">

A:

<meta property="og:image" content="https://andrevops.com/preview_image.png">

Causa

En ese momento, estaba completamente seguro de que el problema no era nuestro y decidí investigar otras posibles razones, sin éxito, hasta la tarde de ese mismo día. Encontre que Slack tiene una función solo disponible para administradores/propietarios (no yo) que permite bloquear la vista previa de los Links para todos.

Pasted image 20250403212839.png

Como administrador, al eliminar la vista previa de un link después de enviarlo, puedes bloquear el enlace específico o el dominio.

Pasted image 20250403213214.png

Pasted image 20250403213021.png

Tras escalar el problema a un administrador, pudimos ver la vista previa de los links. Lo curioso no es que un administrador externo al equipo bloqueara el enlace (Probablemente sin intención), sino que afirmaron que la función era importantísima y que fue a causa de la nueva versión del sitio, pero en realidad se bloqueó casi un mes antes, ya que pudimos validar la fecha en el admin.

Screenshot 2025-04-03 214139.png

[!question] ¿Qué pasó con la herramienta de automatización web? Fácil. El firewall configurado anteriormente tenía una regla de comportamiento de bot y las peticiones fueron bloqueadas.

Solución

Como habilitar la vista previa de los links en Slack

  1. Herramientas y ajustes > Ajustes del espacio de trabajo.
  2. Adjuntos.
  3. Vistas previas bloqueadas