Open Graph Generator
お問い合わせ
Back to Blog
Social PreviewsImage SizingDesignOpen Graph

Social Media Image Dimensions: The Complete Cheat Sheet

The definitive guide to social media image dimensions for Open Graph, Twitter Cards, LinkedIn, Facebook, Discord, and Slack in 2026.

SS
Sanjay Samanta•March 12, 2026
11 min read

In modern web development and digital marketing, social media link preview images (Open Graph and Twitter Cards) are the primary visual touchpoint for your brand. Using the wrong image dimensions leads to cropped typography, pixelated logos, awkward center-cuts, or small thumbnails in user feeds.

This master guide provides the definitive social media image dimension cheat sheet, covering aspect ratios, safe zones, file size limits, and multi-platform compatibility for Open Graph, Twitter Cards, LinkedIn, Facebook, Discord, WhatsApp, Slack, and Pinterest.

The Universal Social Image Standard: 1200 × 630 px

If you only design one single image for your webpage, use:

  • Dimensions: 1200 × 630 pixels
  • Aspect Ratio: 1.91:1 (Landscape)
  • Maximum File Size: Under 1 MB (Under 300 KB for WhatsApp compatibility)
  • Format: WebP or PNG-24
<!-- Universal 1200x630 Social Preview Markup -->
<meta property="og:image" content="https://example.com/images/og-1200x630.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/images/og-1200x630.png" />

This universal standard renders as a crisp full-width banner on Facebook, Twitter/X, LinkedIn, Discord, Slack, and Telegram.

Master Platform Dimension Comparison Table

Platform Recommended Dimensions Aspect Ratio Minimum Size Max File Size Supported Format
Facebook 1200 × 630 px 1.91:1 600 × 315 px 8 MB PNG, JPG, WebP
Twitter / X (Large) 1200 × 628 px 1.91:1 600 × 314 px 5 MB PNG, JPG, WebP, GIF
Twitter / X (Summary) 600 × 600 px 1:1 144 × 144 px 5 MB PNG, JPG, WebP
LinkedIn 1200 × 627 px 1.91:1 552 × 289 px 5 MB PNG, JPG, WebP
Discord 1200 × 630 px 1.91:1 400 × 200 px 8 MB PNG, JPG, WebP, GIF
Slack 1200 × 630 px 1.91:1 500 × 261 px 5 MB PNG, JPG, WebP
WhatsApp 800 × 800 px or 1200 × 630 px 1:1 or 1.91:1 300 × 300 px 300 KB (Strict) JPG, PNG, WebP
Pinterest 1000 × 1500 px 2:3 (Vertical) 600 × 900 px 10 MB PNG, JPG

Safe Zone Architecture: Designing for Responsive Feeds

Because different social apps apply custom overlays (such as play buttons, domain badges, title strips, and rounded corners), you must structure your visual layout around a Central Safe Zone:

  • Canvas Dimensions: 1200 × 630 px
  • Safe Zone Bounds: 1000 × 500 px centered in the canvas.
  • Margin Safety: Keep text, logos, and focal faces at least 100 px away from left/right edges and 65 px away from top/bottom edges.

[!TIP] Avoid placing important headlines near the bottom-left corner of the image, as Facebook and LinkedIn frequently overlay domain pills (e.g. opengraphgenerator.com) in that region.

Platform-Specific Nuances

1. WhatsApp 300KB Constraint

As explored in our Open Graph for WhatsApp Guide, WhatsApp will completely discard any preview image exceeding 300 KB. Always compress social assets with modern tooling.

2. Discord Theme Colors

Pair your 1200×630px image with <meta name="theme-color" content="#HEX"> to brand the embed with a matching vertical accent stripe. Learn more in our Discord Embed Guide.

3. LinkedIn 1200×627 Aspect Ratio

LinkedIn uses 1200×627px. While 1200×630px scales cleanly, keep key graphics away from the bottom 3 pixels. Review our LinkedIn Open Graph Guide.

4. Twitter Summary vs Large Image

Twitter defaults to a small square thumbnail unless you explicitly specify <meta name="twitter:card" content="summary_large_image">. Read our guide on Twitter Card Meta Tags.

Dynamic Image Generation in Next.js (@vercel/og)

// app/api/og/route.tsx
import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'center',
          backgroundColor: '#0f172a',
          padding: '60px 80px',
        }}
      >
        <span style={{ color: '#38bdf8', fontSize: 24, fontWeight: 700 }}>
          OPEN GRAPH GENERATOR
        </span>
        <h1 style={{ color: '#ffffff', fontSize: 64, fontWeight: 900, marginTop: 20 }}>
          {title}
        </h1>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

For a complete guide to programmatic OG image rendering, read our Dynamic Open Graph Images Guide.

Image File Formats: WebP vs PNG vs JPEG

Format Transparency Compression Ratio Social Crawler Support
WebP ✅ Yes ⭐⭐⭐⭐⭐ Highest 99% of modern platforms (WhatsApp, Slack, Discord, Facebook, Twitter)
PNG-24 ✅ Yes ⭐⭐⭐ Moderate 100% universal support (Ideal for text-heavy graphics)
JPEG ❌ No ⭐⭐⭐⭐ High 100% universal support (Ideal for photo-rich backgrounds)

Workflow: Testing and Validating Social Images

  1. Visual Preview: Use our free Open Graph Generator to preview your image across 8 social platforms simultaneously.
  2. Live URL Inspection: Test your deployed URL with our Open Graph Inspector.
  3. Audit Meta Health: Ensure your canonical tags, headers, and robots directives are configured properly with our Meta Tag Auditor.
  4. Structured Data: Pair social cards with rich search snippets using our JSON-LD Schema Generator and AI agent knowledge layers with our OKF Generator.

Ensure your social previews look professional on every screen today!

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:

  1. Live URL Inspection: Audit your production URLs with our Open Graph Inspector to detect missing properties before publishing.
  2. Twitter Card Generation: Ensure large banner rendering with our Twitter Card Generator.
  3. Structured Search Data: Unlock star ratings and FAQ rich snippets with our JSON-LD Schema Generator and validate with our Schema Inspector.
  4. Crawl Budget Management: Verify search engine bot permissions using our Robots Simulator and build compliant files with our Robots.txt Builder.
  5. 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!

More Articles
Advertisement

Related Articles

Does Open Graph Help SEO?

6 min read

Dynamic Open Graph Images: Complete Guide

8 min read

How to Test Open Graph Tags

6 min read