To create a link preview image, make a representative image, publish it at a URL that preview crawlers can fetch, and add Open Graph metadata to the page’s <head>. At minimum, use og:title, og:type, og:image, and og:url. A 1200 × 630 pixel image (about 1.91:1) is a practical starting point, but no single size guarantees the same crop or layout on every service.
What a link preview image actually is
A link preview is assembled by the service where someone shares a URL. That service retrieves the page, reads its metadata, fetches the linked image, and builds its own card. The image is not embedded inside the HTML meta tag: og:image contains an image URL.
The Open Graph protocol describes the basic properties as a way for a web page to become a rich object in a social graph. The four required starting points are:
og:title: the title shown for the shared object.og:type: commonlywebsitefor an ordinary page.og:image: an absolute URL to the preview image.og:url: the canonical URL for the object.
Choose and create the image
Use a safe working size
Start with 1200 × 630 pixels. This proportion is vendor guidance rather than an official rule binding every platform. Services can crop, resize, cache, or render the asset differently, so keep essential text and logos away from all four edges. A strong subject, simple contrast, and a short headline survive more layouts than a dense paragraph of copy.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Design for cropping and small cards
- Use one clear visual subject and a readable title.
- Leave a generous margin around logos, faces, and critical words.
- Check the image at thumbnail size; thin type and low-contrast text disappear first.
- Use a distinct image for each important article rather than relying on an unrelated site-wide default.
One image or several?
| Approach | Advantages | Trade-off |
|---|---|---|
| One broadly proportioned image | Simple publishing and maintenance; consistent branding. | May be cropped less ideally in a particular service’s card. |
| Platform-specific variants | More control over composition and text placement. | More design, metadata, and testing work. |
| Text-heavy card | Communicates a headline without context. | Most vulnerable to cropping and unreadable small displays. |
Publish the image where crawlers can reach it
Upload the file to your normal public web host or media storage and use an absolute URL such as https://example.com/images/article-preview.jpg. The URL must resolve without a login, browser-only JavaScript challenge, or an authorization header that the receiving service cannot supply. Make sure your server returns the intended image content and an appropriate image content type.
- Use HTTPS and a stable, publicly reachable URL.
- Do not block the image path from the crawler rules or require a session cookie.
- Keep the file reasonably sized so retrieval does not time out.
- Do not replace an image at the same URL unless you understand that services may continue showing a cached copy.
Add Open Graph tags to the page head
Place the tags in the server-returned HTML document head, not only in a client-side component that appears after JavaScript runs.
<head>
<meta property="og:title" content="How to Create a Link Preview Image" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/link-preview-image" />
<meta property="og:image" content="https://example.com/images/link-preview.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A guide to creating link preview images" />
</head>Optional image properties
The protocol also supports og:image:secure_url, og:image:type, og:image:width, og:image:height, and og:image:alt. Width and height describe the asset; alt should describe what the image depicts, not act as a caption or duplicate the article title. These fields improve clarity for consumers that use them, but they do not force a particular card design.
Rank #2
Multiple images and ordering
You may provide more than one og:image. Open Graph specifies that the first image takes precedence when values conflict. Put your preferred image first and remove stale or accidental duplicates from templates. Otherwise, a consumer that honors the first value can show an image you did not intend.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsComplete implementation workflow
- Create the asset. Export a 1200 × 630 starting image, keep important content inside a safe margin, and check it as a small thumbnail.
- Upload it. Publish it at a stable HTTPS URL that does not require authentication.
- Edit the page template. Add the four basic Open Graph properties to the document head and add the optional image fields that match the file.
- Set the canonical URL. Make
og:urlthe URL you want services to associate with the preview, including the correct protocol, host, path, and meaningful query handling. - Deploy and inspect. Request the page as a normal HTTP client and inspect the raw response. Confirm the tags are present before any client-side rendering.
- Validate on target services. Use each service’s current preview or debugging tool when available. A valid page can still produce different crops, fields, or layouts.
Check the HTML and image before sharing
View the page source or fetch the URL with an HTTP client. Search the returned HTML for exactly one preferred og:image, the expected og:url, and a title that matches the page. Open the image URL in a private browser window and verify that it loads without a login or special cookie. Also check that redirects end at the intended image and that the server does not return an HTML error page with a successful-looking status.
Preview generation is retrieval-based: the receiving service fetches the page and linked resources. A 2020 NDSS study of 20 platforms found image display could fail in some tested circumstances on 11 of them, including pages without image metadata. That bounded experiment is not a current universal success rate, but it illustrates why explicit metadata and target-platform checks matter.
Rank #3
Troubleshooting missing or incorrect previews
No image appears
- Inspect the raw, server-returned HTML for
og:image; tags injected only after JavaScript may be invisible to a crawler. - Paste the absolute image URL into a private window and check that it returns the intended file.
- Check robots, firewall, hotlink protection, authentication, redirects, and timeout limits on both the page and image.
- Confirm that the URL uses the correct spelling, protocol, host, and path.
The wrong image appears
Search for repeated og:image tags in the final HTML. Move the desired value first and remove defaults or stale component output. The protocol gives the first image precedence when values conflict.
An old image remains
Preview services cache fetched pages and assets. Re-scrape or refresh the URL with the receiving service’s current official debugging tool, if it provides one. Cache lifetime and refresh behavior vary, so changing the file does not guarantee an immediate update. Using a new versioned image URL is a practical cache-busting option when your publishing workflow permits it.
Recommended Free Tools
The card looks different on each service
Services choose their own crop, typography, fields, and layout. Test on the services where your audience shares links, and design with edge-safe margins rather than assuming the 1200 × 630 canvas will be shown intact.
The page title is wrong
Verify og:title in the raw response and check for duplicate tags generated by a theme, SEO plugin, or framework layout. Some consumers may fall back to the document title or other fields when metadata is missing.
Performance, reliability, and maintenance
- Keep retrieval dependable: serve the image from infrastructure that is available to unauthenticated requests and avoid unnecessary redirect chains.
- Control payload size: balance sharpness with a file size that a crawler can download quickly, especially for mobile audiences.
- Version changes deliberately: a new filename or query version can distinguish a replacement image, while a permanent URL is easier to maintain.
- Automate consistency: generate title, canonical URL, and image metadata from the same page record so templates do not drift.
- Review accessibility: write meaningful
og:image:alttext, and do not put essential information only in the image.
Or skip the browser setup
If you need screenshots of live pages for a preview asset, ScreenshotNeo can produce a PNG, JPEG, WebP, or PDF from one request. It accepts consent banners before capture 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 the response reports the result in X-Page-Verdict and X-Billed headers.
For a direct capture, see the ScreenshotNeo API documentation:
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 →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 provides an MCP server with take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. Features include full-page and selector capture, device presets, custom viewport and retina scale, dark mode, CSS and JavaScript, click actions, waits, blocking rules, headers, cookies, user agents, geolocation, transparent backgrounds, resizing, caching, signed links, asynchronous webhooks, bulk capture, usage reporting, and an OpenAPI specification. Its parameter names are compatible with those used by other screenshot APIs.
| Plan | Included shots | Price |
|---|---|---|
| Free | 1,000 per month | $0, no card |
| Starter | 3,000 | $5 |
| Growth | 15,000 | $15 |
| Pro | 60,000 | $39 |
| Scale | 250,000 | $99 |
| Business | 1,000,000 | $249 |
Yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to use 1,000 screenshots each month with no card; paid plans start at $5 for 3,000.
Practical final checklist
- The image is representative, legible as a thumbnail, and composed for moderate cropping.
- The file is publicly reachable over HTTPS and returns the intended image.
- The raw page HTML contains
og:title,og:type,og:image, andog:url. - Optional dimensions, type, secure URL, and descriptive alt text match the asset.
- The preferred image is first if multiple image tags exist.
- You checked the target services and know that caching can delay changes.
Frequently Asked Questions
Can I put the image data directly inside og:image?
No. The property is a URL to an image resource that the receiving service can retrieve.
Is 1200 × 630 mandatory?
No. It is practical vendor guidance, not a universal platform rule or guarantee.
Should og:image:alt repeat the article title?
No. Describe the visual content of the image; treat it as alternative text rather than a caption.
Why can two services show different crops from the same URL?
Each service controls its own retrieval, caching, crop, fields, and card layout.
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.
