Every social platform has its own image size requirements for Open Graph previews — and using the wrong dimensions means cropped images, tiny thumbnails, or no image at all. This guide gives you the exact numbers for every major platform and a single recommended size that works everywhere.

The Universal OG Image Size (Use This)

TipUse 1200×630px at 2:1 aspect ratio, served over HTTPS as JPEG or PNG under 5MB. This size works correctly on Twitter, LinkedIn, Facebook, Discord, Slack, and iMessage.

If you only take one thing from this guide: use 1200×630px. It is the best compromise across all platforms — Twitter's preferred 2:1 ratio, within LinkedIn's 1.91:1 tolerance, above all minimum size thresholds, and well under all file size limits.

OG Image Size Requirements by Platform

Twitter / X

—summary_large_image card: 1200×628px recommended (2:1 ratio). Minimum: 300×157px.
—summary card: 400×400px recommended (1:1 square). Minimum: 144×144px.
—Max file size: 5MB for JPEG/PNG, 5MB for GIFs (static GIFs only — animated GIFs are not unfurled).
—Format: JPEG, PNG, WebP, or GIF.
—Requirement: twitter:card tag must be set — without it, Twitter may render no card regardless of image size.

—Recommended: 1200×627px (1.91:1 ratio).
—Minimum: 200×200px — images below this are hidden entirely.
—Optimal minimum for large format: 600×315px.
—Max file size: 5MB.
—Format: JPEG or PNG.
—Note: LinkedIn caches previews aggressively (up to 7 days). Use the LinkedIn Post Inspector to force a re-crawl after changing images.

Facebook

—Recommended: 1200×630px (1.91:1 ratio).
—Minimum for large format: 600×315px.
—Minimum to show at all: 200×200px.
—Max file size: no hard limit documented; keep under 8MB in practice.
—Format: JPEG or PNG.
—Note: Images below 600×315px are displayed as small inline thumbnails rather than large preview cards.

Discord

—Any size works — Discord renders images up to 400px wide in embeds.
—No minimum or maximum enforced.
—GIFs are supported and autoplay in Discord embeds.
—Use theme-color meta tag (not an OG property) to set the embed accent color.
—og:video is also supported for inline video playback.

Slack

—Slack respects twitter:card="summary_large_image" for displaying large images.
—Without twitter:card, Slack shows a small right-aligned thumbnail (approx 75×75px).
—Max 2MB for images on mobile Slack.
—Animated GIFs are displayed but do not autoplay.
—Note: Workspace admins can disable link unfurling per-domain — some users may never see previews.

iMessage / Apple

—HTTPS is required — HTTP images are not shown.
—Recommended: 1200×630px.
—Image must be publicly accessible (no auth required).
—Large pages (over 1MB HTML) may skip preview generation.
—Uses og:image with fallback to the first image found on the page.

Quick Reference Table

—Twitter summary_large_image — 1200×628px — min 300×157px — 5MB max
—Twitter summary — 400×400px — min 144×144px — 5MB max
—LinkedIn — 1200×627px — min 200×200px — 5MB max
—Facebook — 1200×630px — min 200×200px — 8MB max
—Discord — any — none — none
—Slack — 1200×630px — 75×75px thumbnail — 2MB mobile
—iMessage — 1200×630px — none — 8MB max

The Correct og:image Tag Setup

Always include the width and height as separate meta tags. Without them, some crawlers that lazy-load images may render an incorrectly-sized card until the image fully loads — and may never correct it.

<!-- Required for correct sizing on all platforms -->
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image for screen readers" />

<!-- Required for Twitter — without this tag Twitter may show no card at all -->
<meta name="twitter:card" content="summary_large_image" />

Generating OG Images at the Right Size

The cleanest way to generate platform-perfect OG images is to use the built-in image generation features of your framework rather than manually creating separate image files for each page.

Next.js: opengraph-image.tsx

Next.js App Router uses the opengraph-image.tsx file convention with Satori to render React components to images. Set the size export to exactly 1200×630 and the image is generated automatically:

// app/opengraph-image.tsx
import { ImageResponse } from 'next/og'

// This sets og:image:width and og:image:height automatically
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default function OGImage() {
  return new ImageResponse(
    <div
      style={{
        background: '#0a0a14',
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 64,
        color: 'white',
        fontWeight: 700,
      }}
    >
      Your Page Title
    </div>,
    { ...size }
  )
}

Important: Satori (the renderer Sext.js uses for OG images) does not support Tailwind CSS class names. All styles must be inline style={{ }} objects. Also avoid <br />, SVG with external hrefs, and most HTML form elements.

Cloudflare Images / Imgix / Cloudinary

If you use an image CDN, you can generate correctly-sized OG images on the fly using URL parameters. Cloudinary example:

<!-- Cloudinary: resize + crop to 1200×630 automatically -->
<meta property="og:image" content="https://res.cloudinary.com/demo/image/upload/c_fill,w_1200,h_630/sample.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Common OG Image Size Mistakes

1.Using 1200×600 instead of 1200×628 for Twitter — the 2:1 ratio is 1200×600, but Twitter crops to a 2:1 viewport that is 1200×628. Images smaller than the viewport are letterboxed.
2.Using a square (1:1) image with summary_large_image — Twitter will crop it to 2:1, cutting off the top and bottom. Use twitter:card="summary" for square images.
3.Not including og:image:width and og:image:height — some crawlers may fetch the image to determine its size, which is slow and can fail. Always include dimensions.
4.Hosting the image on a different subdomain without CORS — some crawlers verify image accessibility before rendering the card.
5.Using a dynamic image URL that returns different sizes — if your image URL returns different dimensions based on Accept headers or device type, crawlers may receive a different size than browsers.

How to Verify Your OG Image Is the Right Size

After setting up your OG image, verify that every platform receives the correct dimensions. The most reliable method is to fetch your page server-side with each crawler's user-agent and inspect the returned meta tags — because crawlers don't run JavaScript and don't see what your browser renders.

OGProof does this automatically: it fetches your URL with all six crawler user-agents (Twitter, LinkedIn, Facebook, Discord, Slack, and Google), parses the og:image tag and its width/height attributes, and renders an accurate visual preview of exactly what each platform will display. If the image is too small, missing HTTPS, or the wrong ratio for a given platform, OGProof shows the specific error and the fix.

OG Image Size: The Exact Dimensions for Every Platform in 2026