OG Image Resizer Online
Create perfectly sized Open Graph images for Facebook, Twitter/X, LinkedIn, and Discord. Resize & crop to 1200×630 or any platform size. Free, no signup.
Drop your audio file hereTap to choose your file
or
Supports M4A, WAV, FLAC, OGG, AAC, WMA, AIFF, OPUS • Max 100 MB
How to Create an OG Image
Upload
Drop your image into the tool above — a screenshot, photo, illustration, or any graphic. Supports JPG, PNG, WebP, HEIC, and 20+ formats.
Choose Size
Pick a platform preset — Facebook 1200×630, Twitter 1200×628, LinkedIn, or Discord. The image is center-cropped to fit the exact dimensions.
Download
Click Resize & Download and get your OG image ready to use. Upload it to your site and reference it in your <meta> tags.
OG Image Sizes for Every Platform (2026)
Each platform has its own recommended dimensions for link preview images. Using the wrong size results in cropping, blurriness, or the image not appearing at all.
| Platform | Usage | Size (px) | Ratio | Min Size | Max File |
|---|---|---|---|---|---|
| Link Share / og:image | 1200 × 630 | 1.91:1 | 600 × 315 | 8 MB | |
| Twitter / X | summary_large_image | 1200 × 628 | ~1.91:1 | 300 × 157 | 5 MB |
| Twitter / X | summary (square) | 800 × 800 | 1:1 | 144 × 144 | 5 MB |
| Shared Link | 1200 × 627 | 1.91:1 | 200 × 200 | 5 MB | |
| Discord | Embed Preview | 1200 × 630 | 1.91:1 | — | 8 MB |
| Slack | Unfurl Preview | 1200 × 630 | 1.91:1 | — | — |
| Link Preview | 1200 × 630 | 1.91:1 | 300 × 200 | — | |
| Telegram | Link Preview | 1200 × 630 | 1.91:1 | — | 5 MB |
| Rich Pin | 1200 × 630 | 1.91:1 | — | — | |
| Search Snippet | 1200 × 630 | 1.91:1 | 1200 wide | — |
Pro tip: 1200 × 630 pixels works across all platforms. If you only create one OG image per page, use this size. For Twitter summary cards specifically, add a separate 800×800 square image via twitter:image.
What Is og:image? (Open Graph Meta Tags)
og:image is an Open Graph meta tag that tells social platforms which image to display when someone shares a link to your page. Without it, platforms try to auto-detect an image — often picking the wrong one, using a tiny logo, or showing nothing at all.
How Open Graph Works
Facebook created the Open Graph protocol in 2010. When a URL is shared on social media, the platform’s crawler fetches the page and reads <meta property="og:..."> tags from the <head>. The og:image tag specifies the URL of the preview image.
Today, nearly every platform supports Open Graph: Facebook, Twitter/X (with fallback from twitter:image), LinkedIn, Discord, Slack, WhatsApp, Telegram, iMessage, Pinterest, and even Google for rich search results.
Essential og:image Tags
| Tag | Purpose |
|---|---|
og:image | URL of the preview image (required, must be absolute HTTPS URL) |
og:image:width | Image width in pixels (speeds up rendering — platform doesn’t need to download the image first) |
og:image:height | Image height in pixels |
og:image:type | MIME type: image/jpeg, image/png, or image/webp |
og:image:alt | Alt text for accessibility (screen readers, image loading failures) |
Why og:image Matters for CTR
Links with proper preview images get 2–3× higher click-through rates on social media compared to links without images. A missing or broken OG image makes shared links look unprofessional and reduces engagement. Google also uses og:image for article snippets in some search results.
How to Add og:image to Your Website
HTML Meta Tags
Add these tags inside your page’s <head>:
<meta property="og:image" content="https://example.com/og-image.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">
<!-- Also include these for complete previews -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description">
<meta property="og:url" content="https://example.com/page">Twitter Card Tags
Twitter uses its own card tags but falls back to og:image if twitter:image is absent:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description">WordPress
SEO plugins like Yoast, Rank Math, and All in One SEO handle OG tags automatically. Set the “Social Image” or “Facebook Image” field in the post editor. Upload a 1200×630 image specifically for sharing — don’t rely on the featured image, which may have a different aspect ratio.
Next.js (App Router)
// app/page.tsx
export const metadata = {
openGraph: {
title: 'Your Page Title',
description: 'Your page description',
images: [{
url: 'https://example.com/og-image.jpg',
width: 1200,
height: 630,
alt: 'Description of the image',
}],
},
twitter: {
card: 'summary_large_image',
images: ['https://example.com/og-image.jpg'],
},
};Verifying Your OG Image
After adding the meta tags, test with these platform debuggers:
- Facebook: Sharing Debugger (developers.facebook.com/tools/debug/) — click “Scrape Again” to refresh cache
- Twitter: Card Validator (cards-dev.twitter.com/validator)
- LinkedIn: Post Inspector (linkedin.com/post-inspector/)
- General: opengraph.xyz — tests all platforms at once
Common og:image Problems (and How to Fix Them)
Image Not Showing When Shared
Causes: missing og:image meta tag, image URL returns 404, image is too small (under 200×200), or your robots.txt blocks social media crawlers. Fix: verify the image URL loads in a browser, ensure it’s an absolute HTTPS URL, and check that your server doesn’t block the platform’s user agent.
Wrong Image Appears
Platforms cache OG images aggressively (24+ hours). After updating your og:image, use the platform’s debugger tool to force a re-scrape. For Facebook, open the Sharing Debugger and click “Scrape Again”. You can also append a cache-busting parameter to the URL: ?v=2.
Image Gets Cropped Badly
Your image dimensions don’t match the platform’s expected ratio. Fix: resize to 1200×630 and keep important content (text, logos, faces) within the center 80% of the image. Different platforms crop slightly differently at the edges.
Image Looks Blurry
Source image is too small or heavily compressed. Use at least 1200 pixels wide. For retina displays, consider 2400×1260 (2x). Save as JPG quality 80+ or use PNG for graphics with sharp text.
Works on Facebook but Not Twitter
Twitter requires the twitter:card meta tag to be present. Without it, Twitter may not show any image even if og:image is set. Add <meta name="twitter:card" content="summary_large_image"> to enable large image cards.
og:image Best Practices Checklist
og:image:width and og:image:height tags (speeds up rendering)og:image:alt for accessibilityFrequently Asked Questions
og:image:width and og:image:height meta tags so platforms can render the preview faster without downloading the full image first.
og:image meta tag is missing, the image URL returns a 404, the image is smaller than 600×315 pixels, or your robots.txt blocks Facebook’s crawler. Use the Facebook Sharing Debugger (developers.facebook.com/tools/debug/) to diagnose the issue. Click “Scrape Again” to force Facebook to re-fetch your page and clear the cached preview.
og:image is not a direct Google ranking factor, pages with proper OG images get 2–3× higher click-through rates when shared on social media, driving more traffic and engagement signals. Google also uses og:image for article rich snippets in some search results.
<head>: <meta property="og:image" content="https://yoursite.com/image.jpg">. Also include og:image:width (1200) and og:image:height (630) for faster rendering. In WordPress, use Yoast or Rank Math’s social image field. In Next.js, use the metadata export in your page component.