Use a 1200 × 630 pixel image (about 1.91:1) as your general-purpose social link preview. Save it as JPEG or PNG, publish it at an absolute HTTPS URL, and keep important text, logos, and faces away from the edges. Add og:image:width and og:image:height in the server-rendered HTML. For X’s wide card, also set twitter:card to summary_large_image. This combination is broadly compatible, but platforms still crop and resize previews differently.
Why 1200 × 630 is the safest default
A 1200 × 630 asset is roughly 1.91:1, matching the ratio commonly recommended for Facebook and LinkedIn. It is large enough for sharp rendering on high-density screens while remaining easy to compress below common file-size limits. X’s large image card uses a 2:1 presentation, so a 1200 × 630 image may lose a narrow strip at the top or bottom. Keep your headline, logo and subject inside a central safe area rather than hard against the canvas edge.
There is no single universal preview specification. A platform can choose a different card, crop, thumbnail size or cache copy even when your metadata is correct. Treat 1200 × 630 as a practical shared starting point, not a guarantee of identical output everywhere.
Recommended metadata
Place these tags in the initial HTML returned by your server, inside <head>. Do not rely on client-side JavaScript or a framework hydration step to insert them; many crawlers do not execute that code before generating a preview.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minute#1 Best Overall
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A concise description of the page.">
<meta property="og:image" content="https://example.com/images/article-social.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<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://example.com/images/article-social.jpg">Use an absolute URL beginning with https:// for the image. The file must be publicly fetchable without a login, cookie challenge, robots block, hotlink restriction or an interstitial redirect. Supplying width and height makes the intended asset explicit and can help a crawler reserve the correct layout.
Platform-by-platform dimensions and limits
The following figures are reported by a cross-platform guide updated in September 2026. They are useful implementation targets, but platform rules can change; where a service does not publish an exact value, the table says so rather than treating observations as guarantees.
| Platform | Reported requirement or behavior | What to do |
|---|---|---|
| At least 1200 × 630 recommended; 600 × 315 for a large layout; 200 × 200 absolute minimum; reported 8 MB limit. | Export at 1200 × 630, declare both dimensions, and keep the file comfortably below 8 MB. | |
1200 × 627 minimum, 1.91:1; reported 5 MB limit; reads og:image. |
A 1200 × 630 image is close to the reported dimensions. Compress below 5 MB. | |
| X large image card | 300 × 157 minimum, 4096 × 4096 maximum; 2:1; under 5 MB. JPG, PNG, WebP and the first frame of GIF are reported; SVG is not. | Set summary_large_image and expect a slight crop from 1200 × 630. |
| Slack | No exact image dimensions or file limit are published in the reviewed guide. It reads Open Graph, Twitter Card and oEmbed data. | Use the shared default and inspect an actual unfurl when layout is important. |
| Discord | No exact public link-embed dimensions were identified in the guide. | Use 1200 × 630 and protect the outer edges from essential content. |
| Apple Messages | At least 900 px wide is reported; page, image and icon budgets also apply. | A 1200 px-wide image exceeds that reported minimum. Keep metadata early and serve it over HTTPS. |
| At least 300 px wide, 4:1 or narrower, under 600 KB; metadata is reported to need to appear within the first 300 KB of HTML. | Compress aggressively, keep the image no wider than necessary, and emit metadata near the start of the document. |
Designing an image that survives cropping
Use a central safe area
Leave generous padding on every side. A headline that touches the bottom edge may disappear in X’s 2:1 crop or in a narrow mobile card. Place faces, product screenshots and logos toward the center, and treat the outer 10–15 percent as expendable background.
Choose the format and compression
JPEG is usually efficient for photographs and gradients. PNG is preferable for flat-color graphics, transparency or crisp text, but can become unnecessarily large. WebP is reported for X, yet JPEG or PNG remains the least surprising cross-platform choice. The guide suggests under 300 KB as a practical shared target; WhatsApp’s reported limit is under 600 KB, while LinkedIn and X are reported at 5 MB and Facebook at 8 MB.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Rank #2
Create page-specific artwork
Use an image that reflects the linked page rather than repeating a site-wide logo. A page-specific visual gives people context when the title is truncated and helps you identify the correct card when several URLs are shared.
Implementation checklist
- Export a 1200 × 630 JPEG or PNG and check its byte size.
- Upload it to a stable, publicly reachable HTTPS URL.
- Emit
og:image,og:image:width(1200) andog:image:height(630) in the server’s initial HTML. - Use the same canonical page URL in
og:url; do not point every page at one generic URL. - Add
twitter:card=summary_large_imagewhen you want X’s wide image treatment. - Share the URL in each target platform and inspect the actual crop on desktop and mobile.
- After edits, request a re-scrape in Facebook Sharing Debugger or LinkedIn Post Inspector where available. Other services may retain cached metadata on their own schedule.
Why a correctly sized image may still not appear
The crawler cannot see the tags
View the raw server response, not only the browser’s post-hydration DOM. If the Open Graph tags are added after JavaScript runs, a crawler may record no image. Move them into the initial document head.
The image URL is not fetchable
Open the exact URL in an incognito window and with a command-line HTTP client. Check DNS, TLS, redirects, authentication, robots rules, hotlink protection and bot challenges. Return an image content type and a successful response without requiring cookies.
The file is too large or unsupported
Re-encode as JPEG or PNG, reduce quality or dimensions, and verify the resulting byte size. An enormous PNG can exceed a platform limit even when its pixel dimensions are perfect.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →You are seeing stale cache data
Preview services cache both HTML and images. Re-scrape with the platform’s debugger after changing the URL or metadata, then wait for services without a manual refresh tool. Changing only the image file behind the same URL may leave the old image cached; a versioned filename is more reliable.
The platform selected a different card
Ensure twitter:card is present for X and that no conflicting tags or redirects point to another page. Slack and Discord may choose their own layout because they do not publish exact image dimensions in the reviewed guidance.
Testing before publishing
- Fetch the page with JavaScript disabled and confirm every required tag is present in the first response.
- Fetch the image URL without an authenticated session and verify its status, content type and size.
- Check that the declared 1200 × 630 dimensions match the actual file.
- Preview the design at a 2:1 crop to simulate X and at a narrow thumbnail to find unreadable text.
- Test a URL with query parameters and redirects if your production sharing links use them.
Automating screenshot checks with ScreenshotNeo
If you want a repeatable visual check of the rendered page, ScreenshotNeo is a website screenshot API and MCP server. It accepts the consent banner as a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; each step can be disabled. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients.
Or skip the browser setup
Call the API directly (see the ScreenshotNeo documentation):
Free tools Windows power users keep installed
One-click scans. No signup required.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/article"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/article' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo supports full-page captures with lazy images loaded, CSS-selector element captures, dark mode, device presets and custom viewports, retina scale, PDF output, custom CSS and JavaScript, click actions, waits, request blocking, headers, cookies, user agents, authorization, timezone and geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify migration.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account to try it.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Cost and reliability considerations
Generate one social image per page and cache it at a stable URL rather than rendering a new asset for every share. Keep image generation separate from preview fetching: a crawler should receive a finished file immediately. For high-volume sites, monitor response headers, cache hit behavior and failed-load verdicts so you can distinguish a platform cache from an origin problem.
FAQ
Is 1200 × 630 mandatory?
No. It is the broad-compatibility default. Each service can crop, resize or impose a different minimum, and Slack and Discord do not publish exact dimensions in the reviewed guidance.
Should I use one image for every social network?
One 1200 × 630 master is practical, but create platform-specific variants when a crop would remove essential information or when a channel has a strict file budget.
Does adding width and height resize the file?
No. Those Open Graph tags describe the asset; they do not alter its pixels or compression. Resize and re-encode the image itself when necessary.
Frequently Asked Questions
Can I use a square image for link previews?
Only as a fallback. A square may be accepted by some services, but it gives up the wide-card area and is more likely to be cropped unpredictably. A 1200 × 630 master is safer.
Will changing the image URL immediately update every preview?
Not necessarily. Crawlers cache metadata and images. Use a platform re-scrape tool where available or publish a versioned image URL, then allow other services to refresh.
The Bottom Line
Start with a 1200 × 630 JPEG or PNG, expose it through an absolute HTTPS URL, and place complete Open Graph metadata in the initial HTML. Design for safe cropping, compress for the strictest destination, and re-scrape or inspect each platform after changes.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
