Vista previa de Open Graph

Qué revisa

• Obtiene la página y lee og:title, og:description, og:image y twitter:card de su HTML.
• Recurre al <title> y a la meta description cuando faltan las versiones Open Graph, como hacen la mayoría de las plataformas.
• Dibuja una tarjeta para compartir con la imagen, el dominio, el título y la descripción para LinkedIn, Facebook, X, WhatsApp y Slack.
• Carga og:image directamente desde su servidor y le avisa cuando no se carga.
• Indica cuáles de og:title, og:image, og:description y twitter:card faltan.

Cómo leer el resultado

Las cinco tarjetas comparten un mismo diseño, así que léalas como una comprobación de lo que recibe cada plataforma, no como una copia del diseño de cada aplicación. Si la imagen, el título y la descripción están bien aquí, el contenido está bien; las plataformas se diferencian sobre todo en el recorte y en cuánto texto muestran.

Arregle primero una og:image ausente o rota, porque un enlace sin imagen se pasa de largo. Use una URL https absoluta, una imagen de unos 1200 por 630 píxeles y un servidor que no bloquee las solicitudes externas a ella. Si la vista previa dice que la imagen no se cargó, abra la dirección de og:image por separado para ver por qué.

Las plataformas guardan las tarjetas en caché. Después de cambiar las etiquetas, pida a cada una que vuelva a obtener la página, por ejemplo con el Post Inspector de LinkedIn o el Sharing Debugger de Facebook, o la gente seguirá viendo la tarjeta antigua.