Open Graph Image Dimensions

Recommended size: 1200 × 630 pixels

1200 × 630
1.91:1

Open Graph images at 1200×630 pixels control how your pages appear when shared on Facebook, LinkedIn, Twitter, Discord, Slack, iMessage, and hundreds of other platforms. This single image determines your content's first impression across the social web. Without a proper og:image tag, platforms either show nothing or pull a random image from your page. Given that social shares drive significant referral traffic, a well-designed OG image is one of the highest-leverage SEO and marketing assets you can create.

Specifications

Width 1200px
Height 630px
Aspect Ratio 1.91:1
Platform web
Category seo

Where OG Images Appear

Your og:image is used by more platforms than most people realize:

  • Facebook/Meta: Link preview cards in feed, Messenger, and WhatsApp
  • LinkedIn: Link preview cards in feed and messages
  • Twitter/X: Twitter Card image (also reads twitter:image if specified separately)
  • Discord: Link embed cards in chat
  • Slack: Link unfurling previews
  • iMessage: Link previews in iOS Messages
  • Telegram: Link preview cards
  • Google Discover: Sometimes uses og:image for article cards

The 1200×630 dimension at 1.91:1 is the universal sweet spot that displays correctly across all these platforms. Some platforms crop slightly differently, so keep critical content within the center 1100×550 pixels.

Implementation with Meta Tags

Add these meta tags to your page's section:

  • og:image — The absolute URL of the image (must be HTTPS)
  • og:image:width — 1200
  • og:image:height — 630
  • og:image:type — image/jpeg or image/png
  • og:image:alt — Descriptive alt text for accessibility

For Twitter specifically, also add:

  • twitter:card — Set to summary_large_image for the full-width preview
  • twitter:image — Can be same URL as og:image

Common mistakes:

  • Using a relative URL instead of absolute (must start with https://)
  • Image URL returning 404 or redirect chain
  • Image being too small (minimum 200×200 for most platforms, but 1200×630 recommended)
  • Not including width/height tags (causes some platforms to fetch the image to determine dimensions, slowing preview generation)

Dynamic OG Image Generation

For sites with many pages, manually creating OG images doesn't scale. Dynamic generation options:

  • Vercel OG (@vercel/og): Generates images at the edge using JSX templates, ideal for Next.js/Vercel deployments
  • Satori (by Vercel): Converts HTML/CSS to SVG, which can be rendered to PNG — works in any environment
  • Puppeteer/Playwright: Screenshot a styled HTML template — flexible but slower
  • Cloudinary/Imgix: URL-based text overlay on template images — no code required

Dynamic OG images let you include page-specific text (titles, descriptions, author info) on a branded template. This is far more effective than using a generic site-wide OG image for every page.

Quick Tips

  • → Use absolute HTTPS URLs for og:image — relative paths won't work
  • → Keep critical content in the center 1100×550 safe zone
  • → Use Facebook's Sharing Debugger to test and refresh cached previews
  • → Generate dynamic OG images for content-heavy sites using Vercel OG or Satori

Related web Sizes

Favicon
32 × 32
Apple Touch Icon
180 × 180

Frequently Asked Questions

What size should an Open Graph image be?

1200×630 pixels at 1.91:1 aspect ratio. This is the standard that works correctly across Facebook, LinkedIn, Twitter, Discord, Slack, iMessage, and other platforms. Keep critical content within the center 1100×550 area to account for slight cropping differences between platforms.

Why isn't my OG image showing when I share a link?

Common causes: the og:image URL is relative instead of absolute (must start with https://), the image URL returns a 404 or redirect, the image is cached from a previous version (use Facebook's Sharing Debugger to refresh), or the image is too small (minimum 200×200px). Also check that the og:image meta tag is in the page's head section.

Can I use different images for Facebook and Twitter?

Yes. Set og:image for the default (used by Facebook, LinkedIn, etc.) and twitter:image for a Twitter-specific image. If twitter:image isn't specified, Twitter falls back to og:image. This is useful if you want a different crop or design for Twitter's slightly different aspect ratio.