Verificador de Open Graph

Siguiente

Pega el HTML de tu página (basta con el <head>) y este verificador analiza cada etiqueta meta og: y twitter: que encuentra, y después indica cuáles de las seis etiquetas esenciales están, cuáles faltan y el valor exacto de cada una. Como lee el marcado que pegas en lugar de solicitar una URL en vivo, también funciona en servidores de staging, localhost y páginas tras un inicio de sesión, adonde ningún rastreador en línea puede llegar.

Cómo lee el verificador tus etiquetas

  1. 1

    Abre el código fuente de la página

    Pulsa Ctrl+U (Cmd+Option+U en macOS) para ver el HTML en crudo que reciben realmente los rastreadores sociales.

  2. 2

    Copia la sección head

    Selecciona desde `<head>` hasta `</head>`. El body no hace falta, aunque pegar la página entera no causa ningún problema.

  3. 3

    Pégalo en el verificador

    Cada etiqueta `<meta>` se analiza mientras escribes. No se solicita ninguna URL: solo se examina el marcado que pegas.

  4. 4

    Lee la lista de comprobación

    Seis comprobaciones se ponen en verde o en rojo: og:title, og:description, og:type, og:url, og:image y twitter:card.

  5. 5

    Revisa los valores encontrados

    Cada etiqueta og: y twitter: aparece con su contenido, de modo que las erratas, los valores vacíos y las rutas de imagen relativas saltan a la vista.

Las etiquetas Open Graph que busca el verificador

Etiqueta Función ¿En la lista de comprobación?
og:title Titular de la tarjeta Sí, obligatoria
og:description Subtítulo de la tarjeta Sí, obligatoria
og:type website, article, video, etc. Sí, obligatoria
og:url URL canónica Sí, obligatoria
og:image URL de la imagen de vista previa Sí, obligatoria
og:site_name Línea de marca sobre el titular Se muestra si está presente
og:locale es_ES, en_US, etc. Se muestra si está presente

Cualquier otra etiqueta og: de tu marcado también aparece, aunque no forme parte de la lista de comprobación.

Etiquetas Twitter Card

X (Twitter) recurre a Open Graph cuando faltan sus propias etiquetas, así que solo twitter:card está en la lista de comprobación. El resto se muestra siempre que el verificador las encuentra.

Etiqueta Función
twitter:card summary, summary_large_image, etc.
twitter:site @cuenta que publica
twitter:creator @cuenta del autor
twitter:title Sustituye a og:title
twitter:description Sustituye a og:description
twitter:image Sustituye a og:image

Especificación de imagen que funciona en todas partes

El verificador confirma que og:image está declarada, pero nunca descarga el archivo, así que comprueba estos puntos a mano:

  • Dimensiones: 1200 x 630 px (Facebook, LinkedIn, tarjetas grandes de Twitter).
  • Relación de aspecto: 1.91:1 para summary_large_image.
  • Tamaño del archivo: menos de 5 MB, idealmente menos de 1 MB para que el rastreador no agote el tiempo de espera.
  • Formato: JPG o PNG. WebP y AVIF todavía tienen soporte irregular.
  • URL absoluta: siempre la dirección completa https://..., nunca una ruta relativa al protocolo ni a la raíz.

Problemas habituales que revela el informe

  • Sin og:image. El fallo más común con diferencia. Sin imagen, la tarjeta degenera en un enlace azul sin estilo.
  • Una etiqueta presente pero vacía. El verificador imprime cada valor, así que un og:title sin nada detrás se detecta fácilmente.
  • Ruta de imagen relativa. og:image debe ser una URL absoluta; una ruta como /img/card.jpg rompe el rastreo.
  • Discrepancia en og:url. Cuando og:url difiere de la canónica real, las plataformas pueden negarse a rastrear la página.
  • Etiquetas inyectadas por JavaScript. Nunca aparecen en el view-source, así que tampoco aparecen aquí, y la mayoría de los rastreadores no las verán.
  • Una tarjeta obsoleta en Facebook. No es un problema de marcado: Facebook cachea sus rastreos. Fuerza una actualización desde su Sharing Debugger.

Preguntas frecuentes

Porque pegar el marcado muestra exactamente lo que ve un rastreador social en la respuesta en crudo, y funciona en páginas a las que ningún rastreador puede llegar: servidores de staging, localhost, intranets y todo lo que esté tras un inicio de sesión. Abre tu página, pulsa Ctrl+U, copia el código fuente y pégalo aquí.

No estrictamente. X recurre a las etiquetas Open Graph cuando faltan las twitter:, por eso solo twitter:card está en la lista de comprobación. Añade el resto solo cuando quieras un título, una descripción o una imagen distintos en X que en el resto de plataformas.

El inspector muestra el DOM después de que se ejecute JavaScript, mientras que los rastreadores sociales leen la respuesta HTML en crudo. Usa el view-source (Ctrl+U), no el inspector, y pega eso. Si la etiqueta solo existe en el DOM, añade renderizado del lado del servidor o un servicio de prerender para que los rastreadores la vean.

1200 x 630 px, JPG o PNG. Es el tamaño recomendado para las tarjetas grandes de Facebook y LinkedIn, lo acepta X y escala de forma limpia en Slack, Discord y otras apps que despliegan enlaces. El verificador confirma que og:image está declarada, pero no abre el archivo, así que comprueba tú mismo las dimensiones.

Facebook cachea los resultados del rastreo hasta 30 días. Pega la URL en el Sharing Debugger de developers.facebook.com/tools/debug y vuelve a rastrearla para invalidar la caché.

Herramientas relacionadas

Herramienta disponible en otros idiomas