OG Image Size Guide 2026 — Open Graph Dimensions & Best Practices
Every time someone shares your URL on Facebook, LinkedIn, Twitter, Slack, or Discord, a preview image appears. That image is your OG image — and most developers and site owners either set the wrong size, skip it entirely, or use an image that crops awkwardly on half the platforms. This guide covers the one universal size that works everywhere, how OG images work technically, what to put on them, and how to test them before your links go live.
OG Image — Quick Specs
Recommended size
1200 × 630 px
Aspect ratio
1.91:1
Minimum size
600 × 315 px
Max file size
8 MB (Facebook)
Recommended format
PNG or JPG
Text safe zone
50px from edges
What Is an OG Image?
An OG image — short for Open Graph image — is the preview image that social media platforms display when someone shares a link to your website. When you paste a URL into Facebook, LinkedIn, Twitter, Slack, or Discord, the platform fetches the page and looks for specific HTML meta tags to build a rich link preview. The og:image meta tag tells it which image to display.
The tag looks like this in your HTML <head>:
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
Without this tag, platforms attempt to automatically find an image on the page — and the result is almost always wrong. They may pick a logo, a random thumbnail, or display no image at all. An explicitly defined OG image guarantees that every share of your URL looks exactly as intended.
OG images have become a significant factor in link engagement. Studies from multiple social media platforms show that links with a strong, relevant image generate substantially higher click-through rates than links shared without a preview image. A well-designed OG image is the single most impactful visual asset for a piece of content that will be shared online.
The Universal Standard: 1200×630px
The OG image standard was established by Facebook's Open Graph protocol and has since been adopted by virtually every major platform. The recommended size is 1200×630 pixels, which gives an aspect ratio of approximately 1.91:1.
This size was chosen because it displays at sharp quality on both standard displays and retina / high-DPI screens. The 1200px width means that when a platform displays the image at its maximum preview width (typically 500–600px), the image is still being downscaled rather than upscaled — preserving sharpness and quality.
The minimum accepted size across most platforms is 600×315px. Images below this threshold may not display as large-format previews — Facebook and LinkedIn will fall back to a small thumbnail treatment rather than the full-width card layout. Always use 1200×630px.
Platform-by-Platform Display Table
| Platform | Display size | Notes |
|---|---|---|
| 1200 × 630 px | Official recommended size. Displays as full-width card on both desktop and mobile. | |
| Twitter / X | 1200 × 628 px (spec) | 1200×630 works fine — the 2px difference is not visible. Use summary_large_image card type. |
| 1200 × 627 px (spec) | 1200×630 works fine. LinkedIn compresses images heavily — use PNG for text clarity. | |
| Slack | 1200 × 628 px | Slack respects og:image and displays full-width previews in channels. |
| Discord | 400 × 300 px (minimum) | 1200×630 works and displays as a large embed. Discord crops to 16:9 ratio. |
| iMessage / SMS | 800 × 600 px (minimum) | 1200×630 works. iOS Link Preview uses og:image for rich link cards. |
| 300 × 200 px (minimum) | 1200×630 is displayed as a small square thumbnail — center your design. |
Text Safe Zone: Keep Content Away from Edges
Different platforms crop and resize OG images slightly differently. Facebook may show the full 1200×630px. Twitter may crop a few pixels. Mobile devices may letterbox the image in different ways. To guarantee that no important content is cut off on any platform, keep all text and logos at least 50 pixels from every edge of the 1200×630px canvas.
This gives you a safe working area of 1100×530 pixels in the center of the canvas. Position your article title, site name, logo, and any other critical content inside this zone. Use the outer 50px border only for background color, gradient, or decorative elements that can be cropped without losing meaning.
A common mistake is placing the site name or logo in a corner — the bottom-right is a particularly risky position because some platforms display small icons or timestamps in that area of the preview. Center your most important elements or position them in the upper-left quadrant of the safe zone.
What to Put on an OG Image
An effective OG image communicates three things at a glance: what the content is about, that it is worth clicking, and which site it comes from. The best OG images are simple — a clear background, readable title text, and a logo.
Article or page title
The most important element on an OG image is the title of the content being shared. Use bold, readable text — at least 60–80px at 1200×630px resolution. Keep the title to 8–12 words maximum. If the full title is longer, shorten it to the most compelling version. The title in the OG image does not need to match the HTML title tag exactly — optimize it for visual impact at the preview size.
Site name and logo
Include your site name or logo so viewers know immediately where the link goes. This is especially important for building brand recognition — when people repeatedly see your OG images in feeds, they start recognizing your visual identity and are more likely to click. Position the logo or site name in the same location on every OG image for consistency.
Background: brand color or relevant image
The background of your OG image should reinforce your brand identity. A consistent background color — your primary brand color — makes all your shared links visually recognizable in feeds. Alternatively, a relevant photograph behind a semi-transparent overlay creates a more editorial look. Avoid complex, high-detail backgrounds without an overlay — text legibility is always the priority.
Optional: category badge or metadata
Some publications include a category label (e.g., "Guide", "Tutorial", "News") or a publication date on their OG images. This adds context that can improve click-through in professional contexts like LinkedIn. However, keep this information small and in a corner — it should not compete with the title for attention.
How the og:image Meta Tag Works
The OG image meta tag is part of the Open Graph protocol — a set of HTML meta tags originally developed by Facebook to standardize how web content is previewed across social platforms. The core tags needed for a functional link preview are:
<!-- Required for all platforms -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief description of the content.">
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yoursite.com/the-page/">
<!-- Twitter-specific (also reads og: tags as fallback) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yoursite.com/og-image.png">
The og:image:width and og:image:height tags are optional but strongly recommended. Without them, Facebook and some other platforms must download the full image to determine its dimensions before rendering the preview — which slows down the crawl and can result in the image not displaying on first share.
Twitter reads og:image as a fallback but has its own tag system. The twitter:card tag set to summary_large_image is what causes Twitter to display the large full-width image format rather than a small thumbnail in the corner of the card.
Common OG Image Mistakes
- Using the wrong aspect ratio (1:1 or 16:9). A square (1:1) OG image will be displayed with black bars or cropped on platforms expecting the 1.91:1 ratio. A widescreen 16:9 image (1920×1080px) gets its top and bottom cropped. Always design at 1200×630px — the 1.91:1 ratio is the only universally correct option.
- Too much text, too small to read. OG images display at 500–600px width in most feed contexts. Text smaller than 40px at 1200×630px will be illegible in the preview. Focus on one headline and one site name — not paragraphs of content.
- No branding — the image looks like stock art. An OG image without a logo or site name provides no brand recognition benefit. Every time your link is shared, the preview should visually reinforce where it comes from.
- Using a generic site-wide OG image for all pages. A single OG image shared across all pages means every link preview looks identical, regardless of the content. Create unique OG images per page — or at minimum per content category — so shared links give viewers accurate visual context for what they are about to click.
- Not testing with social media debugger tools. Social platforms cache OG image data. If you update an og:image without clearing the cache, shared links may continue showing the old image. Use platform debugger tools (Facebook Sharing Debugger, Twitter Card Validator) to force a fresh fetch and confirm the new image displays correctly.
- Using a relative URL in the og:image content attribute. The og:image URL must be an absolute URL (starting with https://). Relative paths like /og-image.png will not work — crawlers fetching your page from external servers cannot resolve relative paths. Always use the full URL: https://yoursite.com/og-image.png.
How to Test Your OG Image
After adding or updating your OG image, test it with the official debugger tools from each major platform before widely sharing the link:
Facebook Sharing Debugger
developers.facebook.com/tools/debug
Shows exactly how your link will appear on Facebook. Also clears cached data if your og:image has changed.
Twitter Card Validator
cards-dev.twitter.com/validator
Validates Twitter card tags and shows a preview of how the card will display. Requires Twitter login.
LinkedIn Post Inspector
linkedin.com/post-inspector
Shows the LinkedIn link preview and reports any issues with Open Graph tags.
OpenGraph.xyz
opengraph.xyz
Third-party tool that previews your OG image across Facebook, Twitter, LinkedIn, and Discord simultaneously.
How to Create an OG Image for Free
The fastest way to create an OG image at exactly 1200×630px — with the correct safe zone guides visible — is to use a browser-based tool. No download, no account, no subscription required.
- Open the OG Image Generator — pre-set to 1200×630px
- Choose a background color matching your brand or upload a background photo
- Add your page title in bold text (8–12 words maximum)
- Add your site name or logo in a corner
- Keep all text inside the 50px safe margin from every edge
- Download as PNG — upload to your server and update the og:image URL
- Test with Facebook Sharing Debugger to confirm it displays correctly
Free browser-based tool — no account required
Create OG Image Free →Frequently Asked Questions
What is the correct OG image size in 2026?
1200×630 pixels is the correct OG image size in 2026. This is the universal standard that displays correctly on Facebook, Twitter, LinkedIn, Slack, Discord, and iMessage. The aspect ratio is 1.91:1. A minimum of 600×315px is accepted, but 1200×630px is strongly recommended for sharp display on retina screens.
What is an OG image?
An OG image (Open Graph image) is the preview image that appears when a URL is shared on social media. It is defined with <meta property="og:image" content="https://yoursite.com/og-image.png"> in the HTML head. Without it, social platforms try to find an image automatically, often with poor results.
Is the OG image size the same for Twitter and Facebook?
Yes. 1200×630px works correctly on both platforms. Twitter technically specifies 1200×628px but in practice displays 1200×630px images without any visible cropping. Use 1200×630px as your single OG image — it works across all major platforms.
How do I add an OG image to my website?
Add <meta property="og:image" content="https://yoursite.com/og-image.png"> to your HTML head. Also add the width and height tags: <meta property="og:image:width" content="1200"> and <meta property="og:image:height" content="630">. For Twitter, additionally add <meta name="twitter:card" content="summary_large_image"> and <meta name="twitter:image" content="...">.
How do I test my OG image?
Use Facebook Sharing Debugger (developers.facebook.com/tools/debug), Twitter Card Validator (cards-dev.twitter.com/validator), and LinkedIn Post Inspector (linkedin.com/post-inspector). These tools fetch your URL and show exactly how your link preview will appear — and can clear cached images if you have updated your og:image.
What should I put on an OG image?
Include: the page or article title in large bold text (8–12 words max), your site name or logo for brand recognition, and a clear background — brand color, gradient, or photo with overlay. Keep all text at least 50px from the edges to prevent cropping across platforms.
Related Tools
- OG Image Generator — 1200×630px with safe zone guides
- YouTube Thumbnail Maker — 1280×720px instant download
- Twitter Header Maker — 1500×500px profile banner
- LinkedIn Banner Maker — 1584×396px professional banner
Written by Alex Kim
Alex Kim is an indie developer and content creator who built ClickThumb after years of fighting clunky design tools to make thumbnails every week. He writes about thumbnail design, YouTube CTR, and the exact image sizes every platform expects — based on what actually moves the needle for creators, not design theory. More about Alex →