Validador de OGP y meta etiquetas
Pega tu HTML para validar las meta etiquetas de Open Graph (OGP) y Twitter Card. Detecta etiquetas faltantes y og:image inválidas, con vista previa de la tarjeta.
Examinar las meta etiquetas que deciden el aspecto de un enlace compartido
El título, la descripción y la imagen que aparecen al publicar un enlace en una red social los deciden las meta etiquetas de Open Graph y de Twitter Card escritas en el `
` de la página. Esta herramienta las extrae del HTML que usted pega, señala las etiquetas ausentes y los valores defectuosos, y previsualiza el resultado en algo muy próximo a la tarjeta tal como aparecerá.**El fallo más común con diferencia es escribir `og:image` como ruta relativa.** Los rastreadores recogen la imagen desde sus propios servidores, de modo que una ruta como `/img/ogp.png` no puede resolverse y **la tarjeta llega con la imagen ausente.** Escríbala siempre como URL absoluta que empiece por `https://`. **Lo otro que conviene saber es que estos servicios guardan en caché lo que rastrean.** Corregir una etiqueta puede dejar a la vista el contenido antiguo, y entonces hay que solicitar un nuevo rastreo mediante la herramienta de depuración de cada servicio. Advierta además que una Twitter Card recurre a las etiquetas `og:` allí donde no exista una `twitter:`, así que no hace falta escribir ambas.
Cómo se usa
- Pegue el código HTML Basta con el contenido de ``, o la página entera si le resulta más cómodo.
- Pruebe antes con los ejemplos Se ofrecen un ejemplo bueno y uno malo, de modo que puede ver en qué difieren los dictámenes antes de empezar.
- Lea los puntos señalados **Se indican las etiquetas ausentes y todo `og:image` que no sea una URL absoluta.**
- Compruebe el aspecto en la vista previa Puede ver cómo se pliega el título y dónde se corta la descripción antes de publicar nada.
Consejos para aprovecharla mejor
- El tamaño recomendado para og:image es 1200×630px (relación de aspecto 1.91:1). Las imágenes demasiado pequeñas o con una relación incorrecta pueden recortarse de forma inesperada en las redes sociales.
- Los rastreadores de Facebook, LINE y Slack leen og:title/og:description, mientras que X (Twitter) usa sus propias twitter:title/twitter:description. Configurar ambas asegura una vista previa correcta en todas las plataformas.
- Si falta twitter:card, X intentará recurrir a og:title/og:description, pero la imagen puede no mostrarse correctamente, por lo que es mejor establecerlo explícitamente.
- Define og:url con la URL canónica y absoluta (https://) de la página. Esto también ayuda a evitar confusiones de contenido duplicado causadas por URLs con parámetros de seguimiento.
- Justo después de cambiar tus meta etiquetas, las redes sociales pueden seguir mostrando una vista previa desactualizada en caché. Usa la herramienta de recrawl de cada plataforma (por ejemplo, el Depurador de Facebook) para actualizar la caché.
Cuándo resulta útil
Revisar un artículo antes de publicarlo
**Si el enlace se ve roto una vez fuera, la caché hace que corregirlo no arregle las cosas.** Mirar antes es el camino más seguro.
Verificar lo que produce una plantilla
Pegue el `
` que emitió su gestor de contenidos y confirme que las etiquetas previstas están ahí.Revisar un cambio de imagen
**Que un nuevo `og:image` sea una URL absoluta es justo la clase de detalle que pasa inadvertido.**
Tomar ejemplo de otros sitios
Pegue el código de una página que se muestre bien y vea qué etiquetas se ha molestado en poner.
Términos de Open Graph
- Og:title
- El encabezado que aparece en la tarjeta. **Puede diferir de `
`, lo que le permite redactarlo más breve para las redes.** - Og:description
- El texto descriptivo de la tarjeta. Se corta si es demasiado largo, así que ponga delante lo sustancial.
- Og:image
- La imagen de la tarjeta. **Indíquela siempre como URL absoluta.** Alrededor de 1200 por 630 píxeles es un tamaño cómodo.
- Og:type
- La clase de página. `article` es lo habitual para un texto y `website` para cualquier otra cosa.
- Twitter:card
- La forma de la tarjeta. Poner `summary_large_image` muestra la imagen a todo ancho.
- Og:url
- La URL canónica de la página. **Es donde se consolidan las veces que se comparte, así que cuide de no escribir una URL con parámetros de consulta.**
Preguntas frecuentes
/img/a.png). La mayoría de los rastreadores no pueden resolver URLs relativas, así que usa siempre una URL absoluta que empiece por https://. También puede fallar si tu servidor bloquea el User-Agent del rastreador, o si la imagen es demasiado pequeña.<title> se usa para el título en los resultados de búsqueda y la pestaña del navegador, mientras que og:title se usa para el título de la tarjeta al compartirse en redes sociales. Muchos rastreadores recurren a <title> si falta og:title, pero el resultado puede no coincidir con lo que pretendías.summary_large_image, ya que muestra una imagen grande. Si basta con una miniatura pequeña, usa summary. app y player están pensados para avisos de instalación de apps y para vídeo/audio incrustado respectivamente, y no son opciones habituales para una página web normal.<title> y meta description para generar una vista previa, pero no se mostrará ninguna imagen, resultando en una vista previa sencilla de enlace y texto. Como esto afecta a la tasa de clics, es recomendable configurar al menos og:title, og:description y og:image.
A propósito — Por qué existe OGP — Facebook lo creó para que funcionara el botón "Me gusta"
El Open Graph Protocol (OGP) fue creado por Facebook en 2010 para ayudar a popularizar su botón "Me gusta". En aquella época, compartir una página web en Facebook apenas mostraba un enlace desnudo y un título, y las tasas de clics se resentían. La solución de Facebook fue permitir que la propia página declarara cómo debía verse al compartirse, añadiendo un nuevo espacio de nombres <meta property="og:xxx"> al HTML normal.
Curiosamente, OGP está construido sobre RDFa, una especificación del W3C para incrustar datos estructurados en HTML. Al reutilizar un estándar ya existente, Facebook pudo lanzar la nueva función sin necesitar la colaboración de los fabricantes de navegadores ni de otras empresas, solo unas pocas meta etiquetas añadidas a las páginas existentes. Ese enfoque de "extender sin romper la compatibilidad hacia atrás" funcionó, y OGP se convirtió en un estándar de facto adoptado mucho más allá de Facebook, en plataformas como Slack, LINE y Discord.
Twitter nunca adoptó OGP directamente; en su lugar creó su propio espacio de nombres, Twitter Cards (twitter:xxx). Esto fue, posiblemente, tanto una decisión competitiva como técnica: no querer adoptar sin más una especificación originada por su rival Facebook. Como resultado, la mayoría de los sitios todavía necesitan duplicar tanto las etiquetas og: como las twitter:, lo cual es una razón por la que herramientas como este validador siguen siendo útiles.