OG Image Guide: Sizes, Formats, and How to Test Your og:image
The og:image tag is the most visible part of any link preview. When your image is missing, cropped, or the wrong size, your shared links lose clicks. This guide covers the exact dimensions, file formats, and size limits for every major platform, plus how to use an og image checker to verify everything works before you share.
Why og:image Matters
Link previews with images get dramatically more engagement than those without. The image is the largest visual element in any social media card — it is what users see first when scrolling through their feeds. A broken or missing og:image means your link blends into the noise.
The og:image tag tells platforms exactly which image to use. Without it, crawlers attempt to find a suitable image on the page, often picking a logo, an ad, or nothing at all. Taking control of your og:image ensures every shared link represents your content the way you intend.
Image Dimensions Per Platform
Each platform has its own ideal image dimensions, but one size works well across all of them.
Facebook link share: 1200 x 630 px, 1.91:1 ratio, minimum 600 x 315. Small card: 200 x 200 px, 1:1 ratio.
Twitter/X summary_large_image: 1200 x 628 px, ~1.91:1 ratio, minimum 300 x 157. Summary card: 144 x 144 px, 1:1 ratio.
LinkedIn link share: 1200 x 627 px, 1.91:1 ratio, minimum 200 x 200.
WhatsApp link preview: 1200 x 630 px, 1.91:1 ratio, minimum 300 x 200.
Discord embed: 1200 x 630 px, 1.91:1 ratio, no specified minimum.
Slack unfurl: 1200 x 630 px, 1.91:1 ratio, no specified minimum.
The universal safe size is 1200 x 630 pixels. This works on every platform and produces a large, high-quality preview card.
Aspect Ratio: 1.91:1 Explained
The 1.91:1 aspect ratio means the image is roughly twice as wide as it is tall. The math: 1200 / 630 = 1.904, which rounds to 1.91:1.
This ratio originates from Facebook's large link preview card format and has since been adopted by LinkedIn, WhatsApp, and Twitter's summary_large_image card. If your image does not match this ratio, platforms will crop it — typically from the center.
Design tips for 1.91:1 images:
Keep key content (text, logos, faces) within the center 80% of the image. Avoid placing text near edges — different platforms crop differently. Test at both 1200 x 630 and 600 x 315 to check how the image looks at reduced sizes. Use a tool like PreviewOG to preview exact cropping per platform.
File Size Limits
Facebook: Maximum 8 MB, recommended under 1 MB.
Twitter/X: Maximum 5 MB, recommended under 1 MB.
LinkedIn: Maximum 5 MB, recommended under 1 MB.
WhatsApp: No documented limit, recommended under 300 KB.
Discord: Maximum 8 MB, recommended under 1 MB.
WhatsApp deserves special attention. While there is no published maximum, large images frequently fail to load in WhatsApp previews, especially on mobile connections. Keeping your og:image under 300 KB significantly improves reliability on WhatsApp.
For all platforms, aim for under 1 MB. A well-optimized 1200 x 630 JPEG at 80% quality typically comes in at 100-300 KB.
Supported Formats
JPEG: Supported on Facebook, Twitter/X, LinkedIn, and WhatsApp. The safest choice — universally supported, compresses well for photos, and keeps file sizes small.
PNG: Supported on all platforms. Ideal when your og:image contains text, logos, or graphics with sharp edges. File sizes are larger than JPEG for photographic images.
WebP: Supported on Facebook, Twitter/X, and LinkedIn. Partial support on WhatsApp. Works on most platforms but has occasional compatibility issues, particularly with older WhatsApp clients. If you use WebP, test thoroughly.
GIF: All platforms extract and display only the first frame. Do not use animated GIFs expecting animation in link previews.
SVG and AVIF: Not supported as og:image formats by any major platform.
Absolute HTTPS URLs Required
The og:image URL must be absolute — starting with https://, not a relative path — and served over HTTPS, not plain HTTP.
<!-- Will not work -->
<meta property="og:image" content="/images/og.jpg" />
<meta property="og:image" content="images/og.jpg" />
<meta property="og:image" content="http://example.com/images/og.jpg" />
<!-- Correct -->
<meta property="og:image" content="https://example.com/images/og.jpg" />Relative paths are the most common cause of missing og:image in link previews. Social media crawlers resolve URLs from the og:url base, but behavior is inconsistent across platforms. Always use the full absolute URL to eliminate ambiguity.
Some platforms will follow redirects on the image URL, but this adds latency and may cause timeout failures. Serve the image directly from the URL specified in the tag.
og:image Structured Properties
The OG protocol defines structured sub-properties for images:
<meta property="og:image" content="https://example.com/images/og-guide.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Visual guide showing og:image dimensions for social media" />
<meta property="og:image:secure_url" content="https://example.com/images/og-guide.jpg" />og:image:width and og:image:height — Tell crawlers the image dimensions without downloading the file. Facebook uses these values to render the preview card immediately instead of waiting for async image processing.
og:image:type — The MIME type of the image. Accepted values: image/jpeg, image/png, image/webp, image/gif. Helps crawlers determine how to process the image before downloading.
og:image:alt — Alt text for the image. Improves accessibility for screen reader users browsing social media. Not all platforms expose this, but it is good practice.
og:image:secure_url — The HTTPS version of the image URL. If your og:image already uses HTTPS (which it should), this property is redundant. It exists for legacy compatibility.
Why Specifying Dimensions Matters
When you omit og:image:width and og:image:height, Facebook's crawler must download the image and process it server-side to determine its dimensions. This processing is asynchronous — it does not block the preview generation.
The practical result: the first time someone shares your URL on Facebook, the preview may appear without an image. Facebook has the image in its queue but has not processed it yet. Once processing completes (usually within seconds to minutes), subsequent shares display the image correctly.
By including og:image:width and og:image:height in your meta tags, Facebook can render the preview card layout immediately, knowing exactly how much space the image needs. This eliminates the first-share blank image problem.
<!-- Always include dimensions -->
<meta property="og:image" content="https://example.com/images/og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />Common og:image Problems and Fixes
Image Not Showing in Preview
1. Relative URL: Change to absolute HTTPS URL. 2. HTTP URL: Change to HTTPS. 3. Image too small: Use at least 200 x 200 px (600 x 315 for large cards). 4. Image URL returns 404: Verify the URL is accessible from outside your network (not behind authentication, VPN, or localhost). 5. Image URL times out: Crawler timeout is typically 4-5 seconds. Optimize server response time or use a CDN. 6. Image blocked by robots.txt: Ensure your robots.txt allows platform crawlers to access the image path. 7. JavaScript-rendered tag: OG tags must be in server-rendered HTML. Crawlers do not execute JavaScript.
Wrong Image Showing
1. Cached old image: Clear cache using the platform's debugger tool. See Open Graph Debugger for steps. 2. Multiple og:image tags: Platforms use the first one. Remove duplicates or reorder. 3. No og:image tag: Platform is auto-detecting an image from your page. Add an explicit og:image tag. 4. CDN caching stale version: Purge the image from your CDN or use a new filename.
Image Gets Cropped Badly
1. Wrong aspect ratio: Use 1200 x 630 (1.91:1) for large card previews. 2. Important content at edges: Keep key elements within the center 80% of the image. 3. Using summary card on Twitter: The summary card type uses a square crop. Switch to summary_large_image for 1.91:1 or design a separate square image.
How to Test Your og:image
Step 1: Check With an og Image Checker
Use PreviewOG to enter your URL and see exactly how your og:image renders across Facebook, Twitter/X, LinkedIn, and WhatsApp. This shows you the actual cropping, dimensions, and fallback behavior without sharing a live link.
Step 2: Verify in HTML Source
Confirm your tags are in the server-rendered HTML:
curl -s https://example.com/ | grep 'og:image'You should see your og:image, og:image:width, og:image:height, and og:image:alt tags.
Step 3: Test With Platform Debuggers
Facebook Sharing Debugger: developers.facebook.com/tools/debug/ — Shows the image Facebook has cached and its dimensions. Click "Scrape Again" to refresh.
LinkedIn Post Inspector: linkedin.com/post-inspector/ — Displays the preview LinkedIn will generate. Inspecting clears cache automatically.
Twitter/X: Paste your URL into a tweet draft to trigger a re-crawl and see the card preview.
Step 4: Test Image Accessibility
Verify the image URL is publicly accessible:
curl -I https://example.com/images/og.jpgCheck that the response is 200 OK, the Content-Type is correct (image/jpeg, image/png), and the Content-Length is within platform limits.
Quick Reference
Dimensions Cheat Sheet
Universal safe size: 1200 x 630 px, 1.91:1 ratio. Twitter summary card: 144+ x 144+ px, 1:1 ratio. Facebook minimum (large card): 600 x 315 px, 1.91:1 ratio. Facebook minimum (any card): 200 x 200 px, 1:1 ratio.
Format Decision Guide
Photo or screenshot: use JPEG (smallest file size). Text, logo, or graphic: use PNG (sharp edges, transparency). Universal safe choice: JPEG (best compatibility and size).
Complete og:image Tag Set
<meta property="og:image" content="https://example.com/img/og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Description of the image" />Validation Checklist
og:image uses absolute HTTPS URL. Image is 1200 x 630 px (1.91:1 ratio). File size under 1 MB (under 300 KB for WhatsApp). Format is JPEG or PNG. og:image:width and og:image:height are set. og:image:alt is descriptive. Image URL returns 200 OK. Image is not behind authentication or robots.txt block. OG tags are server-side rendered. Tested with an og image checker.
FAQ
1200 x 630 pixels. This is the universal size that works across Facebook, Twitter/X, LinkedIn, WhatsApp, Discord, and Slack. It produces a large, high-quality preview card on every platform.
The most common causes are: relative URL instead of absolute, HTTP instead of HTTPS, image URL returning 404, image too small (under 200x200), or OG tags rendered by JavaScript instead of server-side. Check your image URL directly in a browser and verify the tags appear in the raw HTML source.
Yes, WebP is supported by Facebook, Twitter/X, and LinkedIn. However, some older WhatsApp clients may not render WebP images. For maximum compatibility, use JPEG.
They are not required by the protocol, but they are strongly recommended. Without dimensions, Facebook must asynchronously process the image, which can cause the first share of a URL to show no image. Specifying dimensions eliminates this delay.
If the file exceeds the platform's limit (8 MB for Facebook, 5 MB for Twitter/X and LinkedIn), the image may not be displayed. Some platforms will timeout if the image takes too long to download. Keep files under 1 MB.
You can set og:image for Facebook/LinkedIn/WhatsApp and twitter:image for Twitter/X. Both tags can point to different URLs. This is useful when you want a landscape image for general sharing and a square image for Twitter summary cards.
Not directly. Search engines do not use og:image as a ranking factor. However, a compelling preview image increases click-through rates from social media, which drives traffic. Google may display og:image in some Discover and search features.