Social Media Link Preview Image Size
Use 1200×630 px for most social link previews. Learn platform differences, Open Graph code, troubleshooting, compression, and reliable screenshot workflows.
Use a 1200 × 630 pixel image (about 1.91:1) as the practical default for social media link previews. Save it as a compressed JPEG or PNG, keep important text, logos, and faces away from the edges, and publish it at an absolute HTTPS URL. Add og:image:width and og:image:height in the server-rendered HTML. For X’s wide card, set twitter:card to summary_large_image.
The same file can be cropped or displayed differently on each platform. Treat 1200 × 630 as a shared starting point, not a guarantee that every network uses identical dimensions.
Recommended image size at a glance
| Setting | Recommendation |
|---|---|
| Canvas | 1200 × 630 px |
| Aspect ratio | Approximately 1.91:1 |
| Format | JPEG for photos; PNG for sharp graphics or transparency |
| URL | Absolute, publicly reachable HTTPS URL |
| File size | Keep it modest; under 300 KB is a useful cross-platform target when quality permits |
| Safe area | Keep essential content away from every edge because cards crop differently |
| HTML location | Initial server response, before client-side hydration |
Why 1200 × 630 works
Facebook and LinkedIn are commonly documented or reported around the 1.91:1 landscape ratio. A 1200-pixel width gives enough detail for large cards while remaining easy to compress. X’s large image card uses a 2:1 presentation, so a 1200 × 630 file may lose a small amount at the top or bottom. Designing with an edge-safe margin makes that crop less noticeable.
Slack and Discord do not publish exact link-preview image dimensions in the reviewed September 2026 guide. Apple Messages is reported to require at least 900 pixels of width, while WhatsApp is reported to require at least 300 pixels, a ratio of 4:1 or narrower, and a file below 600 KB. These platform figures are reported guidance and can change; verify a platform’s current documentation when exact compliance matters.
Platform-by-platform guidance
| Platform | Reported behavior | What to do |
|---|---|---|
| 1200 × 630 recommended; 600 × 315 for a large layout; 200 × 200 absolute minimum; reported 8 MB limit | Use the default and declare width and height | |
Reported 1200 × 627 minimum, 1.91:1, and 5 MB limit; reads og:image |
Use 1200 × 630 and compress it | |
| X large image card | 300 × 157 minimum, 4096 × 4096 maximum, 2:1, under 5 MB; formats reported as JPG, PNG, WebP, and first GIF frame | Set summary_large_image and leave crop room |
| Slack | No exact public dimensions identified; reads Open Graph, Twitter Card, and oEmbed data | Use the shared default and inspect an actual unfurl |
| Discord | No exact public dimensions identified | Use the shared default and protect edge content |
| Apple Messages | Reported minimum width of 900 px | A 1200-pixel-wide image exceeds that reported minimum |
| Reported minimum width 300 px, 4:1 or narrower, under 600 KB; metadata should appear within the first 300 KB of HTML | Compress aggressively and emit metadata early |
Open Graph and Twitter Card markup
Put these tags in the <head> of the HTML returned by your server. Crawlers may not execute JavaScript, so adding them only after hydration can produce a missing or stale preview.
<head>
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A concise description of the page.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://cdn.example.com/social/page-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your page title">
<meta name="twitter:description" content="A concise description of the page.">
<meta name="twitter:image" content="https://cdn.example.com/social/page-1200x630.jpg">
<meta name="twitter:image:alt" content="Description of the preview image">
</head>Generate and validate the asset
- Create a 1200 × 630 composition with a visible safe margin.
- Export a JPEG for photographic artwork or PNG for line art, transparency, and text-heavy graphics.
- Inspect the encoded file dimensions, MIME type, and byte size.
- Serve it without authentication, hotlink blocking, bot challenges, or redirects that prevent crawlers from fetching it.
- Open the page’s initial HTML with a plain HTTP client and confirm the tags are present before any scripts run.
curl -L -s https://example.com/page | head -c 300000For a production check, parse the returned HTML and assert that og:image is absolute HTTPS, the dimensions are numeric, and the image URL returns a successful response with an image content type.
Designing for crops and readability
- Keep headlines, logos, and faces inside an inner margin of roughly 60–80 pixels.
- Use strong contrast and a simple focal point; previews are often small.
- Do not put critical information only in the bottom or right edge, where platform crops commonly remove it.
- Use a page-specific image when practical instead of repeating a generic site logo.
- Keep text short enough to remain legible on mobile cards.
Common failures and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| No image appears | Relative URL, private host, robots or hotlink restriction, or bot challenge | Use an absolute public HTTPS URL and fetch it from an unauthenticated client |
| Old image still appears | Platform preview cache | Use the platform’s re-scrape or inspector tool after changing metadata |
| Title or image differs from the page | Tags are missing from initial HTML or duplicated with conflicting values | Render one authoritative set on the server and inspect the raw response |
| Image is cropped badly | Important artwork touches the edges or X uses a different ratio | Move essential content inward and preview at both 1.91:1 and 2:1 |
| Preview is rejected | File exceeds a platform limit or uses an unsupported format | Compress, try JPEG or PNG, and stay below the strictest target limit |
| WhatsApp shows no preview | Metadata appears too late in a large HTML response | Emit Open Graph tags near the beginning of the document |
| Image request times out | Slow image origin, excessive redirects, or an application-generated response | Serve a static CDN asset with a short redirect chain |
Performance, reliability, and cost
A static image on a CDN is usually more reliable than generating a new image during every crawler request. Set long cache headers for versioned filenames, use responsive compression, and avoid blocking crawlers with JavaScript challenges. If you change an image at the same URL, caches can keep the old version; a versioned filename or query string makes invalidation explicit.
Use JPEG quality appropriate to the artwork rather than an unnecessarily large PNG. Keep the HTML metadata early and small. Monitor image response status, content type, latency, and cache hit rate. A preview crawler may retry, so your origin should tolerate repeated unauthenticated GET requests.
Or skip the browser setup
If you need to create preview images from live pages, ScreenshotNeo provides a single screenshot request that returns PNG, JPEG, WebP, or PDF. Cookie and consent banners are accepted and removed before the shot, along with 60+ known consent platforms, newsletter popups, and chat widgets. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing result.
See the ScreenshotNeo documentation for all options, including full-page capture, CSS selectors, dark mode, device presets, retina scale, custom CSS and JavaScript, waits, blocked resources, headers, cookies, geolocation, resizing, caching, signed links, async jobs, webhooks, bulk capture, and usage reporting.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also includes an MCP server so Claude, Cursor, and other MCP clients can call take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.
FAQ
Is 1200 × 630 mandatory?
No. It is the broad-compatibility default. Individual platforms can crop, resize, or impose different limits.
Should I use WebP?
Use it only when the target platform is known to accept it. JPEG and PNG remain the safer interoperable choices for link previews.
Do dimensions in the meta tags resize the image?
No. They describe the actual asset and help crawlers interpret it. The file itself should be generated at the declared dimensions.
Why does changing the image URL not update a post?
Social platforms cache previews. Re-scrape the URL with the platform’s debugging tool or wait for its cache to expire.
Can client-side JavaScript insert the tags?
It can, but crawlers may miss them. Server-render the metadata in the initial response.
