OG Image Size Guide 2026: Perfect Dimensions & Meta Tags for Every Platform

Get the exact og:image sizes for Facebook, Twitter, LinkedIn & more. Complete meta og image setup guide with code examples and common fixes.

Struggling with blurry social previews or cropped images when sharing your website? You're not alone. The #1 question developers and marketers ask about Open Graph images is: "What size should my OG image be?" In this definitive guide, we'll cover everything you need to know about og image dimensions, meta og image implementation, and how to ensure your social previews look pixel-perfect across all platforms.

Quick Reference: OG Image Sizes for 2026

Let's cut straight to what you need. Here are the recommended OG image dimensions for every major platform:

Platform	Recommended Size	Aspect Ratio	Min Size
Facebook	1200 × 630 px	1.91:1	600 × 315 px
Twitter/X	1200 × 630 px	1.91:1	600 × 335 px
LinkedIn	1200 × 627 px	1.91:1	1200 × 627 px
Discord	1200 × 630 px	1.91:1	256 × 256 px
Slack	1200 × 630 px	1.91:1	250 × 250 px
WhatsApp	1200 × 630 px	1.91:1	300 × 200 px
Pinterest	1200 × 630 px	1.91:1	600 × 315 px

The Universal Sweet Spot: 1200 × 630 pixels

If you want one size that works everywhere, go with 1200 × 630 pixels. This dimension satisfies requirements across Facebook, Twitter, LinkedIn, Discord, Slack, and most other platforms. It's the de facto standard that balances quality with file size.

Understanding Meta OG Image Tags

The og:image meta tag tells social platforms which image to display when your page is shared. Here's the complete set of Open Graph image-related tags you should know:

Essential OG Image Tags

<!-- Primary OG Image Tag (Required) -->
<meta property="og:image" content="https://example.com/og-image.png" />

<!-- Image Dimensions (Highly Recommended) -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Image Type (Recommended) -->
<meta property="og:image:type" content="image/png" />

<!-- Secure URL for HTTPS (Recommended) -->
<meta property="og:image:secure_url" content="https://example.com/og-image.png" />

<!-- Image Alt Text for Accessibility -->
<meta property="og:image:alt" content="Description of the image" />

Complete HTML Implementation

Here's a production-ready template with all essential meta tags:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Primary Meta Tags -->
  <title>Your Page Title</title>
  <meta name="description" content="Your page description here">
  
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="Your page description here" />
  <meta property="og:image" content="https://example.com/og-image.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Preview of the page content" />
  <meta property="og:site_name" content="Your Site Name" />
  
  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:url" content="https://example.com/page" />
  <meta name="twitter:title" content="Your Page Title" />
  <meta name="twitter:description" content="Your page description here" />
  <meta name="twitter:image" content="https://example.com/og-image.png" />
  <meta name="twitter:image:alt" content="Preview of the page content" />
</head>
<body>
  <!-- Your content -->
</body>
</html>

Framework-Specific Implementation

Next.js App Router (13+)

// app/layout.tsx or app/page.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Your Page Title',
  description: 'Your page description',
  openGraph: {
    title: 'Your Page Title',
    description: 'Your page description',
    url: 'https://example.com',
    siteName: 'Your Site Name',
    images: [
      {
        url: 'https://example.com/og-image.png', // Must be absolute URL
        width: 1200,
        height: 630,
        alt: 'Preview of the page content',
      },
    ],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'Your page description',
    images: ['https://example.com/og-image.png'],
  },
}

For production apps, manually repeating this metadata across every page gets tedious. A better approach is to create a reusable metadata generator function that automatically handles OG images, alternate languages, canonical URLs, and Twitter cards. If you're starting a new Next.js project, the Next.js Starter template includes a ready-to-use constructMetadata utility that generates all these tags automatically—just pass in your page title and description, and it handles the rest.

React with React Helmet

import { Helmet } from 'react-helmet';

function MyPage() {
  return (
    <>
      <Helmet>
        <meta property="og:title" content="Your Page Title" />
        <meta property="og:description" content="Your description" />
        <meta property="og:image" content="https://example.com/og.png" />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:image" content="https://example.com/og.png" />
      </Helmet>
      {/* Page content */}
    </>
  );
}

Vue.js with vue-meta

export default {
  metaInfo: {
    meta: [
      { property: 'og:title', content: 'Your Page Title' },
      { property: 'og:description', content: 'Your description' },
      { property: 'og:image', content: 'https://example.com/og.png' },
      { property: 'og:image:width', content: '1200' },
      { property: 'og:image:height', content: '630' },
      { name: 'twitter:card', content: 'summary_large_image' },
      { name: 'twitter:image', content: 'https://example.com/og.png' },
    ],
  },
}

File Format and Size Optimization

Recommended Formats

Format	Best For	Pros	Cons
PNG	Graphics, logos, text	Lossless, transparency	Larger file size
JPEG	Photos, gradients	Small file size	No transparency, lossy
WebP	Modern browsers	Best compression	Limited legacy support

File Size Guidelines

Target file size: Under 300KB for optimal loading
Maximum file size: Stay under 8MB (Facebook's limit)
Recommended: 100-200KB for the perfect balance

Pro tip: Use tools like ImageOptim or Squoosh to compress your OG images without visible quality loss.

The Safe Zone: Where to Place Your Content

Not all parts of your OG image are created equal. Different platforms may crop your image slightly differently. To ensure your key content is always visible:

┌────────────────────────────────────────────────┐
│                   DANGER ZONE                  │
│  ┌──────────────────────────────────────────┐  │
│  │               SAFE ZONE                  │  │
│  │         (Your main content)              │  │
│  │                                          │  │
│  │    Title, Logo, Key Visual Elements      │  │
│  │                                          │  │
│  └──────────────────────────────────────────┘  │
│                   DANGER ZONE                  │
└────────────────────────────────────────────────┘

Safe zone recommendation: Keep important content within the central 1080 × 566 pixel area (90% of width, 90% of height), leaving a 60px margin on all sides.

Common OG Image Problems and Fixes

Problem 1: Image Not Showing

Symptoms: Social preview shows no image or a default placeholder.

Solutions:

Use absolute URLs: https://example.com/og.png not /og.png
Check image accessibility: Ensure the image URL is publicly accessible
Verify file size: Keep under 8MB
Clear platform cache: Use Facebook Debugger or Twitter Card Validator

Problem 2: Wrong Image Appearing

Symptoms: An old or incorrect image displays instead of your new one.

Solutions:

Clear cache with debugging tools:
Add cache-busting query parameter: og.png?v=2
Wait for cache expiry: Usually 24-48 hours

Problem 3: Image Appears Blurry

Symptoms: Image looks pixelated or low quality on high-DPI screens.

Solutions:

Use 1200 × 630 minimum: Never go smaller
Export at 2x for retina: 2400 × 1260 can help on high-DPI displays
Choose PNG for graphics with text: JPEG compression can blur text

Problem 4: Image Gets Cropped Unexpectedly

Symptoms: Key content is cut off on certain platforms.

Solutions:

Center your important content: Use the safe zone guidelines above
Test on multiple platforms: Preview before publishing
Avoid edge-to-edge text: Leave breathing room

Testing and Validation Tools

Before publishing, always validate your OG tags with these official tools:

Tool	Platform	URL
Sharing Debugger	Facebook	developers.facebook.com/tools/debug
Card Validator	Twitter/X	cards-dev.twitter.com/validator
Post Inspector	LinkedIn	linkedin.com/post-inspector

These tools will:

Show exactly how your link will appear when shared
Identify any missing or malformed meta tags
Force a cache refresh to load your latest image

Create Perfect OG Images in Seconds

Now that you understand the technical requirements, the question becomes: how do you create images that meet these specifications without spending hours in design software?

MyOGImage.com is a free tool designed specifically for this purpose. Here's what makes it perfect for creating properly-sized OG images:

Why developers choose MyOGImage.com:

✅ Pre-configured dimensions: All templates are already 1200 × 630 pixels
✅ Multiple export formats: PNG, JPEG, and WebP options
✅ 17+ professional templates: Corporate, blog, showcase, and more
✅ Real-time preview: See exactly how your image will look
✅ 100% free: No watermarks, no registration required

Quick Start Guide

Visit MyOGImage.com
Choose a template that fits your content
Customize text, colors, and branding
Export your perfectly-sized 1200 × 630 image
Copy the generated meta tags
Paste into your HTML <head>

OG Image Size Checklist

Before you publish, run through this checklist:

Image dimensions are 1200 × 630 pixels
File size is under 300KB (max 8MB)
Format is PNG, JPEG, or WebP
og:image uses an absolute URL (https://...)
og:image:width and og:image:height are specified
Key content is within the safe zone
Image is publicly accessible (not behind auth)
Tested with Facebook Debugger
Tested with Twitter Card Validator

Conclusion

Getting your OG image size and meta tags right is one of the highest-ROI investments you can make for your website's social presence. The universal 1200 × 630 pixel dimension works across all major platforms, and proper meta tag implementation ensures your images display correctly every time.

Remember: in the split-second decision of whether to click on a link, your OG image is often the deciding factor. Make it count with properly sized, professionally designed social preview images.

Ready to create your first perfectly-sized OG image? Get started for free at MyOGImage.com.