What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To make a page show the right image when someone shares it on Facebook, LinkedIn, X, Slack, or a messaging app, publish an absolute, publicly fetchable image URL in an og:image tag inside the page’s <head>. Add the other core Open Graph tags, use a reliable image file (a 1200 × 630 design is a practical cross-platform baseline), and validate the result with a social-preview debugger before publishing.
What Open Graph image metadata does
The Open Graph protocol lets a web page become a rich object in a social graph. A social crawler reads metadata from your HTML and builds a preview card; it does not receive an image uploaded directly to the social network. The image is fetched from the URL in your og:image tag.
The four core properties are og:title, og:type, og:image, and og:url. og:description is an optional recommended property that supplies the text beneath the title. These tags should be in the document head, not in visible page content.
The minimum implementation
Add this block to every page you want to share. Replace the example values with the canonical URL, title, description, and image for that page.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
<html prefix="og: https://ogp.me/ns#">
<head>
<meta property="og:title" content="Example 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-card.jpg">
<meta property="og:description" content="A concise description of the page.">
<meta property="og:image:secure_url" content="https://example.com/images/share-card.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of the image content">
</head>
</html>Use the property attribute exactly as shown. The image URL must be absolute, use HTTPS, and be reachable by an unauthenticated crawler. A relative value such as /images/card.jpg, a URL behind a login, or a file blocked by server rules can produce a missing image.
Choosing dimensions, format, and design
Canvas size and safe area
LinkedIn’s official sharing guidance lists a minimum of 1200 × 627 pixels and accepts JPG, PNG, or GIF. A 1200 × 630 canvas is therefore a useful editorial baseline for a card intended for several networks; it is a design choice, not a universal guarantee that every service will display the entire canvas.
Keep the headline, logo, and other essential details in a central safe area. Services can crop previews differently, especially in compact mobile cards. Avoid placing critical text close to any edge, and check the design at a small size before publishing.
File type and delivery
- Use JPEG for photographic cards and PNG when crisp text, transparency, or flat graphics matter. GIF is accepted by LinkedIn, but animated behavior is not guaranteed in every preview.
- Return the correct image MIME type, such as
image/jpegorimage/png, rather than a generic binary type. - Serve the file over stable HTTPS with a normal success response. Do not require cookies, an authorization header, a JavaScript challenge, or a session generated by the browser.
- Keep the image URL stable when possible. If you replace the file at the same URL, a network may continue showing its cached copy until its cache expires.
Structured image properties and accessibility
Open Graph supports additional properties for each image: og:image:url, og:image:secure_url, og:image:type, og:image:width, og:image:height, and og:image:alt. If you provide og:image, the protocol recommends providing og:image:alt as well.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsThe alt value should describe what the image communicates, not repeat the page title. For example, “Blue dashboard showing monthly API usage” is useful; “Blog post about APIs” is not. Width, height, and MIME metadata help a crawler decide whether it can fetch and render the asset before downloading or decoding it.
Multiple images: which one is selected?
You may declare more than one og:image. When values conflict, the first image is given preference. Put your intended primary image first, then place its structured properties immediately after it. A predictable ordering avoids a crawler selecting an alternate card simply because tags were emitted by different components.
<meta property="og:image" content="https://example.com/images/primary.jpg">
<meta property="og:image:alt" content="Primary product screenshot">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://example.com/images/alternate.jpg">
<meta property="og:image:alt" content="Alternate product detail">How to implement it in a real site
- Generate a page-specific card. Use a consistent 1200 × 630 layout, but change the title, subject, or visual so the card matches the page being shared.
- Upload it to a public HTTPS path. Check the URL in a private browser window. It should return the image without a login or redirect loop.
- Emit metadata server-side or in the rendered document head. Single-page applications must ensure crawlers receive the tags in the initial HTML or through a rendering setup that the target network can process.
- Set the canonical page URL. The
og:urlvalue should identify the page represented by the card, using one consistent scheme and hostname. - Inspect the response. Confirm the image has the intended dimensions and MIME type, and that the page source contains the
propertyattributes. - Run a social-preview debugger. Preview tools reveal fetch failures, unexpected crops, and stale cached metadata before a public share.
- Republish after changes. Networks cache previews. After replacing an image or changing tags, run the relevant network inspector again; the new card may not appear immediately in an existing message.
Why a preview is blank or shows the wrong image
The tags are absent or malformed
View the raw page source, not only the DOM after client-side scripts run. Confirm every tag is inside <head>, uses property, and has a quoted content value. A typo such as name="og:image" or a tag inserted in the body can be ignored.
The crawler cannot fetch the asset
Test the exact image URL without credentials. Check HTTPS certificate validity, redirects, firewall rules, robots or bot controls, and whether your CDN returns an HTML error page with a 200 status. The response must be an actual image with the declared MIME type.
Recommended Free Tools
The image is cropped unexpectedly
Keep important content inside the central safe area and preview at mobile scale. A 1200 × 630 design is close to LinkedIn’s documented 1200 × 627 minimum, but other services can apply their own ratios and crops.
An old image remains after an update
Preview caches are independent of your browser cache. Re-run the network’s inspector or debugger after the deployment. If your publishing system permits it, changing the image URL (for example, by using a new versioned filename) gives the crawler a new cache key.
The wrong image wins
Search for every og:image emitted by your templates, plugins, and layout components. Put the desired primary value first and keep its structured properties directly below it. Remove duplicate tags that are added unintentionally.
Validation checklist before you share
- The page contains
og:title,og:type,og:url, andog:image. og:descriptionaccurately summarizes the page.- The image URL is absolute, HTTPS, public, and stable.
- The response is a real JPG, PNG, or GIF with the expected MIME type and dimensions.
og:image:alt, width, height, and other structured fields describe the primary image.- Headlines and logos remain readable after a compact crop.
- A preview debugger has fetched the current tags and image.
- You have allowed for cache delay after any update.
Or skip the browser setup
For automated screenshots of a page, ScreenshotNeo provides a single HTTP request and can return PNG, JPEG, WebP, or PDF. Before capture it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing result.
Use the documented API at https://screenshotneo.com/docs/:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe same request in Python:
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)And in 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 also offers an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Every feature is included on every plan; the Free plan provides 1,000 shots per month without a card, and paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Performance, reliability, and cost considerations
Keep cards reasonably sized so crawlers can download them quickly, but do not trade away legible dimensions to chase a tiny file. A CDN with predictable HTTPS delivery is preferable to an origin that sleeps, rate-limits unfamiliar user agents, or generates a card only after a long browser interaction. Versioned filenames make updates deterministic; stable URLs reduce unnecessary cache misses when the artwork has not changed.
For large sites, generate cards during publishing rather than on every crawler request. Log image-generation failures, verify that each page has one intended primary image, and periodically sample URLs with a debugger. If you use an automated capture service, inspect its verdict and billing headers so failed or empty captures are distinguishable from successful shots.
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 →FAQ
Does adding an image to the page automatically create a social preview?
No. A page image in the visible body is not a substitute for og:image. Social crawlers use metadata and their own fallback rules.
Best Value
Should every page use the same image?
No. A site-wide fallback is useful when a page has no custom artwork, but page-specific cards make shared links clearer and more recognizable.
Can I use a private storage bucket?
Only if the final URL is publicly fetchable by the crawler without expiring credentials. In practice, a public HTTPS CDN URL is safer.
Why does a direct browser test pass while the debugger fails?
Your browser may have cookies, a logged-in session, or JavaScript capabilities that the crawler does not. Test from an unauthenticated context and inspect redirects, response headers, and the raw HTML.
Frequently Asked Questions
Does adding an image to the page automatically create a social preview?
No. Social crawlers rely on Open Graph metadata such as og:image, not merely an image displayed in the page body.
Should every page use the same image?
Use a fallback when necessary, but page-specific cards usually communicate the shared link more accurately.
Can I use a private storage bucket?
Only when the resulting URL is publicly fetchable without authentication or expiring credentials; a public HTTPS URL is the dependable option.
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.
