For a social sharing card, add Open Graph metadata to the page and point og:image to a relevant, publicly accessible image. That gives social platforms a clear image signal, but it does not guarantee every platform—or Google Search or a browser preview—will display that exact image. The examples below distinguish those different kinds of “website thumbnails” and show how to set up, design, and check each one.
What “website thumbnail” can mean
A website thumbnail is not one universal feature controlled by one setting. People use the phrase for several different previews:
- Social or messaging link card: The image, title, and sometimes description shown when someone shares a URL. Open Graph metadata is a common way to describe this card.
- Google Search image preview: An image Google may select to show with a search result. Google says this selection is automated and can draw on several sources, including
og:imageor structured metadata. - Browser-generated preview: A saved link, tab, history entry, or screenshot preview made by a particular browser or tool. The behavior is browser-specific; Open Graph alone should not be assumed to control it.
The examples in this guide primarily address social link cards. Search previews and browser-generated previews are covered separately so you do not mistake one platform’s behavior for a universal rule.
Open Graph example for a social sharing card
Open Graph defines og:title, og:type, og:image, and og:url as its basic required properties. Add them to the document head of the page you want people to share. The protocol also describes optional image metadata, including dimensions, MIME type, and alt text. See the Open Graph Protocol.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<head>
<title>A clear page-specific title</title>
<meta property="og:title" content="A clear page-specific 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-preview.jpg">
<meta property="og:image:alt" content="A concise description of the preview image">
</head>Replace the example URL, title, type, and image with values appropriate to the actual page. Use the page’s canonical URL for og:url, and use an absolute image URL that a platform can fetch without a login. Open the image URL directly to confirm that it loads and serves an image file rather than an error page or an HTML viewer.
Metadata should describe the page being shared, not merely repeat the site-wide homepage values. The image alt text should briefly describe what the preview image shows. For further details about supported metadata properties, consult the Open Graph Protocol documentation.
Website thumbnail examples: what to put in the image
| Page or card type | Useful thumbnail example | What to avoid |
|---|---|---|
| Article card | An image that depicts the article’s actual subject, paired with its page-specific headline. | A generic site logo that gives no clue what the article covers. |
| Product or service page | A recognizable image of the product or service, consistent with the destination page and title. | An unrelated promotional image or a title-image pairing that suggests a different destination. |
| Brand homepage | A composed brand image that uses the identity as part of a relevant visual for the homepage. | Relying only on a standalone logo as the preferred image. Google advises against generic images such as site logos for this purpose. |
| Large social image card | An image suited to a wide card. A third-party guide gives summary_large_image as an example Twitter Card value for this layout. |
Assuming the same card layout or crop is guaranteed across platforms. |
| Compact summary card | A smaller image accompanied by text; the same third-party guide gives summary as an example value. |
Putting essential text or a logo near the image edges without checking how a platform crops it. |
Google recommends a page-relevant, representative image, discourages extreme aspect ratios, and advises using high-resolution images where possible. See Google Search Central’s image SEO best practices, updated March 2, 2026 UTC.
What size should an Open Graph image be?
A useful wide-card starting point is 1200 × 630 pixels, or approximately a 1.91:1 aspect ratio. OpenGraphImage’s platform guide and OGImage.io’s preview tool both present this size as practical guidance; neither makes it a universal platform contract. Their publication dates are not stated, and the sizing advice should be treated as a starting point, not a promise that every service will show the whole image without cropping. See OpenGraphImage’s platform guide and OGImage.io’s preview tool.
If the image contains lettering, a logo, or a subject that must remain visible, keep important content comfortably inside the center rather than tight to the edges. This is practical design advice because layouts and crops differ; it is not a universal safe-area specification. Check the result on the platforms where you expect the link to be shared.
Social cards, Google results, and browser previews are different
Social and messaging cards
Open Graph supplies a shared vocabulary for page metadata, but individual services may interpret fields, choose layouts, and cache results differently. A third-party platform guide describes Facebook/Meta and LinkedIn as reading Open Graph fields, and X as using Twitter Card fields with possible Open Graph fallbacks. It also describes additional layout behavior for Discord and Slack. These are examples of reported variation, not official specifications or a guarantee of current behavior; platform implementations can change.
Rank #3
For example, an X card setup may include a Twitter Card field such as twitter:card, while the Open Graph fields still describe the page and image. Check the current destination platform’s own guidance or inspection tool before relying on any platform-specific fallback. Do not infer that og:image forces a particular layout everywhere.
Google Search image previews
Google says it selects image previews automatically. Site owners can influence the candidate image with signals such as schema.org primaryImageOfPage, an image associated with the main entity, or og:image, but Google does not promise to use the image you specify. This is why a social card can show one image while a Google result shows another—or no image preview.
For Google image discoverability, its guidance recommends standard HTML <img> elements, a fallback src when using responsive srcset or <picture>, and descriptive, useful alt text. Google lists BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF as formats supported in image src references for Search. These are Google Search recommendations and supported formats, not a promise about how social platforms render a link card.
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
Browser-generated previews
A browser’s own saved-link, history, tab, or screenshot preview may use browser-specific mechanisms. The Open Graph Protocol and Google’s image guidance do not establish how every browser creates those previews. If you need a particular browser’s thumbnail behavior, check that browser’s current documentation rather than assuming social metadata controls it.
How to check a thumbnail before and after publishing
- Inspect the published page source. Confirm that the intended Open Graph tags are in the document head of the actual URL you plan to share. Check that the title and image are page-specific, and that
og:urlidentifies the correct page. - Open the image URL directly. Confirm that it is publicly reachable and returns the intended image. A tool guide recommends checking HTTPS reachability; cached metadata may also remain after you update a page.
- Review the image itself. Make sure it represents the page, has a suitable resolution, and does not depend on an unusually wide or narrow crop. Keep critical text or branding away from the edges.
- Use a preview simulator for an early check. OGImage.io offers approximate previews for Facebook, X, LinkedIn, Discord, and Google snippet references. Its documentation warns that these are design approximations, and that platform layouts, fallbacks, and cached data may differ.
- Use the destination platform’s current inspector or debugger where available. Then share the link again and check the real rendered card. A simulator can catch obvious issues, but it cannot replace a platform’s own inspection facility or an actual share.
Why a website thumbnail is wrong or missing
| Symptom | What to check | Practical fix |
|---|---|---|
| The card uses an old image or title. | The page may have changed while the platform still has cached metadata. | Check the live page source, then use the destination platform’s current inspection/debugging facility if available. Share again after refreshing or rechecking the platform’s stored preview. |
| The card has no image. | The og:image tag may be missing, malformed, point to an inaccessible URL, or return something other than an image. |
Confirm the tag is in the published page head and open its absolute image URL directly. Verify public reachability and that the response displays the intended image. |
| The preview image is unrelated to the page. | The selected image may be generic, or the service may have chosen another available image. | Use a representative, page-specific image and check the real result on the target platform. Google’s choice in Search remains automated even when metadata is provided. |
| The image is cropped differently than expected. | The platform’s card layout and crop may differ from a simulator or another service. | Use a wide image as a starting point, keep important elements away from edges, and inspect the preview in the intended service. |
| A simulator looks right, but a real share does not. | The simulator approximates layouts and may not reproduce platform-specific fallbacks or cached data. | Use the platform’s own inspector/debugger where available and confirm with an actual share. |
Or skip the browser setup
If you need to capture the page as an image rather than configure its social metadata, ScreenshotNeo can return a screenshot from one GET request. For example, this cURL command saves a WebP capture of a page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request details. ScreenshotNeo is a website screenshot API and MCP server by Yorker Media. Before capture, it can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf 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. These captures are generated screenshots, not a substitute for testing how a social platform renders a link card.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchSign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.
FAQ
Does an Open Graph image guarantee that every service will show that image?
No. It is a page-sharing image signal, not a command that controls every platform, browser, or search engine. Google states that its Search image selection is automated.
Will adding og:image change the thumbnail in a normal browser tab?
Not necessarily. Browser-generated previews are browser-specific, and the sources above do not establish that Open Graph controls them.
Is 1200 × 630 a required Open Graph image size?
No. It is a practical wide-card starting point described by secondary platform and preview-tool sources, not a universal protocol requirement or guarantee against cropping.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →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.
