The Complete Guide to Open Graph Images: Why Your Link Preview Looks Broken (And How to Fix It)
You spend hours crafting the perfect blog post. You write a compelling headline, design a beautiful featured image, and hit publish. Then you share the link on WhatsApp, and the preview looks like a disaster. The logo is cut in half. The headline is invisible behind a dark overlay. The image is stretched into a square. Nobody clicks. Nobody even reads the headline. This happens thousands of times every day because most people never test their Open Graph image before publishing.
An Open Graph image is the picture that appears when someone shares your link on social media, messaging apps, and productivity tools like Slack, Discord, and Notion. It is defined by a meta tag called og:image that lives in the <head> section of your HTML page. When a platform like WhatsApp or LinkedIn reads that tag, it fetches the image and displays it in a preview card. The problem is that every platform crops, scales, and overlays that image differently. What looks perfect on Facebook looks terrible on Twitter. What works on LinkedIn fails on WhatsApp.
This tool exists to solve that problem. Upload your Open Graph image, and we show you exactly how it will render on WhatsApp, Twitter/X, and LinkedIn. We overlay a safe zone that shows which part of your image survives cropping on every platform. We check your aspect ratio, your file size, and your dimensions against each platform's known requirements. You see the truth before you publish, not after.
The recommended Open Graph image size is 1200 × 630 pixels with a 1.91:1 aspect ratio. This single size works across Facebook, LinkedIn, Twitter/X, Slack, Discord, and most other platforms. Twitter/X accepts 1200 × 628 for its large image card, and LinkedIn displays 1.91:1 images without cropping on mobile. WhatsApp is stricter: Meta's own documentation requires the og:image to be under 600 KB, at least 300 pixels wide, and no wider than a 4:1 ratio. In practice, images over 300 KB often fail silently on mobile data, and the preview renders with no image at all. Keep your file light.
What Are Open Graph Tags and Why Do They Matter?
Open Graph is a protocol that Facebook introduced in 2010 to standardize how web pages describe themselves to social platforms. Before Open Graph, every platform scraped pages differently, guessing at titles and images with inconsistent results. Open Graph changed that by letting you explicitly declare your page's title, description, image, type, and URL using meta tags in your HTML.
When a user shares your link, the platform reads your Open Graph tags and builds a preview card. The og:title becomes the headline. The og:description becomes the summary text. The og:image becomes the thumbnail. If you omit these tags, the platform falls back to scraping your page, which usually produces ugly results: the wrong image, a truncated title, or no preview at all.
Open Graph tags directly affect click-through rates. A well-designed preview with a clear image, readable title, and compelling description can double or triple your click-through rate compared to a broken preview. The preview is the first impression your content makes. If it looks unprofessional, users assume your content is unprofessional too.
Quick tip: If your image is too heavy for WhatsApp, compress it first with our free
Image Compressor. If it has the wrong dimensions, resize it with the
Image Resizer before uploading here.
The Safe Zone Rule That Saves Your Preview
Different platforms crop Open Graph images in different ways. Twitter/X trims the edges slightly. LinkedIn's mobile feed may show a square-ish crop. WhatsApp might display a small square thumbnail instead of the full landscape image. Designing for the lowest common denominator means keeping important content in the center.
Here is the rule that works across all platforms: on a 1200 × 630 canvas, keep everything that must be read at least 60 pixels from every edge. That clears Twitter's edge trim, mobile feed cropping, and the rounded corners that most clients draw over the image. Also keep the bottom 115 pixels clear of readable text, because that is where Twitter/X places its overlay band at its worst.
If you want a single composition that survives everything, center your logo mark or product shot inside the middle 630 × 630 square (columns 285 to 915). That square is all a LinkedIn organic reader sees in some views, all a Twitter summary card shows, and all WhatsApp's small preview keeps. Everything outside that square is decoration, not information.
Platform-Specific Specifications (October 2026)
WhatsApp Link Preview Requirements
WhatsApp is the most widely used messaging app in the world, and it is also the strictest about Open Graph images. The platform requires the og:image URL to be absolute (starting with https://), not relative. The image must be publicly accessible without authentication. The file must be under 600 KB, and community testing shows that images under 300 KB deliver reliably even on slow mobile data. The minimum width is 300 pixels. The aspect ratio must be no wider than 4:1.
WhatsApp shows two types of previews. A large preview appears when the image passes all checks and the page has a valid title and description. A small square thumbnail appears when the image is too heavy, too small, or has an unusual aspect ratio. You cannot control which preview appears directly, but you can maximize your chances of getting the large preview by following the rules above.
Twitter/X Card Requirements
Twitter/X uses its own card system alongside Open Graph. The twitter:card meta tag must be set to summary_large_image for a large image preview. The recommended image size is 1200 × 628 with a 2:1 aspect ratio. The minimum size is 300 × 157. Below that, Twitter silently downgrades to a small summary card with a tiny thumbnail. The maximum file size is 5 MB. Supported formats are JPG, PNG, WebP, and GIF (first frame only).
Twitter/X trims the edges of images that do not match the 2:1 ratio. If your image is 1.91:1, Twitter accepts it but may add small side padding. If your image is square or portrait, Twitter crops the top and bottom, which can cut off faces and headlines. Always test with this tool before publishing.
LinkedIn Open Graph Image Requirements
LinkedIn recommends 1200 × 627 pixels with a 1.91:1 ratio. The minimum width is 200 pixels. Images narrower than 200 pixels appear as small thumbnails instead of large previews. The maximum file size is 5 MB. Supported formats are JPG, PNG, and GIF.
LinkedIn behaves differently on desktop and mobile. On desktop, LinkedIn crops images to 1.91:1. On mobile, LinkedIn does not crop images with odd ratios; it displays the full image with white padding on the sides. This means a square image looks fine on mobile LinkedIn but gets cropped on desktop. The safest approach is still to design for 1.91:1.
How to Implement Open Graph Tags Correctly
Your page needs these tags in the <head> section. Each value must be accurate and human-reviewed, because search engines and social platforms now penalize misleading metadata.
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A clear, concise description." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page/" />
<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="Description of the image" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A clear, concise description." />
<meta name="twitter:image" content="https://example.com/og-image.png" />
The og:image URL must be absolute (start with https://). Relative paths fail on most platforms. The image file must be publicly accessible without cookies or authentication. If you use a CDN, make sure the CDN does not block social platform crawlers.
Always include og:image:width and og:image:height. These tags tell platforms the image dimensions before downloading it, which speeds up preview rendering and prevents layout shifts. Use the Image Resizer to get exact dimensions if your source image is off-spec.
Common Mistakes That Break Previews
- Relative image URL:
/images/og.png fails. Use https://yoursite.com/images/og.png.
- Image too heavy: WhatsApp silently drops images over ~300 KB on mobile data. Compress before uploading with our Image Compressor.
- Text near edges: Crop marks don't lie. If your headline sits within 60px of the edge, it will be cut somewhere.
- Missing
twitter:card: Without this tag, Twitter may skip the preview or show a small summary card instead of a large image.
- Wrong format: Some platforms reject WebP or AVIF. Use JPG or PNG for maximum compatibility. Convert with our Bulk JPG to PNG Converter.
- Stale cache: Platforms cache previews. If you change your image, use a new URL or append a version query string (
?v=2) to force a refresh.
Why Testing Before Publishing Matters
You would not publish a blog post without previewing it. You would not send an email without checking the subject line. Yet most people publish Open Graph images without ever checking how they look on the platforms where their audience actually lives. This tool closes that gap. It gives you a live preview, a safe zone overlay, and a platform-specific recommendation in seconds.
The tool runs entirely in your browser. Your image never uploads to a server. No account, no signup, no watermark. Use it as many times as you want, on as many images as you want. According to Meta's official sharing documentation, Open Graph images should follow the 1.91:1 ratio and stay under 8 MB. According to X's card documentation, the summary_large_image card requires images of at least 300 × 157 pixels. These are the same requirements this tool checks against.
Frequently Asked Questions
What is an Open Graph image?
An Open Graph image is the picture that appears when someone shares a link on social media or messaging apps. It is defined by the og:image meta tag and typically uses a 1.91:1 aspect ratio, such as 1200 × 630 pixels.
Why does my Open Graph image get cropped on WhatsApp?
WhatsApp may display a large preview or a small square thumbnail depending on image size, aspect ratio, and file weight. Images with important content near the edges risk having that content cut off. Keeping text and logos inside the safe zone prevents this.
What is the recommended Open Graph image size?
The most widely supported size is 1200 × 630 pixels with a 1.91:1 aspect ratio. This works across Facebook, LinkedIn, Twitter/X, and most other platforms. Twitter/X accepts 1200 × 628 with a 2:1 ratio for large image cards.
What is a safe zone in an Open Graph image?
A safe zone is the central area of an image that survives cropping across different platforms. For a 1200 × 630 image, keep important content at least 60 pixels from every edge and avoid placing readable text in the bottom 115 pixels.
Does LinkedIn crop Open Graph images?
LinkedIn displays images at a 1.91:1 ratio on desktop and mobile. Images narrower than 200 pixels appear as small thumbnails instead of large previews. On mobile, LinkedIn does not crop images with different ratios; it adds white padding instead.
Does my image upload to a server?
No. The Open Graph Preview Generator processes everything locally in your browser. Your image never leaves your device.
Can I use this tool on my phone?
Yes. The tool works in mobile browsers including Chrome, Safari, and Firefox on iOS and Android.
What image formats are supported?
The tool accepts JPG, PNG, and WebP images. These are the same formats supported by major social platforms for Open Graph previews. Convert with our All-in-One Image Converter if needed.
Why is my preview blank or missing?
Make sure your image URL is absolute (starts with https://), the image file is publicly accessible, and the file size is under 5 MB. WhatsApp specifically requires images under 600 KB for reliable previews.
Does the tool add a watermark?
No. The tool does not modify your image or add any branding. It only displays a preview with an overlay.
Related Tools
Explore more free image tools on ImageFix Tools:
