⚠ Warning Image

Missing og:image Dimensions — Why You Should Specify Width and Height

Specifying og:image:width and og:image:height helps platforms render your image correctly.

What are og:image dimensions?

The og:image:width and og:image:height meta tags tell social platforms the exact size of your Open Graph image before they download it. This allows them to render the preview layout correctly without waiting for the image to load.

Why does this matter?

Without explicit dimensions:

Layout shift — The preview area may jump or resize as the image loads
Slower rendering — Platforms must download the image first to determine its size
Incorrect display — Some platforms may crop or scale the image poorly without knowing its aspect ratio
Caching issues — Facebook's crawler may time out before fetching the image dimensions

How to fix it

Add width and height tags alongside your og:image:

<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" />

Recommended dimensions

The universally recommended OG image size is 1200 x 630 pixels (1.91:1 aspect ratio). This works well across all major platforms:

Platform	Recommended	Minimum
Facebook	1200x630	600x315
Twitter/X	1200x628	300x157
LinkedIn	1200x627	200x200
Discord	1200x630	256x256
WhatsApp	1200x630	300x200

Framework-specific implementation

Next.js (App Router):

export const metadata = {
  openGraph: {
    images: [{
      url: 'https://yoursite.com/og-image.jpg',
      width: 1200,
      height: 630,
    }],
  },
}

HTML:

<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" />

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"