Guías para solucionar la vista previa de enlaces
¿Tu enlace no muestra ninguna imagen, tiene un título incorrecto o una tarjeta desactualizada? Elige la aplicación o el creador de sitios web a continuación. Cada guía explica las causas, las etiquetas, las reglas de las imágenes y cómo forzar una actualización.
Aplicaciones y plataformas
La vista previa del enlace de LinkedIn no funciona o no se actualiza
LinkedIn genera la tarjeta a partir de cuatro etiquetas og: y guarda una copia en caché. Corrige las etiquetas y, después, haz que LinkedIn vuelva a rastrear la página con Post Inspector.
La vista previa del enlace de Facebook no se muestra o no se actualiza
Facebook lee las etiquetas Open Graph con su propio rastreador y almacena en caché el resultado durante un máximo de 30 días. Corrige las etiquetas y la imagen, y luego vuelve a rastrear la URL.
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 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.
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.
El embed de Discord no se muestra o no se actualiza
Discord obtiene la página una vez, lee las etiquetas en el HTML del servidor y almacena en caché la vista previa durante unos 30 minutos. Nunca ejecuta tu JavaScript.
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.
Creadores de sitios y frameworks
La imagen Open Graph de Next.js no funciona
La mayoría de los errores de vista previa en Next.js se deben a la API de Metadata: la falta de metadataBase, un objeto openGraph que sustituye al elemento principal o un archivo de imagen que supera el límite permitido.
La imagen OG de WordPress no se muestra al compartir una entrada
En WordPress, las etiquetas Open Graph provienen de un plugin de SEO o del tema. Los motivos más habituales suelen ser el conflicto entre dos fuentes, una página en caché o una imagen demasiado pequeña.
La imagen para compartir en redes sociales de Shopify no funciona
Shopify elige la imagen para compartir en un orden fijo: primero el código del tema, luego la configuración del tema y, por último, la imagen en Preferencias. Subirla al lugar equivocado es el error más común.
La imagen Open Graph de Webflow no funciona
Webflow configura Open Graph por página, nunca de forma global. Las páginas de plantilla de CMS necesitan un campo de Imagen, y todas las imágenes de esa colección deben tener el mismo tamaño.
La vista previa para redes sociales de Framer no se actualiza
Framer define una vista previa para redes sociales en todo el sitio, anulaciones de página e imágenes de CMS por elemento. Si la nueva imagen ya está publicada pero sigue apareciendo la antigua, la causa es la caché de la plataforma.
Arregla la página y luego la caché
Todas las guías siguen el mismo orden. Primero, asegúrate de que las etiquetas y la imagen estén bien en tu página. Solo entonces haz que la aplicación vuelva a cargarlas, o guardará la versión errónea por segunda vez.
Comprueba las etiquetas primero
La mayoría de las vistas previas que fallan se deben a la falta de una etiqueta og:image, a una URL de imagen relativa o a etiquetas añadidas mediante JavaScript. Discord e iMessage no ejecutan JavaScript, por lo que las etiquetas deben estar en el HTML que envía el servidor.
Comprueba la imagen
Usa una imagen JPG o PNG de 1200 x 630 px de menos de 5 MB con una URL https:// absoluta. Esto cumple con el tamaño mínimo de todas las aplicaciones de estas guías. WhatsApp también necesita que sea inferior a 600 KB.
A continuación, borra la caché
Cada aplicación guarda su propia copia de la vista previa. Aunque corrijas la página, esta no cambiará hasta que la aplicación vuelva a cargarla.
Preguntas frecuentes sobre la vista previa de enlaces
¿Por qué no se muestra la vista previa de mi enlace?
La aplicación no puede leer tus etiquetas o sigue mostrando una copia guardada anteriormente. Comprueba qué muestra tu página ahora con el verificador de metaetiquetas. Si las etiquetas son correctas, la aplicación necesita volver a cargar la página.
¿Qué etiquetas lee la mayoría de las aplicaciones?
og:title, og:description, og:image y og:url cubren LinkedIn, Facebook, WhatsApp, iMessage, Slack y Discord. X lee primero twitter:card y, para el resto, recurre a las etiquetas og:.
¿Cómo hago para que una aplicación vuelva a cargar mi página?
LinkedIn tiene el Post Inspector y Facebook el Sharing Debugger. La mayoría de las demás aplicaciones no disponen de una herramienta de actualización, por lo que debes compartir una URL que no hayan visto antes, como el mismo enlace añadiendo ?v=2 al final.