Open Graph Vista previa

Una herramienta de vista previa Open Graph le muestra cómo será un enlace compartido antes de publicarlo. Ingresas tus campos og:title, og:description, og:image, og:url y Twitter Card, o pegas el bloque de metaetiquetas que ya tienes, y la herramienta representa tarjetas sociales aproximadas para Facebook, X/Twitter, LinkedIn, Slack y Discord. En lugar de presionar una página en vivo, compartirla y descubrir que el título está cortado por la mitad o que la imagen nunca se carga, ves el problema mientras aún puedes solucionarlo.

El protocolo Open Graph es el vocabulario compartido que utilizan casi todas las plataformas para crear esas tarjetas. Un raspador visita su página, lee el og: metaetiquetas en <head> y reúne una vista previa de ellas. El problema es que cada plataforma representa esas mismas etiquetas de manera diferente: X trunca las descripciones en aproximadamente 110 caracteres mientras Facebook muestra más cerca de 155, LinkedIn oculta la descripción por completo en algunas superficies y Slack colapsa todo en un archivo adjunto compacto. Un campo que se ve bien en una tarjeta se puede destrozar en otra, razón por la cual obtener una vista previa de todas a la vez es la única verificación confiable.

Aquí hay una vista previa de gráfico abierta con números reales. Establezca og:título en "Cómo cortamos el tiempo de carga de nuestra página a la mitad sin una reescritura" (55 caracteres, un pase) y dale una descripción og: de 125 caracteres. La validación pasa el título y advierte sobre la descripción: bien para Facebook y LinkedIn, pero X trunca más allá de 110. La tarjeta X de imagen grande corta el texto después de "desde 4,1 segundos...", mientras que la tarjeta de Facebook muestra la oración completa. La vista previa de la imagen del gráfico abierto carga su og:image en cada tarjeta, por lo que un enlace roto muestra "La imagen no se pudo cargar" antes de que alguien la comparta.

Esta herramienta se ejecuta en el lado del cliente y nunca recupera ni raspa su página. Funciona a partir de las etiquetas que le proporciona, ya sea escritas en el formulario o pegadas como HTML sin formato y analizadas localmente. Eso significa que puede validar metadatos para páginas que están detrás de un inicio de sesión, en un dominio de preparación o que no se han implementado en absoluto. La única solicitud que realiza a su servidor es cargar la URL de imagen og, para que su navegador pueda mostrar la imagen en las tarjetas.