The Complete OG Image Size and Meta Tags Guide for 2026

Every platform, every dimension. Sharing a link with a broken or cropped preview image is one of the fastest ways to lose clicks. This guide covers the exact Open Graph image sizes for every major platform in 2026, the meta tags you need, and the mistakes that silently kill your social previews.

Why OG Image Sizes Matter

When someone shares your URL on Facebook, Twitter/X, LinkedIn, Discord, Slack, or any messaging app, the platform fetches your page's Open Graph meta tags and renders a preview card. That card is often the only thing standing between a scroll-past and a click.

Get the image size wrong, and the platform will either crop it awkwardly, stretch it, show a tiny thumbnail, or display no image at all. Each of these outcomes costs you clicks—and by extension, traffic, signups, and revenue.

The problem is that different platforms have different requirements. Facebook uses a 1.91:1 aspect ratio. Pinterest uses 2:3 (portrait). Twitter has two completely different card types with different dimensions. This guide gives you the exact numbers for every platform, plus a universal strategy that works everywhere.

Quick Reference: OG Image Sizes by Platform

Bookmark this table. It contains the recommended image dimensions for every major platform as of 2026.

The Safe Universal Size: 1200 × 630

If you want a single image that works everywhere (except Pinterest), use 1200×630 pixels. Here is why this specific size became the standard:

• Facebook set the precedent. As the platform that originally created the Open Graph protocol in 2010, Facebook's recommended 1.91:1 ratio became the de facto standard. Every other platform adopted it.
• 1200px width is the sweet spot. Wide enough for sharp rendering on high-DPI screens. Narrow enough to keep file sizes reasonable. Most platforms downscale from 1200px but never upscale from smaller images.
• 630px height accommodates minor cropping. Twitter's 628px and LinkedIn's 627px mean those platforms crop 2-3 pixels from a 630px image—imperceptible. Your design should keep critical content away from the very edges regardless.

For file format, use PNG for graphics and text-heavy images, JPEG for photographic images. Keep file size under 5 MB (Facebook's hard limit) and ideally under 1 MB for fast loading. Both PNG and JPEG are universally supported. WebP support is growing but not yet universal across all social platform crawlers.

The Safe Zone

Even at 1200×630, platforms may crop a few pixels from any edge. Keep your important content—text, logos, key visuals—within a safe zone of roughly 1100×580, centered within the image. This gives you a 50px buffer on each side, ensuring nothing critical gets clipped regardless of the platform.

Complete Meta Tags Reference

Here is a complete, copy-paste-ready HTML template with every meta tag you need for optimal social previews across all platforms. Replace the placeholder values with your own content.

<!-- Primary Open Graph Tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A concise description under 200 characters." />
<meta property="og:image" content="https://yoursite.com/images/og-image.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="Description of the image" />

<!-- Twitter/X Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://yoursite.com/page" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A concise description." />
<meta name="twitter:image" content="https://yoursite.com/images/og-image.png" />
<meta name="twitter:image:alt" content="Description of the image" />

<!-- Optional: Twitter site/creator -->
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:creator" content="@authorhandle" />

Tag-by-Tag Breakdown

• og:image — The absolute URL to your image. Must be HTTPS. Must be a publicly accessible URL (not behind auth, not localhost).
• og:image:width and og:image:height — Tells the crawler the exact dimensions so it can render the preview without downloading the full image first. Significantly speeds up preview rendering on Facebook.
• og:image:type — The MIME type (image/png, image/jpeg). Optional but helps crawlers handle the image correctly.
• og:image:alt — Accessibility text for the image. Required for WCAG compliance and used by screen readers.
• twitter:card — Set to summary_large_image for the full-width card (1200×628). Use summary for the smaller square thumbnail card (144×144).
• twitter:image — Twitter can fall back to og:image, but specifying twitter:image explicitly is more reliable and lets you use a different image if needed.

Structured Data (JSON-LD)

In addition to OG tags, adding JSON-LD structured data helps search engines understand your page and can trigger rich results. Here is a minimal Article schema:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Article Title",
  "description": "A brief description of the article.",
  "image": "https://yoursite.com/images/og-image.png",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Your Site",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yoursite.com/logo.png"
    }
  },
  "datePublished": "2026-03-28",
  "dateModified": "2026-03-28"
}
</script>

Common Mistakes That Break Social Previews

These are the issues we see most frequently when developers debug their OG images. Every one of them results in a broken, missing, or ugly social preview.

1. Wrong Aspect Ratio

Using a 16:9 image (1920×1080) instead of 1.91:1 (1200×630) causes visible cropping on Facebook and LinkedIn. The platform will center-crop your image to fit, which often cuts off text or important visual elements. Always use 1200×630.

2. Image Too Small

Facebook requires a minimum of 200×200 pixels, but images below 600×315 render as tiny thumbnails in the feed instead of full-width cards. LinkedIn is even stricter—images under 1200×627 may not render at full width. Always use 1200×630 to guarantee full-width rendering everywhere.

3. HTTP Instead of HTTPS

Most platforms now require (or strongly prefer) HTTPS URLs for OG images. An http:// image URL may be blocked entirely or trigger a mixed-content warning. Always serve your OG images over HTTPS.

4. Relative URLs

This is one of the most common mistakes. Your og:image must be an absolute URL including the full domain:

<!-- Wrong -->
<meta property="og:image" content="/images/og.png" />

<!-- Correct -->
<meta property="og:image" content="https://yoursite.com/images/og.png" />

Social platform crawlers do not have the context to resolve relative paths. They need the full URL.

5. Image Behind Authentication

If your OG image is served from a CDN or server that requires authentication, API keys, or cookies, the social platform crawler cannot access it. The image URL must be publicly accessible with no auth required. This also means localhost URLs will never work—the image must be on a public server.

6. Image File Too Large

Facebook enforces a 5 MB hard limit. Twitter recommends under 4.096 MB. In practice, OG images should be under 1 MB. Large files cause timeouts during crawling, resulting in no preview being shown. Compress your PNGs with tools like pngquant or TinyPNG, or use JPEG at 80-85% quality for photographic images.

7. Caching Issues

Social platforms aggressively cache OG images. If you update your image but keep the same URL, platforms will continue showing the old version. Solutions:

• Append a cache-busting query parameter: og-image.png?v=2
• Use a new filename for each version
• Use platform debugging tools (below) to force a refresh

Testing Your OG Images

Never ship a page without testing how the social preview actually looks. These free tools let you preview and debug your OG tags before sharing.

Facebook Sharing Debugger

URL: developers.facebook.com/tools/debug

Paste your URL to see exactly how Facebook renders your preview card. It shows all detected OG tags, the fetched image, and any warnings or errors. Use the "Scrape Again" button to force Facebook to re-fetch your page after changes.

Twitter/X Card Validator

URL: cards-dev.twitter.com/validator

Preview how your page appears when shared on Twitter/X. Validates that your twitter:card meta tags are correctly configured and that the image meets size requirements.

LinkedIn Post Inspector

URL: linkedin.com/post-inspector

LinkedIn's official tool for previewing shared links. Shows the resolved OG image, title, and description. Also allows you to refresh LinkedIn's cache for a specific URL.

Open Graph Preview Tools

For a quick cross-platform check, tools like opengraph.xyz show how your page looks across Facebook, Twitter, LinkedIn, and more in a single view. Useful for catching inconsistencies between platforms.

The Automated Approach

Manually creating a 1200×630 image for every page works fine when you have five pages. When you have fifty—or five hundred—it becomes a bottleneck that slows down every publish.

The alternative is to generate OG images programmatically. Instead of a static image URL, your og:image meta tag points to an API endpoint that generates the image on demand:

<meta property="og:image"
  content="https://ogpeek.com/api/v1/og
    ?title=OG+Image+Size+Guide
    &subtitle=Every+Platform,+Every+Dimension
    &template=gradient
    &theme=midnight
    &brandColor=%23FF7A00" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

When a social platform crawls your page and requests that URL, the API generates a properly-sized 1200×630 PNG in real time. No manual image creation. No file uploads. No forgotten pages with missing previews.

OGPeek's API generates images in under 200ms using SVG-native rendering (Satori + resvg)—fast enough that social platform crawlers never time out. Every image is automatically sized to 1200×630, so you never have to think about dimensions again.

The free tier includes a small watermark. Paid plans ($9/mo or $29/mo) remove the watermark and include higher rate limits and priority rendering.

Platform-Specific Tips

Twitter/X: Choosing the Right Card Type

Twitter supports two card types, and the one you choose determines the image dimensions:

• summary_large_image — Full-width image card. Use 1200×628. This is what you want for blog posts, landing pages, and most content.
• summary — Small square thumbnail (144×144 minimum, 4096×4096 max) next to the title and description. Better for app links or content where the image is secondary.

If you set twitter:card to summary_large_image but provide a small or square image, Twitter will still try to display it as a large card—resulting in awkward stretching or letterboxing.

LinkedIn: The 1200px Width Threshold

LinkedIn has an undocumented behavior: images under 1200px wide are rendered as small left-aligned thumbnails instead of full-width cards. Always hit exactly 1200px width to guarantee the full-width display. The 627px height is also important—LinkedIn crops taller images from the center.

Pinterest: The Outlier

Pinterest uses a 2:3 portrait ratio (1000×1500), which is incompatible with the 1.91:1 landscape format used by every other platform. If Pinterest is a significant traffic source for you, consider serving a different og:image for Pinterest using the pinterest:image meta tag, or accept that your landscape OG image will be center-cropped into a portrait frame.

Discord and Slack: Embed Behavior

Both platforms read OG tags to generate link unfurls (embeds). Discord is particularly strict about HTTPS and will not display images served over HTTP. Slack caches unfurls aggressively—if you need to refresh a cached preview, append a query parameter to your URL or use the /unfurl slash command.

Checklist: Before You Ship

Run through this checklist before publishing any page:

1. Image is exactly 1200×630 pixels
2. File size is under 1 MB (under 5 MB absolute maximum)
3. Image URL is absolute (starts with https://)
4. Image URL is publicly accessible (no auth, no localhost)
5. Both og:image:width and og:image:height are specified
6. twitter:card is set to summary_large_image
7. twitter:image is explicitly set (not relying on fallback)
8. Critical text/visuals are within the safe zone (50px from edges)
9. Tested in Facebook Sharing Debugger
10. Tested in Twitter Card Validator

Conclusion

OG image sizing is not complicated once you know the rules. Use 1200×630 for everything, keep critical content in the safe zone, serve over HTTPS, and always test before you ship. That covers 95% of use cases across every major platform.

For the remaining 5%—Pinterest's portrait format, Twitter's summary cards, LinkedIn's width threshold—refer to the platform-specific sections above.

If you are managing more than a handful of pages, automate your OG image generation with an API instead of creating images manually. Your future self (and your click-through rates) will thank you.