Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesA website preview image generator helps you create or capture the image that appears when someone shares a link. For a reliable result, make a 1200 × 630 image, publish it at a stable public URL, add it to your page’s Open Graph metadata, and test the page in a preview checker. The image is only one part of the card: title, description, URL, and platform-specific rendering matter too.
What a website preview image generator does
A website preview image generator creates a social-sharing visual, captures a page as an image, or helps you inspect the metadata that platforms use to build a link card. The phrase can mean two different jobs:
- Creating an image: Design a branded graphic for a page, then publish it and reference it as
og:image. - Capturing a page: Turn a live webpage into an image that can be used as a preview, either manually or through a screenshot service.
A preview checker performs a related but different task: it fetches a page and shows the metadata and likely card appearance. OpenGraph.io describes checking the preview image, title, description, Open Graph tags, Twitter/X cards, and simulated platform previews (OpenGraph.io). OG Preview says users can submit a URL to inspect metadata and previews for services including Facebook, Twitter/X, LinkedIn, Slack, Discord, and WhatsApp (OG Preview).
Generating a graphic does not guarantee that every platform will display it exactly as designed. Platforms may crop, cache, or render cards differently, so test the published page on the services that matter to your audience.
Recommended Free Tools
#1 Best Overall
What size should a website preview image be?
Use 1200 × 630 pixels as a practical starting canvas for a standard Open Graph image. Kenodo’s generator states that it outputs a 1200 × 630 PNG and describes the format as ready for Twitter Cards, LinkedIn, and Open Graph (Kenodo). OpenPreview also provides a 1200 × 630 editor canvas (OpenPreview).
Keep important text, logos, and faces near the center rather than against the edges. Card layouts vary, and some platform previews may crop or scale the source image. Check the result on the actual platforms your readers use instead of assuming one preview accurately represents all of them.
How to create and publish a preview image
- Choose the image method. For a one-off graphic, use a browser editor with an Open Graph-sized canvas. For a consistent site identity, create a reusable template. For an automatic screenshot, use a page-capture workflow or an image service designed to return a dynamic social preview.
- Create the visual. Make the image readable at card size, use a clear focal point, and avoid placing essential content at the far edges. If your page has a large catalog or many articles, use a template populated with page-specific titles or other data rather than designing each image by hand.
- Publish it at a stable, public URL. The image must be reachable by the service fetching the page. A local file, a private asset, or a URL that expires may not work as a durable page preview.
- Add metadata inside the page’s
<head>. Set the page title, description, canonical sharing URL, content type, and image URL. Add a Twitter/X image tag as well when your implementation uses it. - Test the page URL. Use a preview checker to inspect the metadata the page exposes and the card it simulates. Correct the page’s tags or image URL, then test again.
Example page metadata
Replace the example values with the actual page title, description, canonical URL, and publicly accessible image URL. Add these elements to the document head, not the visible page body.
<meta property="og:title" content="A clear page title">
<meta property="og:description" content="A concise description of this page.">
<meta property="og:url" content="https://example.com/article">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/images/article-preview.png">
<meta name="twitter:image" content="https://example.com/images/article-preview.png">Use the real page URL in og:url and the real image asset URL in og:image. A preview checker can help reveal whether the page supplies those values as expected; it cannot make an inaccessible image publicly available.
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 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteChoose a workflow for your volume and needs
| Need | Practical approach | What to validate |
|---|---|---|
| One-off or low-volume images | Design in a browser editor such as OpenPreview, then test with OG Preview or OpenGraph.io. | Image URL, metadata, readability, and platform-specific card rendering. |
| Consistent branded images | Build a reusable template. OpenGraph.io describes templates for OG images, LinkedIn banners, Twitter/X cards, thumbnails, and related formats (OpenGraph.io templates). | Whether every page fills required template fields and gets the correct page-specific metadata. |
| Automatic page screenshots | Image.Social describes a dynamic social preview URL based on a supplied site URL (Image.Social). SocialPreview describes screenshot-based images for pages across a site and lists integrations including WordPress, Shopify, Laravel, Next.js, Nuxt, Astro, Webflow, Wix, and Squarespace (SocialPreview). | Whether the output matches your site’s content and whether the resulting image URL fits your publishing workflow. |
| Large catalogs or publishing systems | Kenodo names Imgix and Cloudinary as options for generating thousands of dynamic OG images; combine image infrastructure with templates, metadata generation, and validation (Kenodo). | Correct per-page data, stable asset URLs, and a way to detect missing or weak metadata. |
| Site-wide audits | OpenGraph.io describes an audit workflow covering missing or weak metadata, image presence and quality, dimensions, reachability, and page-level visibility across multiple URLs (OpenGraph.io). | Pages with absent tags, invalid image links, unsuitable dimensions, or other visibility problems. |
Published vendor allowances are not the same as independently verified usage limits. SocialPreview advertises 50 captures per month on its free allowance, while OpenGraph.io advertises 100 free monthly API requests for its Link Preview API; confirm current terms on the providers’ sites before relying on either allowance.
Capture a webpage with ScreenshotNeo
If you want a screenshot of a live page rather than a manually designed graphic, ScreenshotNeo is a screenshot API and MCP server for developers. A single GET request can return a PNG, JPEG, WebP, or PDF. For social cards, a screenshot can supply the image, but you still need to publish or reference it appropriately and configure the page metadata.
ScreenshotNeo’s capture options include full-page screenshots with lazy images loaded, element capture by CSS selector, dark mode, 12 device presets or a custom viewport, retina scale, custom CSS and JavaScript, selector or delay waits, network-idle waits, and click-before-capture. It also supports hiding selectors; blocking ads, trackers, requests, or resource types; custom headers, cookies, user agent, and Authorization; timezone and geolocation; transparent backgrounds; image resizing; caching with a chosen TTL; signed links for public <img> tags; asynchronous jobs with signed webhooks; bulk capture of 100 URLs per call; a usage API; and an OpenAPI spec. Parameter names used by other screenshot APIs also work, which can make a switch easier. Select options based on the page and desired output; do not assume that a screenshot automatically becomes the correct share-card metadata.
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}`);These examples use the supplied Stripe target URL; replace it with the page you want to capture. The Python example writes the response body to a file. In Node.js, the snippet makes the request; add application-specific handling if you need to save or process the returned bytes. See the ScreenshotNeo documentation for request options and response details.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Best Value
Or skip the browser setup
ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses identify the page verdict and billing status in headers. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. Use the one-call example above to capture a page, or sign up free for 1,000 screenshots a month with no card.
Troubleshooting preview images
The card shows no image
- Confirm the page has an
og:imagetag in its head and that its value points to the intended asset. - Check that the image URL is publicly reachable by the service fetching the page, rather than local, private, or expired.
- Use a preview checker to inspect the metadata and simulated card. OpenGraph.io’s workflow includes image, metadata, and preview checks (OpenGraph.io).
The image is cropped or text is hard to read
- Start from a 1200 × 630 canvas and move essential text and logos toward the center.
- Test the card on the platforms important to your audience; one simulated preview does not establish how every platform will render it.
The card has the wrong title or description
- Inspect
og:titleandog:descriptionin the page head and ensure they describe the page being shared. - Check the page in a preview checker after updating the tags so you can see which metadata is being fetched.
A screenshot is blank or incomplete
- For an automated capture, the page may need time to load or a specific selector to appear. ScreenshotNeo supports waiting for a selector, a delay, or network idle, as well as lazy-image loading for full-page capture.
- If the target page presents a bot check, CAPTCHA, timeout, or failed load, the capture may not show the intended content. ScreenshotNeo responses report a page verdict and whether the result was billed.
Performance, reliability, and cost considerations
For occasional pages, designing and testing images manually keeps the workflow simple. Templates reduce repetitive design work, while automatic screenshots or generated templates suit larger publishing systems where many URLs need distinct assets. In every case, the image URL and page metadata must remain aligned: a correct image attached to the wrong page title or sharing URL still produces a misleading card.
Build validation into a high-volume workflow. OpenGraph.io describes audits that check metadata quality, image presence, dimensions, reachability, and visibility across multiple URLs (OpenGraph.io). For screenshot-based generation, test representative pages for loading behavior, cookie overlays, and content that appears only after interaction. Use caching where a page does not change frequently, and refresh captures when its content or template changes.
For ScreenshotNeo, the listed monthly tiers are Free (1,000 shots, no card), Starter ($5 for 3,000), Growth ($15 for 15,000), Pro ($39 for 60,000), Scale ($99 for 250,000), and Business ($249 for 1,000,000); yearly billing gives two months free, and every feature is on every plan. These are the product’s stated plan figures; check its site for current terms. Its billing distinction is useful for automation: only clean shots are billed, while bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, with the verdict and billing result exposed in response headers.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Frequently Asked Questions
Is a preview image generator the same as a link preview checker?
No. A generator creates or captures the image; a checker fetches page metadata and shows a simulated sharing card.
Can one Open Graph image look identical on every platform?
No. Cropping and rendering can vary, so validate the page on the platforms that matter to your readers.
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.
