A website thumbnail preview is the image shown with a shared URL in Messages, social networks, chat apps, search products, and other link cards. In most cases it is not a live screenshot. The receiving service fetches your page, reads metadata—especially og:image—and then applies its own crop, cache, crawler, and fallback rules.
To control the result, publish Open Graph metadata directly in the page HTML, make the image publicly retrievable, and test the exact app where the link will be shared. If you need a rendered picture of the page rather than its declared thumbnail, use a screenshot workflow instead.
What a website thumbnail preview actually is
A link preview is assembled by the receiving platform. It may display a title, description, domain, favicon, and image obtained from your page. The Open Graph protocol defines common properties for these rich representations, including og:title, og:description, og:image, and og:type. See the Open Graph protocol.
The preview image and a browser screenshot are different outputs:
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 →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- Metadata preview: the app reads a URL declared in
og:image, usually without rendering the page as a human would. - Rendered screenshot: a browser loads the page, executes applicable scripts, applies a viewport, and captures pixels.
A platform can therefore show an old image, a different crop, or no image even when your page looks correct in a browser.
Set the thumbnail with Open Graph metadata
Place these tags in the <head> of the page that people will share. Use absolute HTTPS URLs for the image and page.
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/article">
<meta property="og:title" content="A clear page title">
<meta property="og:description" content="A concise description for the link card.">
<meta property="og:image" content="https://example.com/images/article-preview.jpg">
<meta property="og:image:alt" content="Description of the preview image">
<meta property="og:site_name" content="Example">Use page-specific values
Give each important URL its own title, description, and image. Do not rely on one site-wide image if article-level previews matter. Keep the image relevant to the page and leave text near the safe center because services may crop it.
Add Twitter-style fallbacks when needed
Some services also recognize Twitter Card metadata. It does not replace Open Graph, but adding it can provide a predictable fallback:
Recommended Free Tools
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="A clear page title">
<meta name="twitter:description" content="A concise description for the link card.">
<meta name="twitter:image" content="https://example.com/images/article-preview.jpg">Image size, format, and accessibility
Apple’s Messages guidance recommends images at least 900 pixels wide. It also says icons should be square and at least 108 pixels per side; resources under 150 pixels wide may be ignored or presented as icons. These are Apple recommendations, not universal requirements for every social or messaging platform. The complete guidance is in Apple Developer Documentation TN3156.
- Serve the image over HTTPS with the correct
Content-Type, such asimage/jpeg,image/png, orimage/webpwhere the target platform supports it. - Keep the file reasonably small so crawlers can retrieve it quickly.
- Use descriptive
og:image:alttext, even though not every card displays it. - Check the actual pixel dimensions. CSS width does not change the file’s intrinsic dimensions.
Make metadata visible to crawlers
Apple states: “Serve the same metadata to both mobile and desktop versions of the page.” It also says: “Link previews do not follow meta redirects, nor run JavaScript; metadata must be available directly on the linked page.” Server-side HTTP redirects are followed. Render the Open Graph tags in the initial HTML response rather than injecting them only after client-side JavaScript runs.
Check the page source—not only the browser’s live DOM—and verify that the final canonical URL contains the tags. If your site has separate mobile markup, keep the values consistent. A server-rendered framework, static HTML, or edge-rendered response is generally safer for crawler access than metadata added after hydration.
Why a preview image is missing, wrong, or stale
The image is absent
- There is no
og:imagetag, or its property is misspelled. - The tag is present only after JavaScript executes.
- The image URL returns an error, requires login, blocks the crawler, or redirects unexpectedly.
robots.txt, a firewall, hotlink protection, or rate limiting prevents retrieval.- The receiving app has chosen a fallback such as the page’s first image, favicon, or no image.
The wrong image appears
Multiple og:image tags, a stale cache, an incorrect canonical URL, or a platform-specific fallback can produce a different result. Put the preferred image first, remove obsolete tags, and confirm that the shared URL is the URL whose metadata you edited.
Rank #3
The old image remains after a change
Platforms cache crawled metadata and images. Updating your HTML does not necessarily invalidate an existing card. Use the target service’s current link-inspection or debugging tool to request a fresh scrape, then share the exact URL again. Cache behavior and refresh controls differ by service; a query-string URL may be treated as a separate resource, but do not use that as a substitute for fixing canonical metadata.
The card differs between apps
Each receiver decides which properties to honor, how to crop, which dimensions to accept, and how long to cache. A valid Open Graph setup cannot guarantee identical output everywhere. Test on the actual Messages, social, or chat surface used by your audience. HubSpot documents crawler and image-meta considerations in its social preview guidance, while OpenGraph.dev provides additional platform-oriented troubleshooting context.
A practical troubleshooting checklist
- Open the final shared URL in a browser and record every HTTP redirect.
- View the raw HTML source and search for
og:title,og:description, andog:image. - Confirm the image URL is absolute, HTTPS, publicly reachable, and returns an image status such as HTTP 200.
- Check response headers, file dimensions, MIME type, and whether authentication or cookies are required.
- Inspect
robots.txt, CDN rules, WAF settings, and rate limits for crawler blocks. - Check that desktop and mobile responses contain the same metadata.
- Use the destination platform’s current preview debugger or inspector to re-fetch the URL.
- Wait for that platform’s cache to refresh, then test in a new message or post.
Metadata thumbnail or screenshot: choose the right method
| Need | Best approach | Why |
|---|---|---|
| Control the image shown when a URL is shared | Open Graph metadata | The receiving platform reads your declared title, description, and image. |
| Capture what a browser renders | Screenshot API or browser automation | Produces pixels, including layout and rendered content. |
| Build cards for many URLs | Hosted link-preview or screenshot API | Provides repeatable fetching, rendering, and caching without maintaining browsers. |
| One internal page, occasional capture | Local browser tooling | Maximum control, but you maintain dependencies and execution. |
OpenGraph.io documents screenshot options such as JPEG, PNG, WebP, quality, full-page capture, viewport presets, CSS-selector capture, and caching in its Screenshot API documentation. Its Link Preview API describes returning title, description, preview image, domain, favicon, Open Graph metadata, and fallback data. The documented screenshot presets are xs 375×812, sm 1024×768, md 1366×768, and lg 1920×1080. Its temporary screenshot URLs expire after 24 hours, so download or cache images that must persist. The API reference identifies v3.0 at https://opengraph.io/api/3.0/; v1.1 is deprecated but still functional. Confirm current behavior before integrating.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. It renders a URL and returns PNG, JPEG, WebP, or PDF. Unlike a metadata-only preview, it can capture full pages, load lazy images, select one element by CSS selector, set dark mode, choose a device or viewport, use retina scale, inject CSS or JavaScript, click before capture, hide selectors, wait for a selector, delay, or network idle, block ads/trackers/requests/resource types, set headers/cookies/user agent/Authorization, choose timezone and geolocation, use transparent backgrounds, resize images, set a cache TTL, create signed image links, run asynchronous jobs with signed webhooks, capture up to 100 URLs per call, and expose usage and OpenAPI endpoints. Its parameter names are compatible with those used by other screenshot APIs.
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
Before the shot, ScreenshotNeo 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 or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses identify the result with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
Example cURL request (see the ScreenshotNeo documentation):
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}`);The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance, reliability, and cost considerations
- Metadata: fastest and cheapest for ordinary sharing because the platform fetches a small HTML document and image rather than a full browser render.
- Rendering: slower and more resource-intensive, especially for JavaScript-heavy pages, full-page captures, network-idle waits, and large images.
- Freshness: decide whether to honor a cache for speed or use a controlled TTL when content changes frequently.
- Reliability: set realistic timeouts, handle non-200 responses, record verdict and billing headers, and retry transient network failures without creating duplicate work.
- Security: never expose screenshot API keys in browser JavaScript; proxy requests through a server and restrict allowed target URLs where users can submit URLs.
Common implementation errors
“The tag is in the inspector but not in page source”
Your framework added it after JavaScript ran. Move metadata into server-rendered output or static HTML.
Free tools Windows power users keep installed
One-click scans. No signup required.
“The image works for me but not for the crawler”
The asset may require cookies, a signed session, a user-agent exception, or a browser challenge. Publish a public image URL and review CDN and firewall logs.
“A screenshot contains a cookie banner”
Dismiss it through automation before capture, hide the selector, or use a screenshot service with consent-banner cleanup. This issue does not affect a metadata card unless the banner is itself encoded into the declared image.
“The API returns a blank or incomplete page”
Increase the wait condition, wait for a specific selector or network idle, allow lazy images to load, and check whether the page requires authentication or blocks automation. For a metadata preview, fix server-delivered Open Graph tags instead of rendering a screenshot.
Frequently Asked Questions
Is a website thumbnail the same as a favicon?
No. A favicon identifies a site or page in browser interfaces; a thumbnail is usually a larger link-preview image selected from Open Graph metadata or a platform fallback.
Can I force every app to use the same crop?
No. You can provide a suitable source image and metadata, but each receiving service controls cropping, dimensions, caching, and fallback behavior.
Should I use a screenshot as my og:image?
Only when a rendered page image is the intended design. For most editorial or product pages, a purpose-made social image gives more predictable composition than an automatically captured screenshot.
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.
