Validar Open Graph y Twitter Cards
Comprueba los meta tags sociales de una página y previsualiza su tarjeta.
¿Cómo sé qué verá la gente al compartir mi página en redes?
Se ve pegando el código fuente de la página (o su URL) en el comprobador de Open Graph y Twitter Cards de Docuboxer, que revisa al instante qué meta tags sociales tiene, cuáles faltan y cómo quedará la tarjeta al compartirla en Facebook, LinkedIn, WhatsApp o X. La herramienta busca las 13 etiquetas que leen estos servicios —title, meta description, canonical, og:* y twitter:*— y marca cada una como presente, recomendada ausente o crítica ausente, además de avisar de errores típicos: og:image con URL relativa, og:url que no coincide con el canonical o un twitter:card con valor inválido. También genera una vista previa de la tarjeta con imagen, dominio, título y descripción, tal como la vería quien reciba el enlace. Todo el análisis corre en tu navegador, sobre el HTML que pegas o descargas con fetch: no hay servidor intermedio ni se guarda nada. Gratis, sin registro, con cualquier página, publicada o no.
Cómo usar Validar Open Graph y Twitter Cards
- Abre la página que quieres comprobar, haz clic derecho y elige «Ver código fuente de la página» (o pulsa Ctrl+U en Windows/Linux, Cmd+Option+U en Mac).
- Copia todo el HTML (Ctrl/Cmd+A y luego Ctrl/Cmd+C) y pégalo en la pestaña «Pegar HTML» del comprobador; el análisis se ejecuta automáticamente al pegar.
- Revisa la tabla de resultados: cada etiqueta aparece con ✓ si está presente, ⚠ si falta una recomendada o ✗ si falta una crítica para compartir bien la página.
- Lee los avisos —imagen no absoluta, og:url distinto del canonical, twitter:card inválido, título o descripción demasiado largos— y corrígelos en tu código fuente.
- Compara la vista previa de la tarjeta con lo que esperas ver en redes y descarga el informe en .txt si necesitas compartirlo con tu equipo.
Casos de uso comunes
Antes de publicar una landing de campaña
Comprobar que el enlace que vas a pagar en ads o mandar por email va a mostrar la imagen y el titular correctos al compartirse, en vez de descubrirlo después con el presupuesto ya gastado.
Depurar por qué una imagen no aparece en WhatsApp o Slack
Detectar que og:image apunta a una ruta relativa (/img/social.png) en vez de una URL absoluta con https://, que es la causa más común de que la vista previa salga sin imagen.
Auditar meta tags heredados de un CMS o theme
Revisar plantillas de WordPress, Shopify o un CMS headless que generan Open Graph automáticamente pero a veces duplican etiquetas o dejan og:url apuntando a una versión antigua de la URL.
Validar un redirect o cambio de dominio
Confirmar que og:url y el canonical coinciden después de migrar a HTTPS o cambiar de dominio, para que las tarjetas compartidas antes de la migración sigan resolviendo bien.
Revisión previa a un lanzamiento de producto
Pasar cada página clave del sitio por el comprobador antes de un lanzamiento para asegurar que todas tienen title, description y og:image bien formados, sin depender de acordarte manualmente.
Preguntas frecuentes
¿Por qué no carga la imagen cuando pongo la URL directamente?
La mayoría de sitios bloquean con CORS que otra página lea su HTML por fetch desde el navegador; es un límite del estándar web, no de esta herramienta. Usa la pestaña «Pegar HTML»: abre la página, copia el código fuente completo y pégalo ahí, y el análisis funciona igual.
¿Qué diferencia hay entre og:image y twitter:image?
og:image la usan Facebook, LinkedIn, WhatsApp y la mayoría de plataformas que siguen el estándar Open Graph. twitter:image es específica de X/Twitter; si no la defines, X suele caer de vuelta a og:image, así que solo hace falta duplicarla si quieres una imagen distinta en X.
¿Es obligatorio tener twitter:card para que se vea bien en X?
No es obligatorio, pero sin ella X intenta inferir el tipo de tarjeta a partir de las etiquetas Open Graph disponibles, con resultados menos predecibles. Declarar summary_large_image explícitamente da control total sobre el tamaño de la imagen.
¿Por qué og:url tiene que coincidir con el canonical?
Si no coinciden, distintas plataformas pueden acabar consolidando las señales de compartición (likes, shares) en URLs diferentes de la misma página, diluyendo el efecto. Mantenerlas iguales evita esa fragmentación.
¿El comprobador guarda o envía a algún sitio el HTML que pego?
No. El análisis se ejecuta enteramente en tu navegador con DOMParser; el HTML pegado nunca sale de tu equipo ni pasa por ningún servidor de Docuboxer.
¿Qué pasa si una etiqueta aparece duplicada en el HTML?
El comprobador toma la primera ocurrencia en orden de documento, igual que hacen los crawlers reales de Facebook y Twitter, así que si tienes og:title repetido dos veces sabrás cuál es el que realmente se usa.