Cómo usar esta herramienta para desarrolladores
- Pega etiquetas meta Open Graph o el HTML completo del head.
- Pulsa Analizar Open Graph.
- Comprueba los valores extraídos y los avisos.
- Corrige las etiquetas en tu página y vuelve a probar.
Open Graph Preview
Pega el bloque
o un conjunto de etiquetas meta y obtén una lectura estructurada de Open Graph. La herramienta extrae og:title, og:description, og:image, og:url, og:type y site_name, muestra una previsualización textual y señala campos habituales que faltan o tienen valores dudosos. No descarga imágenes ni consulta la URL indicada.Datos de entrada
HTML o etiquetas metaEspacio publicitario
Qué hace esta herramienta para desarrolladores
Usa DOMParser para leer etiquetas meta y agrupa las propiedades que empiezan por og:. El resultado resume los campos principales y marca ausencias que suelen afectar a las tarjetas compartidas.
Se consideran campos clave og:title, og:description, og:image y og:url. También se comprueba que las URL de imagen y página puedan interpretarse como URL absolutas.
La vista previa es orientativa: cada plataforma puede recortar textos, cachear metadatos o aplicar requisitos propios.
Ejemplo
og:title: Guía de APIs
og:description: Referencia práctica para integrar una API.
og:image: https://example.com/cover.jpg
og:url: https://example.com/api-guide
Estado: 4/4 campos clave presentes
Casos de uso
- Revisar el head antes de publicar una landing page.
- Detectar og:image u og:url ausentes.
- Comprobar rápidamente valores generados por un CMS.
Consejos para obtener resultados fiables
- Usa URLs absolutas para og:image y og:url.
- Mantén título y descripción coherentes con el contenido visible.
- Verifica el tamaño real de la imagen con la documentación de la plataforma destino.
- Después de desplegar, usa el depurador oficial de la red social para forzar una nueva lectura.
Detalles del procesamiento
El HTML se analiza dentro del navegador con DOMParser. No se ejecutan scripts del contenido pegado ni se realizan solicitudes externas.
No puede comprobar si la imagen existe, su tamaño en bytes ni cómo renderizará exactamente una plataforma remota.
Preguntas frecuentes
¿Qué etiquetas Open Graph son las mínimas para una vista previa útil?
Normalmente conviene incluir og:title, og:description, og:image y og:url; og:type también ayuda a describir el recurso.
¿Por qué og:image debe usar una URL absoluta?
Los rastreadores sociales suelen necesitar una dirección completa para localizar la imagen sin depender de una URL base implícita.
¿Este visor descarga la imagen definida en og:image?
No. Solo valida la forma de la URL y muestra el valor textual; no hace solicitudes de red.
¿Puedo pegar el HTML completo de una página?
Sí. DOMParser buscará las etiquetas meta dentro del documento pegado, aunque el análisis se centra en propiedades og:.
¿La previsualización coincide exactamente con Facebook, LinkedIn o X?
No. Cada plataforma aplica su propio recorte, caché y reglas; el visor sirve para revisar metadatos antes de usar sus depuradores oficiales.
Herramientas relacionadas para desarrolladores
Módulos y salida
| Módulo | Qué muestra |
|---|---|
| Parser | DOMParser sobre HTML |
| Campos clave | title, description, image, url |
| Diagnóstico | Ausencias y URL inválidas |
| Salida | Resumen Open Graph |
Explorar la categoría
Consulta más utilidades de web, metadatos y archivos de servidor en el centro de categoría.
Ver Web, metadatos y archivos de servidor