⚠ Advertencia Open Graph

og:description es idéntica a og:title — Una oportunidad desaprovechada

La og:description debería complementar al título, no duplicarlo.

¿Cuál es el problema?

Tu og:description es exactamente igual que tu og:title. Esto desperdicia el espacio de la descripción y no aporta información adicional a los usuarios que deciden si hacer clic en tu enlace.

Por qué es importante

Cuando tu enlace se comparte en redes sociales, el título y la descripción se muestran juntos. Si son idénticos:

Los usuarios no obtienen información adicional para decidir si hacer clic
Se ve poco profesional y autogenerado
Pierdes la oportunidad de ampliar el título con más detalles
Algunas plataformas pueden ocultar la descripción duplicada por completo

Cómo solucionarlo

El título y la descripción cumplen funciones diferentes:

Título → ¿Qué es esto? (titular breve y llamativo)
Descripción → ¿Por qué debería hacer clic? (detalles ampliados, propuesta de valor)

<!-- Mal: idénticos -->
<meta property="og:title" content="Learn Web Development" />
<meta property="og:description" content="Learn Web Development" />

<!-- Bien: complementarios -->
<meta property="og:title" content="Learn Web Development" />
<meta property="og:description" content="Free tutorials covering HTML, CSS, JavaScript, React, and Node.js. From beginner to advanced with hands-on projects." />

Buenas prácticas

Título = titular — Mantenlo breve y llamativo (50-60 caracteres)
Descripción = elevator pitch — Amplía con detalles, beneficios y datos concretos (110-160 caracteres)
No repitas — Cada palabra en la descripción debe aportar información nueva
Que se complementen — El título indica el tema; la descripción explica el valor

Verifica tus etiquetas Open Graph

Artículos relacionados

og:image rota

La URL de og:image no devuelve una imagen válida. Las plataformas sociales mostrarán una vista previa rota o vacía.

La URL canónica difiere de la URL de la página

La URL canónica apunta a una URL diferente a la de la página actual.

El charset no es la primera etiqueta meta

La declaración de charset debería ser el primer elemento dentro de <head>.

og:description podría ser más larga

Tienes espacio para una descripción más detallada que aumente la interacción.

og:description contiene una URL

La og:description debería ser un resumen legible, no una URL.

Keyword stuffing en og:description

Repetir las mismas palabras excesivamente en la descripción se percibe como spam.

Servidor MCP de OpenGraph

Inspecciona tags OG directamente desde tu editor

El servidor MCP de OpenGraph te permite inspeccionar y analizar meta tags Open Graph directamente desde tu editor con IA o asistente. Proporciona dos herramientas:

inspect_og — Obtener y puntuar tags OG de cualquier URL
suggest_og_tags — Generar HTML de meta tags recomendados

Agrega el servidor al archivo .cursor/mcp.json de tu proyecto:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Reinicia Cursor después de agregar la configuración.

Agrega a tu archivo .vscode/mcp.json (requiere extensión GitHub Copilot):

{
  "servers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Asegúrate de tener GitHub Copilot con soporte MCP habilitado.

Agrega a tu archivo claude_desktop_config.json:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

El archivo de configuración está en ~/Library/Application Support/Claude/claude_desktop_config.json en macOS o %APPDATA%\Claude\claude_desktop_config.json en Windows.

Agrega a tu archivo ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "opengraph": {
      "command": "npx",
      "args": ["-y", "opengraph-mcp"]
    }
  }
}

Reinicia Windsurf después de modificar la configuración.

Agrega a tu settings.json de Zed bajo context_servers:

{
  "context_servers": {
    "opengraph": {
      "command": {
        "path": "npx",
        "args": ["-y", "opengraph-mcp"]
      }
    }
  }
}

Abre ajustes con Cmd+, y agrega la configuración.

Ejemplos de uso

▶ "Inspecciona los tags OG de github.com"

▶ "Sugiere meta tags OG para mi sitio web https://example.com"

▶ "Verifica si mi blog tiene etiquetas Open Graph correctas"