7 min de lecturaTutoriales

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

Una vista previa de enlace se construye a partir de etiquetas Open Graph en el destino. Por qué las vistas previas se rompen en WhatsApp, Facebook, X y Slack - y los pasos exactos para solucionar cada una.

Ana Kowalska
Marketing solutions engineering
Un enlace sin vista previa convirtiéndose en una tarjeta social completa una vez que se corrigen las etiquetas Open Graph, en la paleta de colores de Elido

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 en el encabezado HTML de una página - og:title, og:description, og:image, og:url - alimentando una tarjeta de vista previa de enlace social renderizada

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.

Un rastreador de plataforma social siguiendo una redirección de enlace corto de un solo salto hasta la página de destino y leyendo sus etiquetas Open Graph, frente a un caso roto de cadena de redirecciones o máscara de iframe

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

Preguntas frecuentes

¿Por qué no aparece la vista previa de mi enlace?

Una vista previa de enlace se construye a partir de las metaetiquetas Open Graph en el HTML de la página de destino - og:title, og:description, og:image y og:url. Si esas etiquetas faltan, están mal formadas o la imagen no es accesible, la plataforma no tiene nada para renderizar y recurre a un enlace simple. La otra causa común es el almacenamiento en caché: la plataforma ya obtuvo la página una vez, almacenó un resultado vacío o antiguo, y sigue mostrándolo hasta que fuerzas una actualización con su herramienta de depuración.

¿Cómo soluciono una vista previa de enlace en Facebook o LinkedIn?

Ejecuta la URL a través de la propia herramienta de la plataforma: el Depurador de Uso Compartido de Facebook o el Inspector de Publicaciones de LinkedIn. Cada uno obtiene la página de nuevo, te muestra exactamente qué etiquetas Open Graph encontró y te permite raspar de nuevo para borrar la versión en caché. Primero corrige las etiquetas faltantes o incorrectas en la página, luego vuelve a raspar - la vista previa se actualiza en minutos. Estos depuradores son la forma más rápida de diagnosticar y actualizar una vista previa rota.

¿Los enlaces cortos rompen las vistas previas de enlaces?

No si el acortador usa una redirección normal. 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 vista previa muestra la tarjeta del destino. Las vistas previas se rompen cuando el destino no tiene etiquetas, cuando una cadena de redirecciones confunde al rastreador, o cuando el enlace usa enmascaramiento de iframe en lugar de una redirección. Un enlace corto limpio de un solo salto a una página con buenas etiquetas muestra una vista previa exactamente igual que lo haría la URL larga.

¿Por qué la vista previa de mi enlace funciona en una plataforma pero no en otra?

Cada plataforma ejecuta su propio rastreador con sus propias reglas y su propio caché. Facebook lee Open Graph, X lee las etiquetas Twitter Card (y recurre a Open Graph cuando no las hay), y algunas aplicaciones apenas renderizan vistas previas. Así que una página con Open Graph pero sin etiquetas Twitter Card puede verse perfecta en Facebook y simple en X. La solución es incluir tanto las etiquetas Open Graph como las etiquetas Twitter Card principales, y luego borrar el caché de cada plataforma por separado con su depurador.

¿Cuánto tiempo tarda en actualizarse una vista previa de enlace arreglada?

Si el problema eran las etiquetas faltantes, la vista previa aparece la próxima vez que la plataforma rastrea la URL - normalmente minutos después de volver a rasparla en el depurador. Si el problema era una vista previa en caché incorrecta, permanece mal hasta que el caché expire o fuerces una actualización, que los depuradores hacen bajo demanda. El caso lento es una plataforma que almacena agresivamente en caché y no ofrece actualización manual, donde puede que esperes horas - o compartas una URL ligeramente diferente para esquivar el caché.

¿Puedo cambiar la imagen que aparece en una vista previa de enlace?

Sí - establece la etiqueta og:image en la página de destino a la imagen que quieres, en un tamaño seguro (1200x630 píxeles es el predeterminado fiable), luego vuelve a raspar la URL en el depurador de cada plataforma para borrar la antigua. La imagen de vista previa siempre proviene de las etiquetas de la página de destino, no del propio enlace, así que un enlace corto no puede anularla. Controla la imagen controlando og:image en la página a la que apunta el enlace.

Prueba Elido

Pega una URL, obtén un enlace corto

Sin registro. El enlace vive 30 días. Crea una cuenta para conservarlo.

Gratis, sin registro · 2 por día

Prueba Elido

Acortador de URL alojado en la UE: dominios personalizados, análisis profundo y API abierta. Plan gratuito - sin tarjeta de crédito.

Etiquetas
link preview not showing
fix link preview
open graph tags
social media preview
link preview image
og tags

Seguir leyendo