Todas las herramientas

Comprobador de Open Graph y vistas previas de enlaces

Escriba una URL y vea la tarjeta que se dibuja cuando alguien la comparte, junto a todas las etiquetas encontradas y todo lo que falla en ellas.

Pegue cualquier página pública. Si omite el esquema, daremos por hecho https.

Pegue una URL pública. Solicitamos la página desde nuestro servidor, leemos sus etiquetas Open Graph, Twitter card y meta estándar, y dibujamos la tarjeta que construye cada plataforma con ellas.

Nuestro servidor solicita la página que indique. La imagen de la vista previa la carga su navegador directamente desde el sitio comprobado, así que ninguna imagen pasa por nosotros.

Con qué se construye una vista previa de enlace

Una vista previa de enlace se construye con etiquetas meta del head de la página. Facebook escribió el protocolo Open Graph y todo lo demás lo adoptó, así que og:title, og:description, og:image y og:url hacen casi todo el trabajo. X lee las mismas etiquetas y añade las suyas: twitter:card decide si la imagen ocupa todo el ancho o queda como miniatura, y twitter:title, twitter:description y twitter:image sustituyen a las de Open Graph cuando están puestas. Lo que una página omite recurre a otra cosa, primero al otro espacio de nombres y luego al elemento title y a la meta descripción, y por eso incluso una página sin ninguna etiqueta acaba teniendo tarjeta.

Por qué una vista previa sigue mal después de corregirla

Las plataformas guardan en caché lo que leen. Facebook, LinkedIn y X mantienen cada una su propia copia de una página ya rastreada, a menudo durante días, así que una tarjeta que estaba mal la primera vez que se compartió sigue mal mucho después de corregir las etiquetas. Cada una tiene un depurador que vuelve a leer cuando se lo pide, y esa es la única forma de vaciar una copia. Esta página nunca guarda caché, así que si aquí las etiquetas se leen bien y la tarjeta sigue mal fuera, es una copia en caché y no su marcado.

Preguntas sobre las vistas previas de enlaces

Desde nuestro servidor. Un navegador no puede leer las etiquetas de una página de otro dominio, así que la solicitud tiene que hacerse en el servidor. Solo la imagen de la vista previa la carga su navegador, directamente desde el sitio que se comprueba.

Cada plataforma guarda su propia copia de lo que leyó, y casi todas la conservan durante días. Facebook tiene un depurador de contenido que vuelve a leer una URL cuando se lo pide, LinkedIn tiene un inspector de publicaciones y X vuelve a leer cuando su rastreador pasa de nuevo. Esta página no guarda nada en caché, así que es la forma más rápida de confirmar que las etiquetas están bien antes de ir a vaciar la copia de otro.

No. X recurre a las etiquetas og: para el título, la descripción y la imagen cuando faltan las twitter:. La única que merece la pena poner es twitter:card, porque es la que pide el diseño de imagen grande en lugar del pequeño.

1200 por 630 píxeles es la respuesta segura, porque llena el marco de 1,91 a 1 que dibuja cada plataforma. Una imagen cuadrada sirve para una tarjeta pequeña de X. Aquí no comprobamos dimensiones, porque eso significaría descargar la imagen, y esta herramienta nunca lo hace.

Ver la página como la vio quien informó del fallo

Session Replay guarda la página, la consola y las llamadas de red junto al informe de error, así que quien lo mire después ya tiene delante todo lo que hacía falta.