ℹ Info Open Graph

og:description ligeramente larga — Ajusta la longitud de tu descripción

Las descripciones entre 160 y 200 caracteres pueden cortarse en algunas plataformas.

¿Cuál es el problema?

Tu og:description tiene entre 160 y 200 caracteres. Aunque no es críticamente larga, algunas plataformas sociales empiezan a truncar la descripción alrededor de los 155-160 caracteres.

¿Qué plataformas truncan antes?

Plataforma	Límite aprox.	Riesgo con 160-200 caracteres
LinkedIn	~150 caracteres	Alto — se truncará
WhatsApp	~150 caracteres	Alto — se truncará
Slack	~150 caracteres	Alto — se truncará
Facebook	~200 caracteres	Bajo — generalmente seguro
Discord	~350 caracteres	Muy bajo

El punto ideal: 110-160 caracteres

Este rango asegura que tu descripción completa sea visible en todas las plataformas principales. Tienes espacio suficiente para escribir un resumen atractivo sin arriesgarte a que se corte.

Cómo solucionarlo

Recorta algunas palabras de tu descripción para dejarla por debajo de 160 caracteres:

<!-- Ligeramente larga (170 caracteres) -->
<meta property="og:description" content="Learn everything you need to know about implementing Open Graph tags for better social media previews. Step-by-step guide with code examples included." />

<!-- Mejor (menos de 160 caracteres) -->
<meta property="og:description" content="Learn how to implement Open Graph tags for better social previews. Step-by-step guide with code examples." />

Consejos para recortar

Elimina palabras de relleno — “todo lo que necesitas saber sobre” → “cómo”
Usa sinónimos más cortos — “implementar” → “añadir”, “exhaustivo” → “completo”
Quita frases redundantes — Si el título dice “Guía”, no lo repitas en la descripción
Prioriza la información clave — Coloca las palabras más importantes al inicio para que, incluso si se trunca, el mensaje sea claro

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"