Comprobador de Open Graph: prueba etiquetas OG y vistas previas
Introduce una URL para ver cómo se verá al compartirla en Facebook, X, LinkedIn y apps de chat. El comprobador lee cada etiqueta og:* y twitter:*, mide la imagen de vista previa y te dice exactamente qué corregir.
Vistas previas del enlace (aproximadas: cada plataforma aplica su propia maquetación, recorte y caché)
Comprobaciones
Imagen de vista previa
Etiquetas encontradas
| Campo | Valor |
|---|
Etiquetas sugeridas
Tus valores actuales, con marcadores donde falta algo. Pégalas en el <head> de la página y edita las líneas TODO.
Un comprobador de Open Graph muestra lo que ve un rastreador cuando alguien pega tu enlace en una publicación o en un chat: el título, la descripción y la imagen declarados en las metaetiquetas og:* ytwitter:* de tu página. Si una vista previa muestra la imagen equivocada, ninguna imagen, o el nombre de tu sitio en lugar del título del artículo, la causa casi siempre está en esas pocas líneas de HTML, y esta página te dice cuál.
Cómo comprobar tus etiquetas Open Graph
- Introduce la URL de la página que quieres compartir y pulsa Comprobar etiquetas. Se siguen las redirecciones y se analiza la URL final.
- Mira las vistas previas. Son aproximaciones de cómo Facebook, X, LinkedIn y las apps de chat maquetan una tarjeta de enlace, construidas con las etiquetas que lee cada una.
- Repasa las comprobaciones. Los errores rompen las vistas previas; las advertencias las empeoran en algunas plataformas; las notas son buenas prácticas. Cada una indica qué cambiar.
- Corrige y vuelve a comprobar. El cuadro Etiquetas sugeridas te da un bloque de etiquetas listo para editar con tus valores actuales ya rellenados.
- Actualiza las cachés de las plataformas tras publicar la corrección (ver más abajo), o los envíos antiguos seguirán con la vista previa antigua.
Para un sitio de pruebas, una página tras un inicio de sesión o cualquier cosa en localhost, cambia aPegar HTML: pega el código fuente de la página y se ejecutan las mismas comprobaciones en tu navegador.
Las etiquetas Open Graph que necesita toda página
Open Graph es el protocolo que hay detrás de la mayoría de vistas previas de enlaces. Marca cuatro propiedades como obligatorias en cada página (ogp.me), y LinkedIn enumera título, imagen, descripción y URL como las etiquetas que deben existir para sus vistas previas al compartir (Ayuda de LinkedIn).
| Etiqueta | Qué hace | Consejo |
|---|---|---|
og:title | El titular de la tarjeta. Obligatoria. | Escríbelo para un feed, no para el buscador: no necesita el nombre de tu marca. |
og:type | El tipo de objeto, por ejemplo website o article. Obligatoria. | Usa article para las entradas; así se habilitan las etiquetas article:*. |
og:image | La imagen de vista previa. Obligatoria. | Usa una URL https:// completa; define también ancho, alto y texto alternativo. |
og:url | La URL canónica del objeto, usada como su identificador permanente. Obligatoria. | Haz que coincida con tu <link rel="canonical">. |
og:description | Una o dos frases bajo el título. Opcional en el protocolo, obligatoria para LinkedIn. | Di qué se lleva quien lee, no qué es la página. |
og:site_name | El nombre del sitio en conjunto. | Se muestra encima del título en muchas apps de chat. |
og:image:alt | Una descripción de la imagen. El protocolo dice que una página que especifica og:image debería especificarla. | Describe la imagen, no la página. |
og:image:width / og:image:height | Tamaño de la imagen en píxeles. | Facebook indica que las especifiques para que la imagen cargue bien la primera vez que se comparte el enlace. |
og:locale | El idioma y la región del contenido, por ejemplo es_ES. | Facebook la recomienda junto con og:type. |
Si una etiqueta aparece dos veces, gana la primera: cuando los valores entran en conflicto, el protocolo da preferencia a la primera etiqueta de arriba abajo. Los duplicados suelen venir de un tema y un complemento de SEO que escriben etiquetas a la vez; el comprobador los señala.
Etiquetas de tarjeta de Twitter (X)
X lee sus propias etiquetas twitter:* y recurre a Open Graph para casi todas, según la referencia de marcado de tarjetas de X (documentación para desarrolladores de X, archivada, en inglés):
twitter:card: el tipo de tarjeta,summary(imagen pequeña cuadrada) osummary_large_image(imagen ancha). Si falta pero existenog:type,og:titleyog:description, puede mostrarse una tarjeta de resumen.twitter:title: máximo 70 caracteres; recurre aog:title.twitter:description: máximo 200 caracteres; recurre aog:description.twitter:image: menos de 5 MB; JPG, PNG, WEBP y GIF (solo el primer fotograma); SVG no se admite. Recurre aog:image.twitter:image:alt: hasta 420 caracteres; recurre aog:image:alt.
En la práctica, Open Graph más una línea, <meta name="twitter:card" content="summary_large_image">, cubre X.
Tamaño de og:image: qué pide cada plataforma
| Plataforma | Requisito documentado |
|---|---|
| Mínimo 1200 × 627 px, proporción recomendada 1,91:1, tamaño máximo de archivo 5 MB (Ayuda de LinkedIn) | |
Al menos 1080 px de ancho para la mejor visualización en dispositivos de alta resolución; especifica og:image:width y og:image:height (buenas prácticas de Meta para compartir) | |
| X: tarjeta de imagen grande | Proporción 2:1, mínimo 300 × 157, máximo 4096 × 4096 px, menos de 5 MB (documentación de X, archivada) |
| X: tarjeta de resumen | Proporción 1:1, mínimo 144 × 144, máximo 4096 × 4096 px, menos de 5 MB, recortada a un cuadrado (documentación de X, archivada) |
Una sola imagen puede satisfacerlas a todas: 1200 × 630 píxeles, PNG o JPEG, menos de 5 MB. Supera el mínimo de LinkedIn y la recomendación de ancho de Facebook, ronda la proporción 1,91:1, y X la recorta un poco para su tarjeta grande de 2:1. Mantén el texto y los logotipos lejos de los bordes para que el recorte no los corte. X también pide una imagen única por página en lugar de un logotipo genérico del sitio: una norma sensata en cualquier plataforma.
Por qué tu vista previa sale mal, y cómo arreglarlo
Sigue saliendo la imagen o el título antiguos
Las plataformas guardan las vistas previas en caché. Facebook guarda las imágenes por URL y no las actualiza si la URL no cambia (Meta for Developers), así que sube la imagen modificada con otro nombre de archivo y pasa la página por elDepurador de contenido compartido, que fuerza una lectura nueva. En LinkedIn, usaPost Inspector para actualizar la URL.
No sale ninguna imagen
Revisa la tabla Imagen de vista previa de arriba. Causas habituales: og:image es una ruta relativa, la imagen devuelve 403 o 404 a los rastreadores (protección contra enlaces directos, un directorio protegido, una regla de CDN), es un SVG o pesa más de 5 MB. LinkedIn señala que una imagen que cumple los requisitos aún puede fallar si el sitio impide que LinkedIn la descargue.
Las etiquetas existen en el navegador pero no aquí
Lo más probable es que las añada JavaScript después de cargar la página. Los rastreadores leen el HTML que envía el servidor, así que lleva las etiquetas a HTML generado en el servidor o precompilado. Las aplicaciones de una sola página suelen necesitar renderizado en servidor o prerrenderizado para las vistas previas al compartir.
Se previsualiza la página equivocada
Si la URL redirige, los rastreadores previsualizan la página final. El comprobador muestra el número de redirecciones; elcomprobador de redirecciones enumera cada salto. Asegúrate también de que og:url apunte a la propia página y no a tu página de inicio: un error muy habitual en las plantillas.
Open Graph frente a las metaetiquetas de SEO
El <title>, la metadescripción y el enlace canónico son para los buscadores; las etiquetas de Open Graph y de Twitter son para los envíos. Pueden diferir (un titular para compartir puede ser más directo que un título para el buscador), pero la URL canónica y og:url deben coincidir, y conviene conocer una directiva noindex de robots antes de promocionar una página. El comprobador informa de todo ello, incluida la cabecera HTTP X-Robots-Tag.
Qué hace el comprobador con tu URL
Nuestro servidor solicita la página una vez, sigue hasta ocho redirecciones, lee como máximo los primeros 600 KB (se detiene al final del <head>) y descarga la primera parte de hasta dos imágenes de vista previa para leer su tamaño y formato. Solo descarga direcciones http(s) públicas en puertos estándar y rechaza las IP privadas, locales y de metadatos de la nube, también cuando una redirección apunta allí. No se guarda nada. Las tarjetas de vista previa cargan después la imagen directamente en tu navegador. Si vas a compartir un enlace de campaña, créalo con elgenerador de UTM; si compartes el de otra persona, quítale antes el rastreo con ellimpiador de URLs.
Preguntas frecuentes
¿Qué hace un comprobador de Open Graph?
Descarga una página igual que un rastreador de vistas previas de enlaces, lee las etiquetas Open Graph (og:*) y de tarjeta de Twitter (twitter:*) del encabezado HTML y muestra qué aspecto tendrá un enlace compartido. Este además descarga la imagen de vista previa para comprobar su formato, sus píxeles y su peso, y enumera cada etiqueta que falta o no es válida junto con su solución.
¿Qué etiquetas de Open Graph son obligatorias?
El protocolo Open Graph nombra cuatro propiedades obligatorias: og:title, og:type, og:image y og:url. LinkedIn indica que og:title, og:image, og:description y og:url deben existir para sus vistas previas, así que en la práctica define las cinco, además de og:image:alt para la imagen.
¿Qué tamaño debe tener mi og:image?
No hay un tamaño oficial único. LinkedIn pide al menos 1200 × 627 píxeles con proporción 1,91:1 y menos de 5 MB. Facebook recomienda imágenes de al menos 1080 píxeles de ancho. La tarjeta de imagen grande de X usa proporción 2:1 con un mínimo de 300 × 157 y un límite de 5 MB. Un PNG o JPEG de 1200 × 630 y menos de 5 MB cumple todo eso.
¿Por qué Facebook o LinkedIn siguen mostrando mi vista previa antigua?
Las plataformas guardan en caché las vistas previas. Facebook guarda las imágenes por URL y no las actualiza hasta que cambia la URL, así que publica la imagen nueva con otro nombre de archivo y pasa la página por el Depurador de contenido compartido de Facebook para forzar una lectura nueva. El Post Inspector de LinkedIn hace lo mismo en LinkedIn.
¿Necesito etiquetas de tarjeta de Twitter si ya tengo etiquetas Open Graph?
X recurre a Open Graph para casi todos los campos: twitter:title recurre a og:title, twitter:description a og:description y twitter:image a og:image. Sin twitter:card, X aún puede mostrar una tarjeta de resumen pequeña a partir de og:type, og:title y og:description. Añade twitter:card con el valor summary_large_image si quieres el formato de imagen grande.
¿El comprobador ejecuta JavaScript?
No. Lee el HTML que devuelve el servidor, que es lo que leen también la mayoría de los rastreadores de vistas previas. Si tus etiquetas solo aparecen después de ejecutarse JavaScript en el cliente, aquí faltarán, y probablemente también en los envíos reales. Genéralas en el servidor o durante la compilación.
¿Puedo comprobar una página de pruebas o de localhost?
No por URL: por seguridad, el comprobador solo descarga direcciones públicas y bloquea las IP privadas, locales y de metadatos de la nube. Usa en su lugar la pestaña «Pegar HTML»: pega el código fuente de la página y se analiza por completo en tu navegador, con los tamaños de imagen medidos en local.
¿Las vistas previas son exactamente lo que mostrará cada plataforma?
No: son aproximaciones, construidas con las etiquetas que documenta cada plataforma. Cada red aplica su propia maquetación, recorte, truncado y caché, y los cambia con el tiempo. Usa las vistas previas para detectar imágenes que faltan y títulos mal puestos, y confirma después con el depurador de la propia plataforma antes de un gran lanzamiento.
