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.
Consejos
- 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é.
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.