¿La Vista Previa del Enlace No Aparece? Causas y Cómo Solucionarlo

Una vista previa de enlace se construye a partir de las etiquetas Open Graph en el HTML de la página de destino - og:title, og:description, og:image y og:url. Cuando pegas un enlace en WhatsApp, Facebook, Slack o X, el rastreador de esa plataforma obtiene la página, lee esas etiquetas y renderiza la tarjeta. Si la vista previa no aparece, casi siempre es una de dos cosas: las etiquetas faltan o están rotas, o la plataforma almacenó en caché un resultado vacío y sigue sirviéndolo.

Ese único hecho - la vista previa viene del destino, no del enlace - es lo que hace que esto sea solucionable. No estás depurando la plataforma; estás depurando las etiquetas de la página y luego borrando la memoria de la plataforma sobre ellas. Esta guía cubre por qué se rompen las vistas previas, el puñado de etiquetas que importan, si los enlaces cortos tienen la culpa (normalmente no), y la herramienta exacta para actualizar cada plataforma.

Si también estás acortando el enlace, cómo acortar una URL cubre ese aspecto, y la pregunta sobre el enlace corto tiene su propia sección más adelante porque es la que la gente entiende mal.

Por Qué Se Rompen las Vistas Previas de Enlace#

Las vistas previas fallan por un pequeño conjunto predecible de razones, y nombrarlas es la mitad de la solución.

• Etiquetas Open Graph faltantes o mal formadas. Sin og:title u og:image, el rastreador no tiene nada con qué construir una tarjeta, así que obtienes un enlace simple. Esta es la causa más común con diferencia.
• Una imagen inaccesible o demasiado grande. La URL de og:image devuelve un 404, está detrás de un inicio de sesión, o es demasiado grande para que la plataforma la obtenga a tiempo. La tarjeta se renderiza sin su imagen, o no se renderiza en absoluto.
• Vacío en caché. La plataforma rastreó la URL una vez antes de que existieran las etiquetas, almacenó "sin vista previa" y sigue mostrando eso hasta que se le obligue a mirar de nuevo.
• Renderizado solo con JavaScript. La mayoría de los rastreadores sociales no ejecutan JavaScript; leen el HTML sin procesar. Si tus etiquetas se inyectan del lado del cliente, el rastreador nunca las ve.

Ese último caso atrapa constantemente a las aplicaciones modernas de página única. El rastreador solicita el HTML, obtiene una carcasa vacía y se va. La especificación del protocolo Open Graph define cómo deben verse las etiquetas en el HTML servido, y la solución siempre es asegurarse de que estén en el HTML que recibe el rastreador, no añadidas más tarde por un script.

Las Etiquetas Open Graph que Impulsan una Vista Previa#

Cuatro etiquetas hacen casi todo el trabajo. Ponlas bien y la mayoría de las plataformas renderizan una tarjeta limpia.

og:title es el titular de la tarjeta. og:description es la línea de texto debajo. og:image es la imagen, y es la que la gente suele poner mal - apúntala a una URL absoluta de una imagen de alrededor de 1200x630 píxeles, públicamente accesible, no detrás de autenticación. og:url es la dirección canónica de la página, que mantiene la vista previa estable incluso cuando el enlace lleva parámetros de seguimiento.

X lee su propia familia de etiquetas twitter:card y recurre a Open Graph cuando no están presentes, por eso una página puede verse perfecta en Facebook y simple en X. El movimiento seguro es incluir ambas: las cuatro etiquetas Open Graph más twitter:card, twitter:title, twitter:description y twitter:image. Son unas pocas líneas de HTML en el head de la página, y es la diferencia entre una tarjeta que funciona en todas partes y una que funciona en un solo lugar. Google documenta el relacionado comportamiento del rastreador y las etiquetas especiales si también quieres la perspectiva del lado de búsqueda.

¿Los Enlaces Cortos Rompen las Vistas Previas de Enlace?#

Esta es la pregunta que trae a la gente al blog de un acortador de URL, y la respuesta es tranquilizadora: un enlace corto limpio no rompe las vistas previas. Cuando compartes un enlace corto, el rastreador de la plataforma sigue la redirección hasta el destino y lee las etiquetas Open Graph allí, por lo que la tarjeta muestra la vista previa del destino exactamente como lo haría la URL larga.

Las vistas previas se rompen alrededor de los enlaces cortos solo en casos específicos. Una cadena de redirecciones - un enlace corto apuntando a otro enlace corto apuntando a la página - puede confundir o agotar el tiempo de espera de un rastreador, así que mantenlo en un salto, que es la misma disciplina que mantiene las redirecciones rápidas y limpias para SEO. Un acortador que usa enmascaramiento de iframe en lugar de una redirección real romperá la vista previa, porque el rastreador ve el envoltorio, no el destino - una de varias razones por las que esa técnica es una mala idea, cubierta en cloaking de enlaces y enmascaramiento de URL. Y si el propio destino no tiene etiquetas Open Graph, ningún enlace corto puede inventarlas. Usa una redirección de un solo salto en un dominio personalizado que apunte a una página con buenas etiquetas, y la vista previa es idéntica al enlace sin acortar.

Si quieres enlaces cortos que redirijan limpiamente en un salto y nunca se interpongan entre tu audiencia y una buena vista previa, comienza un espacio de trabajo gratuito en Elido y apunta tu primer enlace a una página con etiquetas adecuadas.

Cómo Solucionarlo, Plataforma por Plataforma#

Una vez que las etiquetas son correctas, el trabajo restante es borrar el caché de cada plataforma, y todas las plataformas principales te dan una herramienta.

1. Facebook e Instagram. Ejecuta la URL a través del Depurador de Uso Compartido de Facebook. Muestra las etiquetas que encontró y un botón "Raspar de nuevo" que vuelve a obtener la página y borra la tarjeta en caché. Esto también cubre Instagram, que comparte el mismo rastreador.
2. LinkedIn. Usa el Inspector de Publicaciones de LinkedIn. LinkedIn almacena en caché las vistas previas durante alrededor de una semana, y el inspector es la única forma de forzar una actualización anticipada.
3. X (Twitter). El validador de tarjetas vuelve a obtener la página y muestra cómo se renderizará la tarjeta; confirma que las etiquetas twitter:card estén presentes y vuelve a probar.
4. WhatsApp, iMessage, Slack, Discord. Estas no tienen un depurador público. Siguen Open Graph, pero almacenan en caché de forma agresiva. La solución alternativa es compartir una URL ligeramente diferente - añadir o cambiar un parámetro de consulta inofensivo - que la aplicación trata como nueva y rastrea de nuevo.

El patrón es el mismo en todas partes: corrige las etiquetas en la página, luego obliga a la plataforma a mirar de nuevo. Una vista previa que simplemente está en caché se corrige en minutos una vez que la vuelves a raspar; una vista previa que tenía etiquetas faltantes aparece en cuanto el rastreador vuelve a ver la página.

La Lista de Verificación Previa al Compartido#

Antes de que un enlace llegue a una audiencia, treinta segundos de comprobación evitan la vergüenza del enlace simple.

• Confirma que el destino tiene og:title, og:description, og:image y og:url, más las etiquetas Twitter Card.
• Abre la URL de og:image directamente en un navegador - debe cargarse, públicamente, aproximadamente a 1200x630.
• Ejecuta la URL final, incluyendo el enlace corto, a través del depurador de Facebook para ver la tarjeta real.
• Si estás compartiendo un enlace corto, verifica que sea un salto hasta el destino, no una cadena.

Haz esas cuatro cosas y la vista previa aparece la primera vez, en cada plataforma que importa. La tarjeta no es magia y no es la plataforma siendo difícil - son cuatro etiquetas en tu página y un caché que borrar.

Más en el Blog#

• Cómo acortar una URL: enlaces gratuitos, de marca y masivos
• Dominios personalizados para enlaces cortos: el recorrido de DNS y TLS
• Cloaking de enlaces y enmascaramiento de URL: qué es seguro para SEO
• ¿Los acortadores de URL perjudican el SEO? La respuesta honesta
• Los smart links explicados: enrutamiento en el borde sin un servicio adicional