The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Start with a 1200 × 630 px image (about 1.91:1), keep important content away from the edges, and put page-specific Open Graph tags in the HTML your server sends. That is a practical shared starting point—not a promise that Facebook, LinkedIn, X, WhatsApp, Slack, and Discord will display the same crop or preview. Check the published page and image from outside your site before relying on the card.
What makes a social media card work?
A social card is the preview a service builds when someone shares a page link. Open Graph metadata describes that page and can provide its title, description, URL, type, and preview image. The image is only one part of the card: a well-designed graphic cannot fix missing tags, inaccessible files, or a stale cached preview.
For a cross-platform first version, make a 1200 × 630 px image, export it as JPEG or PNG, and use an absolute HTTPS image URL. Put the metadata in the initial HTML response rather than relying on JavaScript to add it after the page loads. Then inspect the live URL and, where a platform offers a debugger or preview tool, request a fresh scrape.
Platform behavior is not uniform. A peer-reviewed 2020 study of link previews across 20 social and messaging platforms found that 11 could fail to show an image when a page lacked image metadata. That result illustrates the value of explicit tags; it is not a current failure rate or a statement about every service in 2026.
#1 Best Overall
Choose dimensions and a safe composition
A September 2026 technical-guide compilation summarizes these useful starting points. Treat the dimensions as a dated guide’s summary, not permanent official specifications: platforms can change their requirements, and their displayed crops may differ.
| Destination | Reported image guidance | Reported file limit |
|---|---|---|
| At least 1200 × 630 px | 8 MB | |
| At least 1200 × 627 px | 5 MB | |
| X, large-image card | 2:1 ratio; minimum 300 × 157 px | Under 5 MB |
| At least 300 px wide; up to a 4:1 ratio | Under 600 KB | |
| Slack | No published image dimensions stated in the compilation | Not stated in the compilation |
| Discord | No published image dimensions stated in the compilation | Not stated in the compilation |
The common 1200 × 630 canvas is close to the reported Facebook and LinkedIn guidance and can suit a large X card, but the ratios are not identical. A design that fills the whole canvas may lose content when cropped or scaled. Keep the headline, logo, faces, and other essential details in a conservative central area; regard that as practical design advice, not an officially defined universal safe zone.
Build for small previews
- Give the card one clear focal point and a short, legible title. Check it at the small size where it will actually appear; fine print and decorative details can vanish.
- Keep branding visible but secondary to the page’s subject. A page-specific image usually tells a sharer more than the same site logo on every URL.
- Preview a crop for each important destination. If a platform’s crop makes the shared design ineffective, provide a platform-specific alternate image where your publishing system allows it.
The sources do not establish an ideal number of words, a guaranteed color-contrast treatment, or an engagement lift from any composition. Choose readable contrast and restrained text as design judgment, not as a quantified performance promise.
Export an image each platform can fetch
JPEG and PNG are the conservative formats in the September 2026 compilation. Its practical suggestion is to aim below 300 KB to keep downloads light; that is a recommendation, not a universal platform limit. The destination-specific limits in the table are substantially higher for some services and lower for WhatsApp. Check current rules for the services that matter to your audience before publishing, and balance file size against visible quality.
Host the image at a public HTTPS URL that returns the image without a login, bot challenge, or hotlink restriction. Confirm the response has a successful status and an appropriate image content type. A browser session in which the image loads while you are logged in does not prove a platform crawler can retrieve it.
The compilation reports that WhatsApp reads tags only within the first 300 KB of HTML. Because that is a specific, volatile limit, verify it against current WhatsApp documentation before depending on it. Keeping the core metadata near the start of the document’s head is a sensible compatibility measure regardless.
Add Open Graph and X card metadata
Use one accurate set of tags for each page. Replace every example value below with the real page title, description, canonical URL, image URL, and relevant image description. The image URL must be absolute, not a path such as /images/card.jpg.
<meta property="og:title" content="A clear page-specific title">
<meta property="og:description" content="A concise description of the linked page.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/article">
<meta property="og:image" content="https://example.com/images/article-social-card.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of the image’s relevant content">
<meta name="twitter:card" content="summary_large_image">og:titleandog:descriptionshould describe the linked page, not make a promise the page does not fulfill.og:urlshould identify the page being shared. Use the page’s intended canonical URL.og:typeshould suit the content; the example usesarticle.og:image:widthandog:image:heightgive clients dimensions before fetching the image. Keep them consistent with the actual file.og:image:altdescribes the image’s relevant content for accessibility; it is not a replacement for the page description.twitter:cardset tosummary_large_imagerequests a large X image card. The compilation says X can also fall back to Open Graph fields.
Deliver these tags in the HTML response sent by the server. If a site inserts them only after client-side JavaScript runs, a crawler that reads the original response may never see them. Check the raw response, not just the browser’s rendered Elements panel.
Validate the published URL, not just the design file
- Inspect the original HTML. Open or fetch the deployed page’s raw response and search for the expected Open Graph tags. Confirm that title, description, canonical URL, and image all belong to this page.
- Test the image URL independently. Request it without being logged in. Check that it returns successfully, is an image, has the expected dimensions, and stays within the destination’s current file limit.
- Check the crop and preview. Use each platform’s preview or debugging tool where available. Confirm the image is not unexpectedly cropped and the title and description are accurate.
- Refresh cached data when possible. If you changed tags or the image but still see the old preview, trigger a re-scrape in the platform’s debugger or inspector. A preview can remain cached after your site has changed.
A screenshot of the rendered page can help you check how the page itself looks, but it does not show whether a social crawler received the right metadata or image response. Validate those separately.
Troubleshoot a missing or incorrect preview
| Symptom | Likely cause | What to check or change |
|---|---|---|
| No image appears | The page has no usable image metadata, or the crawler cannot access the file. | Confirm og:image is in the raw HTML and the absolute HTTPS image URL works without authentication, bot challenge, or hotlink block. |
| The tags appear in your browser but not in the raw response | They are added only after client-side JavaScript runs. | Render the tags into the initial server response and inspect that response again. |
| A different image or old copy appears | The service may have cached a previous scrape, or the page points to another image URL. | Check the exact og:image value, then use the service’s refresh or re-scrape tool where available. |
| The card is cropped awkwardly | The platform uses a different display ratio or treatment from the design canvas. | Move essential details inward, preview the target crop, or serve a platform-specific alternate where supported. |
| The image is rejected or absent on one destination | File size, dimensions, format, or access may not satisfy that service. | Recheck current destination-specific requirements, export a compatible file, and test an unauthenticated fetch. |
| A WhatsApp preview is missing despite tags being present | Tags may be beyond the HTML portion the crawler reads, or another fetch/cache issue may apply. | Put core tags early in the head and verify current WhatsApp guidance; the compilation’s reported 300 KB limit should not be treated as immutable. |
Or skip the browser setup
If you want a quick visual capture of the published page while reviewing its card implementation, ScreenshotNeo can return an image or PDF from one GET request. It does not replace checking raw metadata, crawler access, or a platform’s actual preview.
For example, capture the page you are preparing to share:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for 1,000 free screenshots a month with no card.
Best Value
Plan for changes and keep the check repeatable
Platform dimensions, upload limits, and crawler behavior can change. The figures above reflect a September 2026 technical-guide compilation, not a guarantee of current acceptance by every platform. Before a major campaign or template rollout, check the destinations’ current documentation, test one live URL on each important service, and keep the source image and metadata easy to update.
For a site with many pages, make the title, description, canonical URL, and image page-specific in the server-rendered template. Then validate representative published URLs—including a page with a long title or unusual image—to catch template errors that a single hand-built example will not reveal. Keep a record of the final image dimensions and file size so a later export does not silently exceed a destination limit.
Frequently Asked Questions
Does an Open Graph image change the page’s appearance for visitors on the site?
No. It is metadata used to build a link preview when the page is shared; it does not insert the card image into the page layout.
Recommended Free Tools
Should every page on a site use the same Open Graph image?
A shared brand image can be appropriate when it accurately represents every page, but page-specific images generally make the linked content clearer. Keep each page’s title, description, URL, and image aligned.
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.
