Añade las etiquetas core de Open Graph

Q: ¿Y si mi página ya tiene ` ` y meta description?

Los buscadores leen y . Las plataformas sociales leen og:title y og:description. Son campos separados con intenciones distintas (snippets de búsqueda vs. previsualizaciones para compartir), así que duplícalos en vez de saltarte las versiones OG.

Qué comprueba esta auditoría

Recorre el <head> de la página en busca de cuatro etiquetas meta: og:title, og:description, og:image y og:url. Son las propiedades mínimas de Open Graph que lee toda plataforma social, de mensajería o chat importante cuando alguien pega tu enlace.

Por qué importa

Cuando faltan las etiquetas, la vista previa del enlace en Facebook, LinkedIn, X, Slack, Discord, iMessage, WhatsApp y Telegram cae a una URL desnuda con, como mucho, un title raspado de la página: sin imagen de previsualización ni descripción. La tasa de clic en una tarjeta sin previsualización es una fracción de la de una tarjeta con una imagen 1200×630.

Open Graph también es el dato que usa Google para el panel “Acerca de este resultado” y para las tarjetas de cita en búsqueda con IA. Una página sin etiquetas OG aparece como un enlace pelado mientras los competidores aparecen como tarjetas completas.

Cómo solucionarlo

Pon las cuatro etiquetas en el <head> de cada página pública. Los valores pueden reflejar tu <title> y meta description, pero conviene ajustarlos para lo social: un punto más atractivos para hacer clic, con una imagen elegida a mano.

<head>
  <meta property="og:title" content="Auditoría SEO gratis en 60 segundos — MetricSpot">
  <meta property="og:description" content="Mira lo que los agentes de IA y Google ven en tu sitio. 91 comprobaciones, sin registro.">
  <meta property="og:image" content="https://metricspot.com/og/home.png">
  <meta property="og:url" content="https://metricspot.com/">
  <meta property="og:type" content="website">
</head>

Astro / Next.js — genera los valores por página desde el frontmatter:

---
const { title, description, ogImage } = Astro.props;
const url = Astro.url.href;
---
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(ogImage, Astro.site).href} />
<meta property="og:url" content={url} />

WordPress — Yoast SEO, Rank Math y SEOPress emiten estas etiquetas automáticamente. Abre cualquiera de ellos, configura los valores por defecto en SEO → Social y sobreescribe por entrada cuando haga falta.

Reglas de la imagen. PNG o JPG, ≥1200×630 (1.91:1), menos de 5 MB. Consulta la página específica de Imagen Open Graph para detalles de tamaño y formato.

Pruébalo antes de publicar — pega la URL en el Sharing Debugger de Facebook y en el Post Inspector de LinkedIn, y pulsa “Scrape Again” para invalidar la caché.

Preguntas frecuentes

¿Necesito tanto Open Graph como las etiquetas Twitter Card?

X (anteriormente Twitter) cae a Open Graph si no hay etiquetas twitter:, así que OG por sí solo cubre casi toda la superficie. Añade las Twitter Card solo si quieres una imagen o resumen distintos en X — consulta Etiquetas Twitter Card.

¿Y si mi página ya tiene `<title>` y meta description?

Los buscadores leen <title> y <meta name="description">. Las plataformas sociales leen og:title y og:description. Son campos separados con intenciones distintas (snippets de búsqueda vs. previsualizaciones para compartir), así que duplícalos en vez de saltarte las versiones OG.

¿Por qué mi previsualización sigue saliendo mal después de añadir las etiquetas?

Facebook, LinkedIn y Slack cachean las previsualizaciones de forma agresiva, a veces durante semanas. Pasa la URL por el depurador de la plataforma y pulsa el botón “Re-scrape”. Tus cambios no aparecerán hasta que se invalide la caché.