A website preview image is the picture a search engine or link-sharing service chooses to represent a page. You can suggest that picture with Open Graph and structured-data metadata, but the platform makes the final selection, crop, and rendering. The reliable workflow is to create a relevant page-specific image, expose it correctly, test the metadata, and check the live result after publishing.
What a website preview image actually is
People use “website thumbnail” to mean several related things: the image beside a search result, the image in Google Discover, or the card shown when someone pastes a URL into a social or messaging app. These are previews generated by the receiving platform, not images embedded permanently in your page.
Google says its image selection is completely automated and can use several sources, including og:image and image properties in structured data. Supplying metadata is therefore a signal, not a command. A platform may choose another image, crop yours differently, or show no image at all.
Choose an image that survives different previews
Make it specific to the page
Use an image that explains the article, product, project, or event being linked. A generic site logo gives the recipient little context and is specifically discouraged by Google’s image guidance. Put the subject in the visual center, keep important text away from the edges, and assume that some services will crop the top, bottom, or sides.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Dimensions and aspect ratio
There is no verified universal size for every search and social service. Adobe’s current guidance for Facebook link shares recommends 1200 × 630 pixels, approximately a 1.91:1 ratio. Treat that as Facebook-specific guidance and recheck it before publishing because platform specifications and rendering behavior change.
| Use case | Evidence-based guidance | What remains uncertain |
|---|---|---|
| Facebook link share | Adobe recommends 1200 × 630 px (about 1.91:1). | Other platforms may use different crops, limits, or preferred sizes. |
| Google Search or Discover | Provide a relevant, high-resolution image and identify it with metadata. | Google chooses the final image automatically; no fixed display size is guaranteed. |
| Cross-platform publishing | Design a crop-safe composition and test the actual services you use. | A simulated preview cannot prove every live rendering will match. |
Format, quality, and crop safety
- Export a sharp image in a format accepted by your publishing stack, commonly JPEG, PNG, or WebP.
- Keep faces, product names, and essential words inside a generous central safe area.
- Do not put a long headline across the entire canvas; it may be clipped on narrow cards.
- Use a high-resolution source rather than enlarging a small screenshot.
Add preview metadata to the page
Place these tags in the document’s <head>. Replace the example URL and image URL with absolute HTTPS URLs that are publicly reachable without a login.
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/preview-images">
<meta property="og:title" content="Website Preview Images">
<meta property="og:description" content="How to choose and configure page preview images.">
<meta property="og:image" content="https://example.com/images/preview-images-1200x630.jpg">
<meta property="og:image:alt" content="A browser page preview with a highlighted share image">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">The Open Graph image should represent the same page as the URL. If your CMS emits duplicate og:image tags, remove the unwanted ones so crawlers do not have to guess.
Support search engines with structured data
For eligible pages, include an image property in the relevant schema.org object (for example, an Article or Product). Use the same canonical page and a useful image URL. Google documents both Open Graph and schema.org image properties as signals, but neither guarantees that a particular picture will appear.
Recommended Free Tools
Rank #2
Write useful alt text
Alt text serves people using screen readers and also helps Google understand an image. Describe what the image communicates in context—such as “dashboard showing monthly traffic by channel”—rather than stuffing keywords or repeating the page title. Alt text for an inline article image is separate from the social card’s og:image:alt, so provide both where your tooling supports them.
Include creator and licensing information
Confirm that you have permission to publish the image. Creator, credit, copyright, and license details can be supplied through structured data or IPTC metadata. Google documents these fields, but does not guarantee that they will be displayed in search results. Keep the credit in your own page or asset-management system as well, so editors can verify rights later.
Build a repeatable image workflow
- Map the page. Decide whether the image should show a product, person, location, result, or concept. Create a page-specific variation instead of reusing a logo.
- Compose for crops. Start with the Facebook-oriented 1200 × 630 canvas when Facebook is important, then keep key content central enough for other ratios.
- Export and host. Use an HTTPS URL, a descriptive filename, and a stable path. Make sure the server returns an image content type and does not require cookies or authentication.
- Set metadata. Add one canonical
og:image, title, description, URL, and image alt value. Add the matching structured-data image property. - Validate the source. View the rendered HTML, not only your CMS editor, and check that the tags contain the final absolute URLs.
- Test a preview. A checker such as OpenGraph.io can inspect tags and simulate cards across platforms. A simulation is diagnostic, not proof that every live platform will render identically.
- Publish and monitor. Share the URL from a clean session and inspect the result on the target service. If an old image persists, confirm the page and image URLs are correct before assuming the platform has refreshed its cache.
Common problems and fixes
The wrong image appears
Check for multiple og:image tags, stale HTML generated by a cache, or a more prominent image that the platform selected from the page. Keep one preferred tag, ensure the image is relevant, and retest the exact URL being shared. You cannot force Google’s automated choice.
The card has no image
Verify that the image URL is absolute, HTTPS, publicly fetchable, and returns a successful response with an image content type. Check for robots, firewall, hotlink, or authentication rules that block crawlers. Confirm that your metadata is in the initial HTML rather than added only after client-side JavaScript runs.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Text or a subject is cropped
Move critical elements inward, reduce the headline, and create a safer composition. Recheck on a phone-sized card as well as a desktop share dialog; visible cropping can vary by device.
The preview checker and live card disagree
That is expected. Checkers simulate selected platforms and cannot reproduce every cache, account state, device, or rollout. Use them to catch malformed metadata, then verify the real service after publishing.
Image rights are unclear
Replace unlicensed artwork or obtain written permission. Record the creator, credit line, license, and any required attribution; metadata alone is not a substitute for permission.
Performance, accessibility, and maintenance
- Compress the preview asset without making small text unreadable; the card image should not delay the page’s primary content.
- Keep the preview URL stable when possible. If you replace the file, preserve dimensions and subject so cached cards do not become misleading.
- Use descriptive alt text for every visible content image, and avoid keyword lists.
- Regenerate page-specific images when the headline or offer changes. An old card can misrepresent a current page even when the tags are technically valid.
- Recheck platform guidance periodically. The cited 1200 × 630 recommendation is for Facebook, not a promise for every service.
Or skip the browser setup
If you need a rendered screenshot rather than a designed social graphic, ScreenshotNeo can capture the page through one API 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 or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.
It also provides an MCP server for Claude, Cursor, and other MCP clients, with take_screenshot, get_page_info, and capture_pdf tools. You can control full-page or element capture, lazy-image loading, viewport and device presets, dark mode, retina scale, custom CSS and JavaScript, clicks, waits, blocked requests, headers, cookies, user agent, timezone, geolocation, transparency, resizing, caching TTL, signed links, asynchronous webhooks, bulk capture, usage reporting, and PDF options.
Rank #4
Read the complete parameter reference in the ScreenshotNeo documentation. The following calls are runnable; replace the URL and key.
cURL
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’s Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to try it.
FAQ
Can I force Google to show my chosen image?
No. You can provide relevant Open Graph and structured-data signals, but Google’s selection and rendering remain automated.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Is 1200 × 630 the required size for every site?
No. It is Adobe’s Facebook link-share recommendation. Other platforms can apply different limits and crops.
Should the preview image be the same as the article’s first image?
It can be, but it does not have to be. Choose the asset that best identifies the page in a small card and ensure both uses have appropriate alt text and rights.
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.
