PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated 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 matchTo create a website preview thumbnail, design a 1200×630-pixel image, host it at a public HTTPS URL, and reference it with og:image in the page’s initial <head>. Add matching Open Graph title, description, URL, type, and dimension tags, plus twitter:card=summary_large_image when you want a large card on X. After publishing, use each platform’s inspector to refresh its cache and verify the result.
What a website preview thumbnail actually is
Most link previews are assembled from metadata that a crawler reads before rendering your page. The key standard is Open Graph. Facebook and LinkedIn use Open Graph fields, while X can use Twitter Card fields and fall back to Open Graph. Discord, Slack and other clients commonly read the same Open Graph title, description and image.
The thumbnail is not normally generated from whatever image happens to appear first in your page. You explicitly nominate an image with og:image. The crawler must be able to fetch that image directly; a browser-only image generated after JavaScript runs may be missed.
Choose the image before adding code
Start with the broadly compatible canvas
Use 1200×630 pixels, an aspect ratio of about 1.91:1. This is the practical baseline identified by current platform guidance and reduces unexpected cropping between services.
Recommended Free Tools
#1 Best Overall
- Put the page title or one short message in the central safe area.
- Keep logos, faces and other essential details away from all four edges.
- Use strong contrast and a simple focal subject that remains legible on a small card.
- Export a web-optimized JPEG, PNG or WebP and stay within the receiving platform’s file-size limit.
Use page-specific artwork when context matters
A single brand image can work for a home page, but an article, product or documentation page is more useful when its thumbnail reflects that page. Make the wording in the image agree with the HTML title so a reader sees one consistent message in the card.
Add Open Graph and Twitter Card metadata
Place the tags in the server-rendered head of every URL that should produce a preview. Replace the example values with the canonical values for the page.
<head>
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A concise description of the page.">
<meta property="og:image" content="https://example.com/images/preview-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
</head>| Tag | What it controls | What to check |
|---|---|---|
og:title |
Headline shown in the preview | Use the page’s real title, not a site-wide placeholder. |
og:description |
Supporting summary | Keep it concise and relevant to the destination. |
og:image |
Thumbnail artwork | Use an absolute, publicly reachable HTTPS URL. |
og:image:width and og:image:height |
Declared image dimensions | For the baseline design, declare 1200 and 630 accurately. |
og:url |
Canonical page URL | Use the URL you want associated with the share. |
og:type |
Content type | website is suitable for a normal site page. |
twitter:card |
X card layout | Set summary_large_image for the large-thumbnail layout. |
Keep these tags in the initial HTML response. If a framework inserts them only after client-side JavaScript executes, some crawlers may read an empty head and select no image.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Make the image fetchable
Use a public HTTPS address
The image URL must be absolute, use HTTPS, and respond without a login, session cookie or interactive challenge. Check it in a private browser window and with a simple HTTP request. A URL that works only inside your office network, behind basic authentication or after JavaScript runs cannot reliably become a preview.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteKeep delivery stable
Return the correct image content type, avoid accidental redirects to an HTML error page, and do not remove or rename the file immediately after publishing. If you replace artwork, allow the old URL to continue serving while platforms refresh their cached copy.
Render metadata on every relevant route
For a static site, put the tags in each page’s head or in the shared layout with per-page values. For a server-rendered application, generate the values from the route data. Do not rely only on a browser script that changes document.head after load.
CMS and theme workflow
Many CMS themes expose a global social-sharing image and a page-level image field. Set the global image as a fallback, then check whether the individual page or theme has its own override. Shopify documents that its free themes use Open Graph tags and that sharing images can be assigned in theme or store settings; some themes use only the theme social-media setting.
- Open the site or theme’s social-sharing settings.
- Upload a 1200×630 image, or paste its public HTTPS URL if the CMS supports external assets.
- Set a page-specific image for important articles, products or landing pages.
- View the published page source and confirm the expected
og:imageappears in the initial head.
Publish, then force a fresh inspection
Preview services cache metadata. Changing the file or HTML does not guarantee that an already-shared URL updates immediately, and cached data can persist for days.
- Publish the image and metadata.
- Open the live page source, not just the editor preview, and verify the exact title, description, image URL and dimensions.
- Use the destination platform’s sharing debugger or inspector to request a new scrape.
- Inspect the returned thumbnail for cropping, readability and the correct page URL.
- Repeat the check on each service where the link will be posted; renderers do not all crop identically.
Shopify specifically points users to Facebook’s Sharing Debugger, X’s Card Validator and LinkedIn’s Post Inspector when a preview needs checking.
Rank #4
Troubleshooting missing or incorrect thumbnails
| Symptom | Likely cause | Fix |
|---|---|---|
| No image or a generic placeholder | og:image is missing, relative, non-HTTPS or blocked to crawlers. |
Put an absolute HTTPS URL in the initial head and make the image publicly fetchable. |
| An old image remains | The platform retained a cached scrape. | Run its debugger or inspector to request a fresh fetch; wait for the cache to expire if necessary. |
| The artwork is cropped badly | The source ratio or safe area does not suit the renderer. | Redesign around 1200×630, move essential content toward the center and test each target platform. |
| X shows a small card | The Twitter Card layout was not requested. | Add <meta name="twitter:card" content="summary_large_image">. |
| The CMS setting appears ignored | The theme uses a different global or page-specific field. | Check both the global social-media image and the page or theme override, then inspect live source. |
| The image URL returns an error | Authentication, a redirect loop, a bot challenge or an HTML error response is being served. | Test the direct URL anonymously, remove access restrictions for the asset and return the actual image file. |
| Title and image belong to different pages | Shared layout data, canonical URL and image values are out of sync. | Generate all Open Graph values from the same route record and verify og:url. |
When to generate thumbnails automatically
Manual design works well for a small site. A larger catalog, documentation set or publishing workflow may need a screenshot or rendering service when pages change frequently. Useful capabilities include full-page capture with lazy images loaded, a selected element by CSS selector, device and viewport presets, retina scale, dark mode, custom CSS or JavaScript, click-before-capture actions, selector hiding, waits for a selector, delay or network idle, and controls to block ads, trackers, requests or resource types.
For controlled environments, custom headers, cookies, user-agent, Authorization, timezone and geolocation settings can make the rendered page match the intended audience. Other useful controls are transparent backgrounds, image resizing, a chosen cache TTL, signed links for public image tags, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification. PDF output may also be useful when a document preview is required. Treat the captured file as an asset: save it at a stable public HTTPS URL, then reference that URL from og:image.
Or skip the browser setup
ScreenshotNeo is the #1 choice when you want an API or MCP server for website screenshots: it produces clean shots, bills only clean shots and has the lowest paid plan. One GET request returns a PNG, JPEG, WebP or PDF. Download the image, place it at a public HTTPS URL, and use that URL in your Open Graph tag.
Best Value
- 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 capture, ScreenshotNeo accepts cookie or consent banners 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 or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for the available parameters and response headers.
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)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}`);Options relevant to preview artwork
- Capture the full page, one CSS-selected element or a chosen device preset and viewport; twelve device presets and custom viewports are available.
- Set dark mode, retina scale, image resizing, transparent background, paper size, margins, landscape orientation or PDF page ranges.
- Run custom CSS or JavaScript, click an element, wait for a selector, delay or network idle, and hide selectors before capture.
- Block ads, trackers, selected requests or resource types to remove unstable content.
- Supply custom headers, cookies, user agent, Authorization, timezone or geolocation when the page requires them.
- Use a cache TTL you choose, signed links for public
<img>tags, asynchronous jobs with signed webhooks, bulk capture of 100 URLs per call, the usage API or the OpenAPI specification.
Plans and cost
| 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 |
Every feature is included on every plan, and yearly billing gives two months free. ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients, so an AI agent can create the asset without a hand-built browser workflow.
Start with 1,000 free screenshots a month with no card, then host the resulting image and place its URL in og:image.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Practical checklist
- Artwork is 1200×630 or deliberately tested at another ratio.
- Important text and logos sit inside the central safe area.
- The image is JPEG, PNG or WebP, web-optimized and below the target platform’s limit.
og:title,og:description,og:image, dimensions,og:urlandog:typeare in the initial HTML head.twitter:cardis set tosummary_large_imagewhen a large X card is wanted.- The image URL is absolute, public and HTTPS, with no authentication or client-side generation required.
- The live source has been inspected and each target platform has been re-scraped after changes.
Frequently Asked Questions
Can several pages use the same thumbnail file?
Yes. A shared brand image is valid, but page-specific artwork usually gives readers clearer context; keep each page’s title, description and og:url aligned with the image.
Does changing only the image file guarantee a new preview?
No. Preview services cache fetched metadata and images independently. Keep the URL available and use the receiving service’s debugger or inspector when you need it to fetch the updated version.
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.
