Comprobador de Open Graph

Mira la vista previa de tu enlace antes de que lo comparta nadie

Pega una URL y obtenemos la página, leemos sus meta tags Open Graph y Twitter Card, las validamos según las reglas de cada plataforma y te mostramos cómo la verán Facebook, X y LinkedIn. Las mismas etiquetas generan las vistas previas en Slack, Discord, WhatsApp, Telegram e iMessage, así que un solo arreglo las cubre todas. Si falta una etiqueta, tiene un tamaño incorrecto o apunta a una ruta relativa, lo verás aquí en lugar de descubrirlo cuando la publicación ya esté online. Gratis, sin registro y sin límite en el número de URL que compruebes. ¿Faltan etiquetas? Créalas con el generador de meta tags.

Vídeo tutorial (en inglés)

Aprende a comprobar las etiquetas Open Graph con el comprobador de Open Graph gratuito de Static.app.

Ver en YouTube

• Todas las etiquetas que lee un rastreador

  Obtenemos og:title, og:description, og:image, og:url, og:type, og:site_name y toda la familia twitter:*, además del <title> normal, la meta descripción y el enlace canónico a los que recurren las redes cuando faltan las etiquetas sociales.

• Tres vistas previas, una sola petición

  Facebook, X y LinkedIn construyen cada una la tarjeta de forma distinta. X alterna entre una miniatura cuadrada pequeña y un banner a todo el ancho según twitter:card; LinkedIn ignora por completo twitter:*. Mostramos las tres lado a lado para que veas cuál desentona.

• Lista de problemas en lenguaje claro

  En lugar de un volcado de etiquetas sin procesar, obtienes una lista de comprobación: imagen que falta, ruta de imagen relativa, descripción demasiado larga, sin og:url, tipo de tarjeta que no coincide con la imagen que has indicado. El rojo significa que la vista previa se romperá a la vista; el ámbar, que funcionará pero se verá peor de lo que podría.

Cómo comprobar tus etiquetas Open Graph

• 1

  Pega la URL completa de la página que vas a compartir, incluido el https:// y cualquier cadena de consulta que cambie el contenido.

• 2

  Pulsa "Comprobar etiquetas". Seguimos las redirecciones, validamos las etiquetas OG en el head del HTML de la página final e informamos del código de estado al que hemos llegado.

• 3

  Corrige lo que señale la lista de problemas, vuelve a publicar y repite la comprobación. Si Facebook sigue mostrando la tarjeta antigua, vuelve a analizar la URL en el Sharing Debugger para borrar su caché.

Por qué se rompen las vistas previas de los enlaces y cómo evitarlo

• Acierta con el tamaño de la imagen OG

  Usa una imagen OG de 1200 × 630 px (1,91:1): llena la tarjeta grande de Facebook, X y LinkedIn sin recortes. Que pese menos de 5 MB, así cumples el límite de todas las redes (X llega a 5 MB y Facebook admite hasta 8). Mantén el lado más corto por encima de 200 px y usa JPG o PNG. Todo lo que sea menor de 600 × 315 pasa a miniatura pequeña, y los GIF animados se muestran como una imagen fija.

• Usa siempre URL absolutas

  La causa más habitual de una tarjeta en blanco es <meta property="og:image" content="/img/cover.png">. Los rastreadores no resuelven las rutas relativas como un navegador: el valor debe empezar por https:// y apuntar a un archivo accesible públicamente, sin inicio de sesión, sin cookie y sin comprobación de referer anti-hotlink.

• Borra la caché del rastreador

  Facebook guarda en caché la tarjeta de una URL unos 30 días, así que corregir las etiquetas no actualiza un enlace ya compartido. Pasa la URL por el Sharing Debugger y pulsa "Volver a extraer" (Scrape Again); LinkedIn tiene un Post Inspector que hace lo mismo. Como último recurso, añade un parámetro de consulta inofensivo, como ?v=2, para forzar una descarga nueva.