⚠ Warning Image

OG Image Dimensions Too Large — Reduce for Better Performance

Your OG image exceeds 4096px in one or both dimensions. Some platforms may fail to process it.

What’s the issue?

Your OG image has very large dimensions (over 4096px on one side). While the image may technically work on some platforms, oversized images cause several problems:

Slow loading — Larger images take longer to download, especially on mobile
Processing failures — Some platforms silently fail to process very large images
Wasted bandwidth — Social platforms resize images anyway, so the extra pixels are discarded
Memory issues — Very large images can cause memory pressure on mobile devices

How it looks

⚠ Oversized (5000×2625px)

Loading… (4.2 MB)

My Website Title

example.com

✅ Optimized (1200×630px)

Loads instantly

My Website Title

example.com

Platform dimension limits

Platform	Max dimensions	Behavior
Facebook	~8192px	May timeout during processing
X (Twitter)	4096x4096px	Image rejected silently
LinkedIn	~6000px	May fail to generate preview
Discord	~8192px	Image may not embed
WhatsApp	Varies	Combined with file size limit

How to fix it

Resize your image to the recommended 1200x630px:

<meta property="og:image" content="https://yoursite.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Automated resizing with Sharp:

import sharp from 'sharp'

await sharp('huge-image.png')
  .resize(1200, 630, { fit: 'cover' })
  .jpeg({ quality: 80 })
  .toFile('og-image.jpg')

Why 1200x630px is the sweet spot

1200px wide — Enough for crisp display on all screens, including retina
630px tall — 1.91:1 ratio that every major platform supports natively
File size — Easily compressible to under 300 KB at these dimensions
Processing — All platforms handle this size instantly

Don’t use retina sizes for OG images

Unlike website assets, OG images don’t benefit from 2x/3x retina sizes. Social platforms always resize to their own display dimensions, so 1200x630 is the optimal maximum.

Check your Open Graph tags

Related articles

Broken og:image

The og:image URL does not return a valid image. Social platforms will show a broken or missing preview.

Canonical URL Differs from Page URL

The canonical URL points to a different URL than the current page.

Charset Is Not the First Meta Tag

The charset declaration should be the very first element inside <head>.

og:description Could Be Longer

You have room for a more detailed description to increase engagement.

og:description Contains a URL

The og:description should be a human-readable summary, not a URL.

Keyword Stuffing in og:description

Repeating the same words excessively in the description looks spammy.

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"