Falta og:description — Por qué cada página necesita una

¿Qué es og:description?

La meta etiqueta og:description proporciona un breve resumen del contenido de tu página. Cuando alguien comparte tu enlace en redes sociales, esta descripción aparece debajo del título, dando contexto a los usuarios sobre lo que encontrarán si hacen clic.

¿Por qué es fundamental?

Sin una og:description:

Facebook puede intentar extraer texto de tu página, obteniendo frecuentemente fragmentos aleatorios o irrelevantes
LinkedIn podría no mostrar ninguna descripción
Discord y Slack mostrarán un enlace desnudo o contenido no relacionado de la página
WhatsApp mostrará una previsualización mínima o vacía

La descripción es tu discurso de ascensor: es el segundo elemento más importante (después del título) para convencer a los usuarios de hacer clic en tu enlace.

Cómo se ve

❌ Sin og:description

example.com

Mi sitio web

Sin descripción disponible

✅ Con og:description

example.com

Mi sitio web

Aprende a optimizar tus etiquetas Open Graph para mejorar tu presencia en redes sociales.

Cómo solucionarlo

Añade la siguiente etiqueta dentro de tu <head>:

<meta property="og:description" content="Un resumen conciso y atractivo del contenido de tu página. Apunta a 110-160 caracteres." />

Buenas prácticas

Apunta a 110-160 caracteres — Lo suficientemente largo para ser informativo, lo suficientemente corto para evitar el truncamiento
Complementa el título — No lo repitas; amplíalo con detalles adicionales
Incluye una llamada a la acción — “Aprende a…”, “Descubre por qué…”, “Empieza con…”
Sé preciso — Las descripciones engañosas dañan la confianza y aumentan la tasa de rebote
Diferénciala de <meta name="description"> — La descripción OG puede ser más informal y adaptada a redes sociales

Ejemplos

Bueno:

<meta property="og:description" content="Aprende a implementar etiquetas Open Graph correctamente. Guía paso a paso con ejemplos para Next.js, Astro y WordPress." />

Malo:

<meta property="og:description" content="Bienvenido a nuestro sitio web." />

Implementación según el framework

Next.js (App Router):

export const metadata = {
  openGraph: {
    description: 'La descripción de tu página para compartir en redes sociales',
  },
}

Astro:

<meta property="og:description" content="La descripción de tu página para compartir en redes sociales" />