Análisis de Open Graph

Cómo funciona esta comprobación

Scanaris busca en el <head> de tu página tres etiquetas Open Graph: og:title, og:description y og:image. Si están las tres con contenido, no hay nada que decir. Si falta alguna, abre un hallazgo informativo que indica cuáles; si faltan las tres, el hallazgo dice directamente que la página no tiene Open Graph. Es informativo, así que no resta puntos: no es un fallo de seguridad ni de indexación, es una oportunidad perdida cada vez que alguien comparte tu web.

Por qué importa

Cuando alguien pega tu enlace en WhatsApp, X, LinkedIn, Slack, Discord, iMessage o Telegram, la aplicación visita la URL, lee estas etiquetas y construye la tarjeta de previsualización: imagen grande, título y descripción. Sin ellas, la tarjeta sale sin imagen, con la URL cruda o con un trozo de texto cualquiera de la página. La diferencia en clics entre un enlace con tarjeta y uno sin ella es grande, sobre todo en móvil, donde la tarjeta ocupa toda la pantalla. Y la imagen que elijas es, para mucha gente, la primera impresión de tu marca.

Cómo arreglarlo

<meta property="og:title" content="Escáner de seguridad para apps hechas con IA">
<meta property="og:description" content="Analiza tu web en 60 segundos y recibe los fallos con su solución.">
<meta property="og:image" content="https://tudominio.com/og/home.png">
<meta property="og:url" content="https://tudominio.com/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

• La imagen va en URL absoluta y en HTTPS, de 1200 por 630 píxeles, en JPG o PNG y por debajo de 1 MB para que todas las plataformas la acepten. Un fondo de marca, el título de la página en grande y el logotipo es la fórmula que funciona.
• Una por página, no la misma en todas. Un artículo con su titular en la imagen se comparte más que uno con la imagen genérica del sitio. Nuxt tiene un módulo para generar estas imágenes a partir de una plantilla; Next.js lo hace con un archivo opengraph-image.tsx en cada ruta.
• Nuxt: useSeoMeta({ ogTitle, ogDescription, ogImage, twitterCard: 'summary_large_image' }). Next.js: metadata.openGraph y metadata.twitter. WordPress: Yoast y Rank Math las generan por entrada con la imagen destacada.
• twitter:card es la única etiqueta propia que X necesita; para título, descripción e imagen usa las og: si no encuentra las suyas.

Las plataformas cachean la tarjeta la primera vez que ven una URL. Después de cambiar las etiquetas, pide un nuevo rastreo en el depurador de compartir de Facebook, el inspector de publicaciones de LinkedIn o el validador de X; WhatsApp y Telegram la renuevan solas pasado un tiempo.

Comprueba que está arreglado

curl -s https://tudominio.com | grep -oE '<meta (property|name)="(og:|twitter:)[^"]+" content="[^"]*"'
curl -s -o /dev/null -w "%{http_code} %{content_type}\n" "$(curl -s https://tudominio.com | grep -oE 'og:image" content="[^"]+"' | cut -d'"' -f3)"

La primera lista las etiquetas; la segunda descarga la imagen y debe dar 200 con tipo de imagen. Después pega la URL en un chat contigo mismo y mira la tarjeta.

Preguntas frecuentes

Ya tengo título y meta description. ¿No sirven?

Algunas plataformas los usan como respaldo, pero ninguna muestra imagen sin og:image, y la imagen es lo que da el salto en clics. Las og: además te dejan poner un título distinto al de Google, más corto y más directo.

¿Cuenta para el SEO?

No directamente: Google no usa Open Graph para el ranking. Cuenta para que la gente comparta y haga clic, que acaba en enlaces y tráfico. Lo que sí lee Google lo revisa metadatos SEO.

Mi imagen se ve cortada en algunas aplicaciones.

Cada plataforma recorta a su proporción. Con 1200 por 630 y el contenido importante centrado, con margen en los bordes, sale bien en todas. Evita texto pequeño pegado a las esquinas.