ℹ Info Open Graph

Falta og:site_name — Reconocimiento de marca al compartir en redes sociales

La etiqueta og:site_name ayuda a las plataformas a identificar tu marca.

¿Qué es og:site_name?

La meta etiqueta og:site_name identifica el nombre de tu sitio web o marca como un todo, de forma independiente al título de la página individual. Ayuda a las plataformas sociales a atribuir tu contenido compartido a tu marca.

Cómo lo usan las plataformas

Facebook — Muestra el nombre del sitio encima del título en texto gris
Discord — Muestra el nombre del sitio como encabezado sobre el embed
Slack — Lo muestra de forma destacada en la parte superior del enlace desplegado
Otras — Pueden usarlo para branding y atribución

¿Por qué deberías añadirlo?

Reconocimiento de marca — Los usuarios ven el nombre de tu marca de forma consistente en todos los enlaces compartidos
Señal de confianza — Un nombre de marca reconocido aumenta la tasa de clics
Diferenciación — Distingue tu contenido de otras fuentes en el feed del usuario
Títulos más limpios — No necesitas incluir tu marca en og:title cuando og:site_name está configurado

Cómo solucionarlo

<meta property="og:site_name" content="Your Brand Name" />

Buenas prácticas

Usa el nombre de tu marca, no el dominio — “OpenGraph.to” es mejor que “opengraph.to”
Mantenlo consistente — Usa el mismo nombre de sitio en todas las páginas
Que sea corto — Solo el nombre de la marca, no un eslogan
Coincide con tu marca real — Usa el nombre que tu audiencia reconoce

Ejemplos

<!-- Correcto -->
<meta property="og:site_name" content="GitHub" />
<meta property="og:site_name" content="The New York Times" />
<meta property="og:site_name" content="OpenGraph.to" />

<!-- Incorrecto -->
<meta property="og:site_name" content="GitHub - Where the world builds software" />
<meta property="og:site_name" content="www.nytimes.com" />

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"