Create two things: a relevant landscape image file and metadata that tells social platforms to use it. Publish the image at a publicly reachable URL, then add Open Graph tags—og:title, og:type, og:image, and og:url—inside your page’s <head>. Add og:image:alt and image dimensions so crawlers have useful context, then inspect the real share preview and fix any access or caching problem.
What a social sharing image does
A social sharing image is the visual preview attached when someone posts your page URL. The image file alone is not enough: a crawler must discover it through page metadata. The Open Graph Protocol describes this metadata as a way for a web page to become a rich object in a social graph.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Canva Pro User Guide 2026: A Step-by-Step Manual to Create Stunning Designs, Social Media Graphics,... | $20.99 | Buy on Amazon |
Keep the image specific to the page being shared. A product page might show the product and its name; a tutorial might show the result and a short, legible title. Treat text placement, contrast, and composition as design decisions rather than universal platform rules. Make the subject understandable when the preview is small, and keep important text away from the edges because platforms may crop it.
Prepare the image asset
Choose a landscape canvas
Start with a landscape image and leave visual breathing room around logos, faces, and text. Export a web-friendly JPEG, PNG, or WebP according to your design and delivery stack. Before publishing, check the dimensions, file size, and whether the image still communicates its subject at preview size.
Free tools Windows power users keep installed
One-click scans. No signup required.
Use the target platform’s published limits
Requirements differ by platform and can change. LinkedIn’s sharing-module guidance, accessed in 2026, specifies a minimum of 1200 × 627 pixels, recommends a 1.91:1 ratio, and lists a 5 MB maximum. Images less than 401 pixels wide display as thumbnails. These are LinkedIn figures, not universal requirements for every social network.
| Check | LinkedIn sharing-module figure | How to apply it |
|---|---|---|
| Minimum dimensions | 1200 × 627 px | Export at least this size for LinkedIn link previews. |
| Recommended ratio | 1.91:1 | Compose near this ratio to reduce unexpected cropping. |
| Maximum file size | 5 MB | Compress the file without making text or detail unreadable. |
| Small-image behavior | Under 401 px wide displays as a thumbnail | Do not rely on a small source for a full preview. |
Do not silently generalize LinkedIn’s ad-specific format notes to organic website previews. For Facebook, X, messaging apps, and other destinations, consult each service’s current documentation before standardizing a template; exact current limits are not established here.
Publish the image where crawlers can fetch it
Place the file at an HTTPS URL that remains stable and returns the image directly. A typical location is https://example.com/images/article-share.jpg. Ensure the URL does not require a login, session cookie, VPN, or an internal network. LinkedIn notes that a preview image can fail when access is blocked or the image is in a protected directory.
- Return a successful response for the image URL without browser-only authentication.
- Serve the correct image content type and avoid an HTML error page disguised as an image.
- Allow the social crawler to reach the host through your firewall, bot rules, CDN, and robots configuration.
- Keep the URL stable; changing filenames or query parameters can make an existing preview point to an old asset.
Add Open Graph metadata to the page head
Put these tags in the HTML document’s <head>, not in the body. Use the canonical URL of the page for og:url and the absolute URL of the chosen image for og:image.
<head>
<meta property="og:title" content="Page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:image" content="https://example.com/images/share-preview.jpg">
<meta property="og:image:alt" content="Description of the share preview image">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
</head>The four basic properties
og:title: the title shown for the shared object.og:type: the object type;websiteis a sensible value for a normal site page.og:url: the page’s canonical, absolute URL.og:image: the absolute URL of the preview image.
Useful image properties
og:image:type, og:image:width, and og:image:height are optional structured properties. Include them when your application knows the values. og:image:alt should describe what the image depicts; write alternative text, not a caption or marketing slogan. The protocol recommends supplying it whenever og:image is present.
Framework and CMS placement
In a static site, edit the shared head template. In a CMS, use the SEO or social-sharing fields that generate head metadata, then inspect the rendered HTML—not just the editor form—to confirm the tags appear once with the intended values. If templates emit several og:image tags, make the first one the image you want platforms to select.
Validate the complete share path
- Open the page’s source or rendered head and verify the four basic properties, the absolute URLs, and the intended title.
- Open the image URL in a private browser window. Confirm it loads without signing in and that it is the expected file.
- Check the image’s pixel dimensions and file size against the destination platform’s current guidance.
- Use the platform’s own preview or debugging tool to fetch the URL. Confirm the title, destination URL, and image all match.
- If the preview is wrong, change one variable at a time: metadata, image URL, access rules, or cache state.
A standards-compliant tag cannot guarantee a preview. The crawler must be able to retrieve both the HTML and the image, and platforms may retain an earlier fetch. Their refresh procedures vary, so use the destination’s current debugging or re-scrape controls rather than assuming a universal cache-clearing method.
Or skip the browser setup
ScreenshotNeo can create the image asset from a URL with one request, which is useful when the page itself is already the design. It captures a clean shot after accepting cookie or consent banners and removing more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup 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. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
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 →See the ScreenshotNeo documentation for the full parameter list. This call captures Stripe’s page; replace the URL with your own page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import 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)Node.js:
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 supports full-page captures with lazy images loaded, CSS-selector element captures, dark mode, device presets and custom viewports, retina scale, custom CSS and JavaScript, click actions, waits, blocked requests, headers, cookies, user agents, authorization, timezone and geolocation, transparent backgrounds, resizing, configurable caching, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. Its parameter names also match those used by other screenshot APIs, easing migration.
Plans include 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000 screenshots. Yearly billing provides two months free, and every feature is available on every plan. Create a free ScreenshotNeo account.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting common failures
The preview has no image
Check that og:image is present in the rendered head, uses an absolute HTTPS URL, and returns the image without authentication. Then inspect firewall, CDN, bot-protection, and protected-directory rules. A crawler that cannot fetch the file cannot display it.
The wrong image appears
Look for duplicate og:image tags or a CMS-generated default image. Make the intended image the first tag, remove stale tags, and use the platform’s refresh or debugger process. Verify that og:url identifies the exact page whose preview you are testing.
The image is cropped or shown as a thumbnail
Re-export with the destination’s current dimensions and ratio. For LinkedIn, use at least 1200 × 627 pixels and stay near 1.91:1; an image under 401 pixels wide is treated as a thumbnail in its sharing module. Keep key content away from edges.
The image URL downloads HTML or an error
Check the response status and content type at the image URL. Fix rewrite rules, signed-URL expiry, hotlink protection, or CDN transformations that return an error document instead of the image bytes.
Metadata changes do not appear
Confirm the public page source has changed, then request a fresh preview through the destination platform’s current tool. Social crawlers cache independently from your browser and your CDN, so clearing only your local browser cache is insufficient.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Operational and cost considerations
Generate one stable image per page unless the destination requires variants. Keep source files in version control, give each image a deterministic filename, and retain the dimensions and MIME type alongside the asset. Compress large files before publishing, but never sacrifice legibility to meet a limit.
If you generate images on demand, cache them with a deliberate TTL and monitor failed fetches. ScreenshotNeo’s cache-hit responses are not billed; for other delivery systems, account for storage, transformation, and bandwidth costs separately. Test from an unauthenticated network before launch, because an image that works for your team may still be inaccessible to a social crawler.
FAQ
Do I need Open Graph tags if my site already has a sitemap?
Yes. A sitemap helps discovery, while Open Graph tags identify the title, URL, and image for a shared page.
Should og:image:alt repeat the headline?
No. Describe the visual content itself, such as “Blue dashboard showing monthly revenue,” rather than repeating promotional copy.
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 minuteCan one image serve every platform?
Often, but it may be cropped or constrained differently. Keep a master landscape asset and verify each destination’s current specifications before publishing a final template.
Is a larger image always better?
No. Extra pixels do not compensate for poor composition, unreadable text, excessive file size, or blocked crawler access. Meet the destination’s limits and optimize for a small preview.
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.
