ℹ Info Twitter

La Twitter Card es "summary" — Considera usar "summary_large_image"

Usar "summary_large_image" muestra una imagen más grande en X/Twitter para mayor interacción.

¿Cuál es el problema?

Tu página tiene una imagen disponible pero usa el tipo de tarjeta summary en X/Twitter. La tarjeta summary muestra una pequeña miniatura cuadrada (144x144px) junto al texto, mientras que summary_large_image muestra una imagen grande sobre el texto — lo que genera significativamente más interacción.

Comparación visual

Tarjeta summary

Imagen cuadrada pequeña a la izquierda
Título y descripción a la derecha
Diseño compacto, centrado en el texto

Tarjeta summary_large_image

Imagen grande que abarca todo el ancho
Título y descripción debajo
Diseño visual que destaca en el feed

¿Por qué cambiar a summary_large_image?

40% más clics en promedio comparado con las tarjetas summary
Más espacio visual en la línea de tiempo — tu enlace destaca más
Mejor para contenido con imágenes — Si tienes una imagen OG, muéstrala en grande
Mayor interacción — Los usuarios se sienten naturalmente atraídos por las imágenes grandes

Cómo solucionarlo

<!-- Antes -->
<meta name="twitter:card" content="summary" />

<!-- Después -->
<meta name="twitter:card" content="summary_large_image" />

Cuándo mantener “summary”

Hay razones válidas para usar la tarjeta más pequeña:

Sin imagen significativa — Tu imagen es un logotipo o un gráfico genérico
Contenido centrado en texto — La descripción es más importante que lo visual
Páginas de perfil — Una miniatura pequeña tipo avatar es más apropiada

Requisitos de imagen para summary_large_image

Recomendado: 1200 x 600px (proporción 2:1)
Mínimo: 300 x 157px
Tamaño máximo de archivo: 5 MB
Formatos: JPG, PNG, WebP, GIF

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"