To make an image appear in a shared link card, add Open Graph tags to the page’s <head>, especially og:image. Point that tag to an absolute, publicly reachable image URL, then test the page with the platform’s inspector. The tags are a preference, not a guarantee: each service can apply its own image rules, crawler behavior and cache.
What creates a website link preview image?
A link preview is assembled by the service receiving the URL. Its crawler requests your page, reads metadata in the HTML head, fetches the declared image and builds a card. Open Graph defines four basic properties for a page:
| Property | Purpose | Required by the Open Graph protocol |
|---|---|---|
og:title |
The headline shown for the shared page. | Yes |
og:type |
The kind of object, commonly website for a normal page. |
Yes |
og:image |
The image URL the card should use. | Yes |
og:url |
The canonical URL for the object. | Yes |
og:description |
A short summary used when the platform displays one. | No, but generally recommended |
For an image, you can also provide structured properties such as MIME type, width, height, a secure URL and alternative text. Put the tags in the document’s HTML <head>, not in visible page content.
Add the Open Graph tags
Use a minimal, valid head
Replace the example values with the title, canonical URL and image that belong to the page being shared.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<head>
<meta property="og:title" content="A clear 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/page-share.jpg">
<meta property="og:description" content="A short description of this page.">
<meta property="og:image:alt" content="A concise description of the preview image">
</head>The image URL should be absolute, use the intended file, and be reachable without a login or other access control. HTTPS is the safest default for both the page and image. If you publish more than one og:image, the first value takes preference when a conflict exists, so put your preferred image first.
Add optional image details when they are known
These tags can help a consumer understand the asset:
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="og:image:secure_url" content="https://example.com/images/page-share.jpg">They do not override a platform’s own limits. Keep the values consistent with the actual file; declaring a width that the file does not have will not enlarge it.
Choose an image that survives different cards
Make it representative
Use a high-resolution image that clearly represents the page. A relevant article illustration, product view or branded feature image is more useful than a generic site logo. Keep important text and subjects away from the edges because cards may crop the image.
Meet the documented LinkedIn limits
LinkedIn’s published sharing guidance is specific to LinkedIn, not a universal rule for every service. It states the following values:
| LinkedIn guidance | Value |
|---|---|
| Minimum dimensions | 1200 × 627 pixels |
| Recommended aspect ratio | 1.91:1 |
| Maximum file size | 5 MB |
| Display below 401 pixels wide | Thumbnail treatment |
LinkedIn’s help page carries an older update notice, so verify the current limits before designing a campaign asset. Other platforms may use different dimensions, file limits, crops or supported metadata. When several destinations matter, compare each destination’s current documentation rather than treating LinkedIn’s numbers as a cross-platform specification.
Rank #3
Install the tags in common site setups
Static HTML
- Open the template for the page.
- Insert the Open Graph block between
<head>and</head>. - Deploy the page and confirm that the production URL, not a staging URL, appears in
og:url.
CMS or site builder
Use the page’s social-sharing or SEO fields if they output Open Graph tags into the server-rendered head. If the system offers both a site-wide default and a per-page override, set a default image and replace it for pages that need a specific image. View the published page source afterward; an editor preview alone does not prove that the crawler receives the tags.
Server-rendered and JavaScript applications
Ensure the initial HTML response already contains the metadata. A crawler that does not execute your application’s JavaScript may never see tags inserted after hydration. If your framework has a head or metadata API, use it to emit the values during server rendering and verify the final response with an HTTP client or “view source.”
Free tools Windows power users keep installed
One-click scans. No signup required.
Verify the page before sharing it
- Inspect the raw head. Search the production HTML for
og:title,og:type,og:urlandog:image. Check for duplicate tags or a staging URL left in the template. - Open the image URL directly. It should return the image without authentication, a private-network restriction or a blocking rule. Confirm the response is the intended image and not an HTML error page.
- Check suitability. Confirm that the image is relevant and, for LinkedIn, at least 1200 × 627 pixels and no larger than 5 MB according to its published guidance.
- Use the destination’s inspector. A platform sharing debugger can show the tags and the card its crawler assembled. A browser-based checker such as OG Preview can inspect Facebook, X and LinkedIn, but its URL-fetch feature sends the submitted address through an external third-party proxy. Do not submit URLs containing private tokens, credentials or personal data.
- Test a clean public URL. Private previews, authentication gates and IP allowlists can make a page work in your browser while remaining unreachable to a platform crawler.
Troubleshoot a missing or incorrect image
| Symptom | Likely cause | Fix |
|---|---|---|
| No image and no title | The basic tags are absent from the crawler-visible HTML. | Inspect the raw response, add the four basic properties and redeploy the server-rendered head. |
| The old image still appears | The destination has a cached card. | Use that platform’s current cache-refresh or re-scrape workflow. There is no single refresh procedure that applies to every service. |
| The wrong image appears | A duplicate og:image, an incorrect template value or an automatically selected image. |
Remove unintended duplicates, place the preferred image first and verify the exact production HTML. |
| The image works in a browser but not in a card | The crawler cannot fetch it because it is protected, blocked or returning an error. | Open the image without credentials, check access rules and confirm that the URL returns the image file directly. |
| A thumbnail appears on LinkedIn | The image is under 401 pixels wide. | Provide a larger asset; LinkedIn publishes 1200 × 627 pixels as its minimum guidance. |
| The image is rejected by LinkedIn | The file exceeds LinkedIn’s 5 MB limit or does not meet its documented dimensions. | Resize or recompress the file while preserving the important content. |
| Google shows another image | Google selects images automatically on its Search surfaces. | Use a relevant, representative, high-resolution image and valid metadata, but do not assume og:image forces Google to display it. |
Generate a reliable share image when you do not already have one
You can design a static JPG, PNG or WebP in an image editor, or render a dedicated share-image page. A dedicated page lets you control the headline, brand colors and crop independently of the article layout. Whichever method you use, host the resulting file at a stable public URL and place that URL in og:image.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
For rendered pages, test loading states, consent dialogs, chat bubbles and responsive breakpoints. A screenshot taken before fonts or lazy images finish loading can become a poor social card. Keep the final asset within the destination’s file-size and dimension rules, and retain the source image so you can revise it without changing the page metadata structure.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo can render a URL into a PNG, JPEG, WebP or PDF through one GET request. It is useful when you need a consistent image from a page instead of maintaining browser automation yourself. Before capture, it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and each response identifies the result with X-Page-Verdict and X-Billed headers.
Use the API documentation at https://screenshotneo.com/docs/ for the full parameter list. This example captures a public page as WebP:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchescurl -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 supports full-page capture with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets and arbitrary viewports, retina scale, custom CSS and JavaScript, clicks before capture, hidden selectors, waits for a selector, delay or network idle, ad/tracker/request/resource blocking, custom headers, cookies, user agents and Authorization, timezone and geolocation, transparent backgrounds, resizing, TTL-based caching, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, a usage API and an OpenAPI specification. PDF output includes paper size, margins, landscape mode and page ranges. Parameter names used by other screenshot APIs also work, which can simplify a migration.
After the API returns the file, host it at a public image URL and use that URL as og:image. ScreenshotNeo does not replace the metadata step; it supplies the image asset. Its MCP server also exposes take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; yearly billing gives two months free, and every feature is included on every plan. Create a free ScreenshotNeo account to generate the image without entering a card.
Keep the preview dependable after launch
- Use a stable, canonical image URL and update the file deliberately when the artwork changes.
- Monitor the production HTML after template or framework changes so tags are not removed during a build.
- Keep important text inside the safe center of the composition to tolerate platform crops.
- Recheck platform requirements periodically; documented limits and cache behavior can change.
- Never place access tokens, signed private URLs or personal information in a URL submitted to a third-party preview checker.
Frequently Asked Questions
Can I use the same image for several pages?
Yes, when the image accurately represents each page. A page-specific image is usually clearer for readers, but Open Graph does not require a unique file per URL.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Does adding Open Graph metadata change the visible page?
No. These properties are metadata in the HTML head; visitors see them only indirectly through the cards created by services that read them.
Why can a card differ between two services even with identical tags?
Each service fetches and renders the page independently, applies its own crop and size rules, and may select images differently. The metadata expresses your preferred asset but cannot force identical output.
The Bottom Line
Publish a public, correctly sized image, declare it with og:image alongside the other basic Open Graph properties, and validate the production HTML and image URL with the destination’s inspector. If you need to render the asset automatically, ScreenshotNeo can produce it without maintaining browser setup.
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.
