Recommended Free Tools
A 1200 × 630-pixel image is a practical starting point for link previews across major platforms. Pair it with Open Graph metadata, use an absolute HTTPS image URL, and keep important text away from the edges: X’s large card is closer to a 2:1 crop, while LinkedIn documents a 1200 × 627-pixel minimum. The examples below show the markup and explain why one source page can look different in Facebook, X, LinkedIn, Slack, Discord, WhatsApp, and iMessage.
What makes a link preview appear?
When a page is shared, the receiving platform or app fetches page metadata and uses it to build a card. Open Graph fields describe the page’s title, description, URL, type, and image; many crawlers use them to populate the preview. X can use its Twitter Card fields and fall back to Open Graph values. The app’s layout, image crop, fetch behavior, and cache can still make the final card differ.
The most useful preview image is not necessarily the page’s hero image. It is a share-specific graphic composed to remain readable when cropped or displayed at a small size.
Link preview image examples by platform
These examples describe common presentation patterns, not guarantees: layouts and parser behavior can change, and the same metadata may render differently between clients.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Platform or client | Image guidance | Metadata commonly used | Crop and refresh considerations |
|---|---|---|---|
| Facebook / Meta-style card | 1200 × 630 pixels is a practical broad default (OG Image Design, 2026). Exact requirements may vary by product and change over time. | Open Graph: og:title, og:description, og:image, og:url, and og:type. |
A large image may appear above the title and description. Check the current preview using the platform’s inspector; cached values may persist after edits. |
| X large card | The large-card format is close to 2:1. A 1200 × 630 image is slightly wider in height than 2:1, so keep text and key details within a central safe area. | twitter:card=summary_large_image; X may fall back to Open Graph fields. |
The near-2:1 display can trim the edges of a 1.91:1 image. Recheck after changes because crawlers cache fetched metadata. |
| LinkedIn’s current help guidance lists 1200 × 627 pixels as the minimum image dimensions for website sharing. | Open Graph fields. | The 1200 × 630 default is only three pixels taller, but use LinkedIn’s documented minimum as the platform-specific reference. Inspect a refreshed preview after changing the page. | |
| Slack and Discord | A shared Open Graph image may appear in an unfurled message; use a clear image that tolerates differing card layouts. | Open Graph metadata is a useful basis; each client can apply its own presentation. | Layout and cache behavior are client-specific. A corrected page may not immediately update an existing or cached preview. |
| WhatsApp or iMessage | Provide an image that is reachable over HTTPS and avoid unnecessary file weight. Exact limits are platform-specific and can change; the available guidance does not establish a durable universal limit. | Open Graph metadata is commonly used for previews. | Image availability, fetch timing, and client caching can affect whether the preview appears. Test the actual shared URL in the target app. |
For a published size guide and gallery, see OG Image Design and its OpenGraphImage examples. For a preview-validator workflow and named platform inspectors, see OpenGraph.dev.
Choose a canvas and protect the safe area
For a single image intended for several destinations, start at 1200 × 630 pixels (about 1.91:1). It is close to X’s near-2:1 large-card shape and nearly matches LinkedIn’s documented 1200 × 627 minimum. Keep logos, faces, and any words away from the outer edges so a slightly different crop does not remove them.
- Design the image at the intended dimensions rather than relying on a platform to resize a much smaller original.
- Keep the main subject and any text around the center; treat the perimeter as a crop-risk area.
- Preview the design at both 1.91:1 and a near-2:1 crop before publishing.
- Use an image URL that is publicly fetchable over HTTPS. A URL that works only in your logged-in browser may not be available to a crawler.
Image dimensions and limits are guidance, not immutable platform contracts. Consult the platform’s current documentation for production-critical requirements, particularly where a documented minimum or file constraint matters.
Open Graph and Twitter Card tags: a working example
Place the metadata in the page’s HTML head and replace the example values with the canonical URL, title, description, and image for the page. The image dimensions should describe the actual file.
Rank #2
<meta property="og:type" content="article">
<meta property="og:title" content="Example article title">
<meta property="og:description" content="A concise description for the share card.">
<meta property="og:url" content="https://example.com/article">
<meta property="og:image" content="https://example.com/images/article-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">The example follows the field set and large-card instruction documented by OG Image Design and OpenGraphImage. The explicit og:image:width and og:image:height values help crawlers classify the image reliably. Use an absolute HTTPS URL for og:image, not a relative path.
What each tag does
og:typeidentifies the kind of page;articlesuits an article page.og:titleandog:descriptionprovide the card’s headline and summary.og:urldeclares the page URL to associate with the preview.og:imagepoints to the preview graphic.og:image:widthandog:image:heightgive the image’s pixel dimensions.twitter:cardrequests X’s large-image card format. X can fall back to Open Graph fields for other values.
Keep the metadata consistent with the page a visitor reaches. A correct image tag cannot compensate for a broken image URL, inaccessible page, or conflicting page information.
How to make one page work across platforms
- Create the image. Use a 1200 × 630-pixel canvas as the broad default. Keep essential content central, then inspect a near-2:1 crop for X.
- Publish the image at a public HTTPS URL. Confirm that the URL loads without a login, temporary authorization, or a browser-only session.
- Add the metadata. Put the Open Graph fields and image dimensions in the page head; add
twitter:cardwithsummary_large_imagefor X’s large card. - Check the rendered source. Make sure the final page response includes the intended values, rather than relying on metadata that appears only after client-side JavaScript runs.
- Validate the preview. Use a preview validator or the relevant platform inspector, then share the URL in the target apps. OpenGraph.dev describes preview workflows and lists platform inspectors.
- Refresh after edits. Crawlers cache fetched metadata. Recheck the URL after changing tags or replacing an image; a platform may continue showing an earlier fetch until it refreshes its cache.
Why an image is cropped, wrong, or missing
The card crops the composition
Platforms use different card shapes. X’s large-card format is near 2:1, while 1200 × 630 is about 1.91:1. A crop can remove elements near the edges even when the source image is valid. Move essential content inward and preview the image at the destination shape.
The preview shows an old title or image
A crawler may have cached metadata from before your edit. Confirm the page now serves the updated tags, then use the platform’s inspector or a preview validator to request a new fetch where available. The result may not change instantly in every client.
Free tools Windows power users keep installed
One-click scans. No signup required.
The image is absent
Check that og:image is an absolute HTTPS URL and that it can be fetched without signing in. Confirm the address points to an actual image, that the file is available when requested, and that the declared dimensions match the file. A browser displaying the page successfully does not prove that an external crawler can fetch its image.
Different apps show different cards
Clients do not share a single rendering contract. They may use different layouts, interpret fields differently, or retain separate cached previews. Validate the same page in the destinations that matter rather than treating one app’s result as proof for all of them.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Capture and compare the actual previews
To document how a shared page appears, capture its preview in the browser or app you need to inspect. ScreenshotNeo is a website screenshot API and MCP server; it can capture pages, but it does not replace a platform’s preview inspector or force an app’s cache to refresh. Visit ScreenshotNeo for product details.
Manual browser method
- Open the target platform’s preview inspector, or the actual destination app if it does not offer an inspector.
- Enter or share the page URL and allow the platform to fetch the metadata.
- Capture the resulting card or page from your browser with its built-in screenshot function or an approved screenshot tool.
- Compare the result against the source image and metadata, and repeat after you change the page or request a fresh fetch.
This method shows the platform’s rendered result; simply taking a screenshot of the source image cannot reveal how the platform crops or lays out a card.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Rank #4
Or skip the browser setup
For a screenshot of a page or preview inspector, make one API request. Replace the URL with the page you want to capture and your API key with your own. See the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpCookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo’s free plan.
Practical limits, caching, and costs
There is no universal image-size or file-size rule in the guidance above that can be promised across every platform and client. LinkedIn’s cited help guidance gives a minimum dimension; other platforms’ parsers and requirements may change. Keep the asset reasonably lightweight, serve it reliably over HTTPS, and check current platform documentation when a specific limit is important.
Likewise, preview inspectors and validators help identify what a crawler sees, but they cannot guarantee every app will update at the same time. If an older card persists, verify the live page first, then request a new fetch through the appropriate inspector where available. For debugging, note the exact URL, the destination app, and when you last refreshed the preview.
Common implementation errors and fixes
- Relative image path: change
/images/share.jpgto a complete HTTPS URL inog:image. - Declared dimensions do not match: update
og:image:widthandog:image:heightto reflect the actual image file. - Important content too close to the edge: move it inward and test a near-2:1 crop as well as the 1.91:1 source.
- Only tested in one app: inspect the URL in each important destination; Slack, Discord, and messaging apps may render and cache independently.
- Old values still appear: check the current response and request a fresh fetch in the platform inspector where possible; caching may delay visible changes.
- Image works only when logged in: make the image publicly fetchable over HTTPS so the crawler can access it.
Frequently Asked Questions
Do I need Twitter Card tags if my page already has Open Graph tags?
For the large-image format on X, add twitter:card with summary_large_image. X can fall back to Open Graph fields for other metadata.
Does one preview validator prove the card will look identical everywhere?
No. Validators and platform inspectors show useful fetched metadata, but individual apps can render and cache previews differently.
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.
