Open Graph Image Size Guide
The exact Open Graph image dimensions and file size requirements for Facebook, LinkedIn, Twitter, Discord, WhatsApp, Slack, and Telegram.
The preview image is the most visible element of any Open Graph card. Using the wrong dimensions causes awkward cropping, pixelation, or blank placeholders — killing click-through rates.
This guide provides the exact image specifications required by every major platform in 2026.
Universal Recommended Size
For maximum compatibility across all platforms, create your Open Graph images at:
- Width: 1200 pixels
- Height: 630 pixels
- Aspect ratio: 1.91:1
- File format: PNG or JPEG (WebP support is inconsistent)
- File size: Under 5 MB (under 1 MB recommended)
This single image size renders correctly on Facebook, LinkedIn, Twitter/X, Discord, WhatsApp, Slack, and Telegram without cropping.
Platform-Specific Requirements
| Platform | Minimum Size | Recommended Size | Aspect Ratio | Max File Size |
|---|---|---|---|---|
| 200×200 px | 1200×630 px | 1.91:1 | 8 MB | |
| 200×200 px | 1200×627 px | 1.91:1 | 5 MB | |
| Twitter/X (large card) | 300×157 px | 1200×628 px | 1.91:1 | 5 MB |
| Twitter/X (summary) | 144×144 px | 800×800 px | 1:1 | 5 MB |
| Discord | 200×200 px | 1200×630 px | 1.91:1 | 8 MB |
| 300×200 px | 1200×630 px | 1.91:1 | 5 MB | |
| Slack | 200×200 px | 1200×630 px | 1.91:1 | 5 MB |
| Telegram | 200×200 px | 1200×630 px | 1.91:1 | 5 MB |
For a deeper breakdown of all social image dimensions including profile photos and story formats, see our Social Media Image Dimensions Guide.
How to Specify Image Dimensions in HTML
Always declare explicit dimensions using structured OG properties:
<meta property="og:image" content="https://example.com/og-banner.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="Open Graph Image Size Guide banner" />Specifying width and height allows platforms to render the card layout immediately without downloading the full image first. This improves perceived load speed in feeds and chat windows.
Common Image Mistakes
1. Using Relative URLs
Social crawlers fetch your page from their own servers. /images/og.png resolves to nothing on their domain. Always use fully-qualified HTTPS URLs.
2. Oversized Files
If your image exceeds the platform’s file size limit, the crawler times out and displays no image. Compress your PNGs with tools like TinyPNG or Squoosh.
3. Important Content at the Edges
Different platforms crop images differently. Place your key text, logo, and visual focus in the center 80% of the image to avoid clipping on any platform.
4. Text-Heavy Images
Some platforms (particularly Facebook) historically penalized images with more than 20% text coverage in advertising contexts. Keep text minimal and high-contrast.
Generating Custom OG Images
For sites with many pages, manually designing images in Figma is impractical. Consider:
- Dynamic OG Image APIs — Render HTML/CSS to PNG at request time. See our Dynamic Open Graph Images: Complete Guide.
- Template-Based Generators — Use our OG Image Builder to create branded social cards with text overlays.
- Framework-Specific Solutions — Next.js
@vercel/og, Astro@astro-community/og, and similar libraries. See Dynamic OG Image Automation.
Twitter Card Image Sizes
Twitter/X has its own image requirements that differ slightly from Open Graph. For the full specification, see Twitter Card Image Size.
Test how your images render across all platforms simultaneously with the Social Preview Simulator.
Deep Technical Framework Implementations
Integrating optimized social preview tags into production web frameworks requires understanding how each runtime handles head metadata and server-side rendering:
1. Next.js App Router (layout.tsx / page.tsx)
In Next.js 14 and 15, use the centralized Metadata API to construct unified Open Graph and Twitter Card tags. This ensures that edge crawlers receive complete, pre-rendered meta tags in the initial HTML stream before client hydration:
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Next-Generation Web Metadata & Social Graph Suite',
description: 'Automate Open Graph, Twitter Cards, and Schema.org JSON-LD generation with sub-millisecond edge validation.',
openGraph: {
title: 'Next-Generation Web Metadata & Social Graph Suite',
description: 'Automate Open Graph, Twitter Cards, and Schema.org JSON-LD generation with sub-millisecond edge validation.',
url: 'https://opengraphgenerator.com/',
siteName: 'Open Graph Generator',
images: [
{
url: 'https://opengraphgenerator.com/images/hero-1200x630.png',
width: 1200,
height: 630,
alt: 'Open Graph Generator Dashboard Interface',
type: 'image/png',
},
],
locale: 'en_US',
type: 'website',
},
twitter: {
card: 'summary_large_image',
site: '@OpenGraphGen',
creator: '@sanjaysamanta',
title: 'Next-Generation Web Metadata & Social Graph Suite',
description: 'Automate Open Graph, Twitter Cards, and Schema.org JSON-LD generation with sub-millisecond edge validation.',
images: ['https://opengraphgenerator.com/images/hero-1200x630.png'],
},
};For dynamic route handling in Next.js, read our comprehensive Next.js Open Graph Guide.
2. Astro Component Head Architecture
Astro’s component-first model allows you to encapsulate social sharing tags into reusable SEO layouts:
---
interface Props {
title: string;
description: string;
image?: string;
canonicalUrl?: string;
type?: 'website' | 'article';
}
const {
title,
description,
image = 'https://opengraphgenerator.com/images/default-og.png',
canonicalUrl = Astro.url.href,
type = 'website'
} = Astro.props;
---
<head>
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalUrl} />
<!-- Open Graph -->
<meta property="og:type" content={type} />
<meta property="og:site_name" content="Open Graph Generator" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:image" content={image} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@OpenGraphGen" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={image} />
</head>3. Nuxt 3 & Vue Composition API
<script setup lang="ts">
useSeoMeta({
title: 'Enterprise Social Metadata Management',
ogTitle: 'Enterprise Social Metadata Management',
description: 'Scalable Open Graph and Twitter Card automation for multi-tenant applications.',
ogDescription: 'Scalable Open Graph and Twitter Card automation for multi-tenant applications.',
ogImage: 'https://example.com/og-banner.png',
ogImageWidth: '1200',
ogImageHeight: '630',
ogUrl: 'https://example.com/enterprise/',
ogType: 'website',
twitterCard: 'summary_large_image',
twitterSite: '@OpenGraphGen',
});
</script>Edge Caching, CDN Invalidation & HTTP Headers
To ensure that social scrapers (facebookexternalhit, Twitterbot, LinkedInBot, Slackbot, WhatsApp/2.x) always receive fresh metadata while minimizing origin server CPU load, implement a multi-tiered caching strategy:
| Asset Category | Cache-Control Header | Edge CDN TTL | Browser Cache TTL |
|---|---|---|---|
| HTML Webpages | public, max-age=0, s-maxage=600, must-revalidate |
10 Minutes | 0 Seconds (Always revalidate) |
| Static OG Images | public, max-age=31536000, immutable |
1 Year | 1 Year (Content-hashed URLs) |
| Dynamic OG API Routes | public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400 |
24 Hours | 1 Hour |
# NGINX Edge Caching Configuration for Social Scraping
location ~* \.(html)$ {
add_header Cache-Control "public, max-age=0, s-maxage=600, must-revalidate";
add_header X-Robots-Tag "all";
}
location ~* \.(png|jpg|jpeg|webp)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
add_header Access-Control-Allow-Origin "*";
}Comprehensive Troubleshooting & Error Code Resolution Matrix
When debugging failed link previews across development, staging, and production environments, refer to this error resolution matrix:
| HTTP Status / Error | Scraper Behavior | Root Cause | Actionable Developer Fix |
|---|---|---|---|
| 401 Unauthorized | Plain URL rendered, no image or text | Staging environment protected by Basic Auth or IP whitelist | Allowlist crawler User-Agent strings or test on public preview URLs. |
| 403 Forbidden | Scraper skips metadata extraction | Web Application Firewall (WAF) or Cloudflare Bot Management blocking scrapers | Add WAF custom rules to bypass verified social bots (Twitterbot, facebookexternalhit, LinkedInBot). |
| 404 Not Found | Error page metadata cached | Scraped URL does not exist or has an unhandled redirect | Ensure canonical trailing slashes match server routing. Inspect with Head Auditor. |
| SSL Handshake Failure | Scraper aborts connection immediately | Missing intermediate SSL certificate or expired TLS cert | Install full certificate bundle. Audit security with Security Headers. |
| Timeout (3.0s+) | Text-only link with no thumbnail | Slow server response time or SSR cold starts | Cache HTML responses at the edge or use static pre-rendering. |
| Stale Preview Cache | Shows old headline/image after deploy | Social platform CDN cache still active | Invalidate via Facebook Debugger or LinkedIn Post Inspector. |
For an in-depth walkthrough on cache purging, read How to Fix Cached Previews on LinkedIn & WhatsApp.
The Complete Technical SEO & Social Ecosystem
A world-class digital presence requires harmonizing social metadata, search engine rich results, crawl directives, and AI agent context:
- Live URL Inspection: Audit your production URLs with our Open Graph Inspector to detect missing properties before publishing.
- Twitter Card Generation: Ensure large banner rendering with our Twitter Card Generator.
- Structured Search Data: Unlock star ratings and FAQ rich snippets with our JSON-LD Schema Generator and validate with our Schema Inspector.
- Crawl Budget Management: Verify search engine bot permissions using our Robots Simulator and build compliant files with our Robots.txt Builder.
- AI Knowledge Architecture: Format repository knowledge for AI coding agents (Cursor, Claude Code, Windsurf) using the Open Knowledge Format (OKF) Generator and explore the OKF Developer Guide.
Generate and validate your full metadata stack with our free Open Graph Generator today!