ℹ Info Twitter

Twitter Card Is "summary" — Consider Using "summary_large_image"

Using "summary_large_image" displays a larger image on X/Twitter for more engagement.

What's the issue?

Your page has an image available but uses the summary card type on X/Twitter. The summary card shows a small square thumbnail (144x144px) next to the text, while summary_large_image displays a large image above the text — which gets significantly more engagement.

Visual comparison

summary card

Small square image on the left
Title and description on the right
Compact, text-focused layout

summary_large_image card

Large image spanning the full width
Title and description below
Visual-first layout that dominates the feed

Why switch to summary_large_image?

40% more clicks on average compared to summary cards
More visual real estate in the timeline — your link stands out
Better for content with images — If you have an OG image, show it off
Higher engagement — Users are naturally drawn to large images

How to fix it

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

<!-- After -->
<meta name="twitter:card" content="summary_large_image" />

When to keep "summary"

There are valid reasons to use the smaller card:

No meaningful image — Your image is a logo or generic graphic
Text-focused content — The description is more important than the visual
Profile pages — A small avatar-style thumbnail is more appropriate

Image requirements for summary_large_image

Recommended: 1200 x 600px (2:1 ratio)
Minimum: 300 x 157px
Maximum file size: 5MB
Formats: JPG, PNG, WebP, GIF

Check your Open Graph tags

Related articles

Missing og:title

The og:title tag is essential for social sharing. Without it, platforms will use the page title or URL.

og:title Is Too Long

Titles longer than 60 characters may be truncated on social platforms.

og:title Is Too Short

Short titles may not be descriptive enough for social sharing.

Missing og:description

The og:description tag provides a summary of the page content for social platforms.

og:description Is Too Long

Descriptions over 160 characters may be truncated on social platforms.

og:description Is Too Short

Short descriptions miss the opportunity to engage users.

OpenGraph MCP Server

Inspect OG tags directly from your editor

The OpenGraph MCP server lets you inspect and analyze Open Graph meta tags directly from your AI-powered editor or assistant. It provides two tools:

inspect_og — Fetch and score OG tags for any URL
suggest_og_tags — Generate recommended meta tag HTML

Add the server to your project's .cursor/mcp.json file:

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

Restart Cursor after adding the configuration.

Add to your .vscode/mcp.json file (requires GitHub Copilot extension):

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

Make sure you have GitHub Copilot with MCP support enabled.

Add to your claude_desktop_config.json file:

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

The config file is at ~/Library/Application Support/Claude/claude_desktop_config.json on macOS or %APPDATA%\Claude\claude_desktop_config.json on Windows.

Add to your ~/.codeium/windsurf/mcp_config.json file:

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

Restart Windsurf after modifying the configuration.

Add to your Zed settings.json under context_servers:

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

Open settings with Cmd+, and add the configuration.

Usage examples

▶ "Inspect the OG tags of github.com"

▶ "Suggest OG meta tags for my website https://example.com"

▶ "Check if my blog post has proper Open Graph tags"