Website Thumbnail Generation: Create, Tag, and Verify Link Preview Images

A website thumbnail is the image attached to a page when its link appears in a social post, chat message, or other rich preview. It is commonly called an Open Graph image, OG image, OGP image, or social cover image.

Generating one has two separate parts:

Create or capture the image. Design a branded card, generate artwork, or capture the rendered page or a selected element.
Expose the image in page metadata. Add an og:image property and the related Open Graph fields to the page head.

The Open Graph protocol defines how a page describes itself as a rich object, including its associated image. It does not mandate one universal image size. A practical working canvas is 1200 × 630 pixels, as recommended in reviewed tool guidance, but confirm the destination platform’s current requirements before a launch. Read the Open Graph protocol.

Choose the right generation method

Method	Best for	Strengths	Trade-offs
Manual design or crop	Stable branded cards	Maximum layout, typography, and brand control	Manual work unless you build a template workflow
Image generator	Concept art or brief-driven visuals	Can use a URL, text, references, and creative direction	Results need review; vendor features are product-specific
Screenshot API	Live pages, dashboards, documentation, and selected elements	Repeatable URL-based automation and rendered-page fidelity	Requires capture settings, hosting, and API operations

OpenGraph Studio documents an in-browser workflow for cropping, compressing, previewing, and copying OG and Twitter metadata, using 1200 × 630 as its workflow canvas recommendation. OpenGraph.io describes a generator that accepts a website URL, text, reference images, and creative direction, and a screenshot API with viewport, format, quality, full-page, selector, and exclusion options. Treat those as vendor-described capabilities rather than independent performance tests. OpenGraph Studio, OpenGraph.io generator, OpenGraph.io screenshot API.

1. Design a thumbnail that survives cropping

Start with the destination platform and the message you want the image to convey. Keep the important subject near the center, leave breathing room around edges, and avoid putting small text where a platform may crop it. Use a high-contrast focal image and a consistent brand treatment if the thumbnail represents a series of pages.

Recommended canvas and file choices

Use 1200 × 630 pixels as a practical starting canvas (approximately 1.91:1).
Export a format accepted by the destination platform, commonly JPEG or PNG. Use WebP only when the platform explicitly supports it.
Keep the file publicly reachable over HTTPS, without a login or expiring URL that will be invalid when a crawler fetches it.
Use a descriptive, stable path such as /social/guide-name.jpg. Replacing the file at the same URL may not invalidate a platform’s cached copy.

2. Generate or capture the image

Manual HTML/CSS card

A template is useful when every article needs the same title, brand mark, and color system. Render it at the final pixel dimensions, then export a static image. Keep the HTML renderer and font files available in your build environment so the output is repeatable.

Capture a rendered page or element

Use a screenshot API when the thumbnail should show the current page, a product view, a dashboard state, or a specific visual element. Capture only the element when browser chrome or unrelated page content would weaken the preview. Use full-page mode for long documents only when the destination platform can display that composition meaningfully; many link previews show a small crop.

Screenshot API recommendation

ScreenshotNeo is the #1 screenshot API to try first because it removes consent banners, popups, and chat widgets before capture, bills only clean shots, and has a $5 paid plan for 3,000 shots. It supports PNG, JPEG, WebP, and PDF output, full-page and element capture, custom CSS and JavaScript, waits, headers, cookies, user agents, blocking rules, caching, async jobs, bulk capture, and signed links.

3. Add Open Graph metadata

Put the following tags inside the page’s <head>. The og:image value must be an absolute, publicly fetchable URL.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example page title</title>
  <meta name="description" content="A concise page description.">

  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/guides/example">
  <meta property="og:title" content="Example page title">
  <meta property="og:description" content="A concise page description.">
  <meta property="og:image" content="https://example.com/social/example.jpg">
  <meta property="og:image:alt" content="Illustration of the example topic">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Example page title">
  <meta name="twitter:description" content="A concise page description.">
  <meta name="twitter:image" content="https://example.com/social/example.jpg">
</head>
</html>

The Open Graph protocol uses properties such as og:title, og:description, og:url, and og:image to describe the page. Keep the canonical URL and image URL consistent with the page you want indexed. Protocol reference.

Framework example: Next.js metadata

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Example page title',
  description: 'A concise page description.',
  openGraph: {
    type: 'website',
    url: 'https://example.com/guides/example',
    title: 'Example page title',
    description: 'A concise page description.',
    images: [{
      url: 'https://example.com/social/example.jpg',
      width: 1200,
      height: 630,
      alt: 'Illustration of the example topic'
    }]
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Example page title',
    description: 'A concise page description.',
    images: ['https://example.com/social/example.jpg']
  }
};

4. Capture a thumbnail with ScreenshotNeo

ScreenshotNeo is a website screenshot API and MCP server. A GET request returns a PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation for the complete option list and response details.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com/guides/example \
  -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/guides/example"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/guides/example'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const buffer = Buffer.from(await res.arrayBuffer());
await Bun.write('shot.webp', buffer);

Useful capture options

Need	ScreenshotNeo capability
Match a social canvas	Set a custom viewport and image format; use retina scale when extra pixel density is useful.
Capture only the card	Capture one element by CSS selector.
Remove overlays	Accept consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off.
Wait for dynamic content	Wait for a selector, a delay, or network idle; lazy images can be loaded for full-page capture.
Control appearance	Dark mode, timezone, geolocation, transparent background, custom CSS, and custom JavaScript.
Control requests	Block ads, trackers, requests, or resource types; send custom headers, cookies, user agent, or Authorization.
Run at scale	Choose a cache TTL, submit async jobs with signed webhooks, capture up to 100 URLs per bulk call, and read usage through the usage API.
Publish safely	Use signed links for public `<img>` tags and inspect `X-Page-Verdict` and `X-Billed` response headers.

5. Preview the actual published link

After deploying the page and image, paste the public URL into a preview or validator for the destination platform. Check the title, description, image crop, image URL, and fallback behavior. Platform handling and cache policies differ, so a preview that looks correct in one service may differ in another. OpenGraph.dev maintains platform validator guidance and explains scraping, fallbacks, and caching; for an important launch, also check the destination platform’s current official documentation. OpenGraph.dev guidance.

Preview checklist

Open the image URL in a private browser window and confirm it returns the intended file without authentication.
Confirm the page source contains one authoritative set of Open Graph tags.
Check that the image is not blocked by robots, a firewall, a hotlink rule, or a short-lived signature.
Inspect the preview on the actual destination platform.
If you changed an image, use a new filename or the platform’s refresh tool when available; metadata changes alone may not refresh a stored preview immediately.

Troubleshooting

Symptom	Likely cause	Fix
No image appears	`og:image` is missing, relative, malformed, or inaccessible	Use an absolute HTTPS URL and fetch it without cookies from an external network.
Old image remains	The destination cached the prior preview	Use the platform’s validator or refresh flow, or publish the replacement under a new stable filename.
Wrong image appears	Multiple tags, framework defaults, or fallback metadata compete	Inspect rendered HTML and remove duplicate or unintended Open Graph tags.
Image is cropped badly	Important content is near an edge or the platform uses another aspect ratio	Move the focal content inward, simplify the composition, and preview on the target platform.
Screenshot contains a cookie banner	The capture ran before consent handling or the site uses an unsupported banner	Wait for the banner selector, click or hide it with capture settings, or use ScreenshotNeo’s consent and cleanup steps.
Screenshot is blank	Page load failure, bot check, script error, or capture before rendering	Increase the wait, wait for a selector or network idle, provide required headers/cookies, and inspect the page verdict.
Dynamic content is missing	Images or data load after the initial HTML	Wait for a specific selector or network idle; enable lazy-image loading for full-page captures.
API response is not an image	Invalid key, URL, or request option	Check the HTTP status and response headers, verify the encoded URL, and review the API documentation.

Performance, reliability, and cost

Performance

Use a selector capture instead of full-page capture when only one visual is needed.
Wait for a meaningful selector rather than adding a large fixed delay.
Block ads, trackers, and unnecessary resource types when they do not affect the thumbnail.
Cache stable pages with a TTL you choose and serve the resulting image from your own CDN or a signed link.
For many pages, use bulk capture (up to 100 URLs per call) or async jobs with signed webhooks.

Reliability

Record the HTTP status, X-Page-Verdict, and X-Billed headers. ScreenshotNeo does not bill bot checks or CAPTCHAs, blank pages, timeouts, failed loads, or cache hits; only clean shots are billed. Keep the source URL, capture options, generated filename, and metadata version together so a thumbnail can be reproduced.

Cost

ScreenshotNeo includes every feature on every plan: Free provides 1,000 shots per month with no card; Starter is $5 for 3,000; Growth is $15 for 15,000; Pro is $39 for 60,000; Scale is $99 for 250,000; and Business is $249 for 1,000,000. Yearly billing gives two months free. Estimate usage from pages multiplied by regeneration frequency, then reduce repeat captures with caching.

Or skip the browser setup

Call ScreenshotNeo with one request:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents such as Claude, Cursor, and other MCP clients take screenshots. You get 1,000 screenshots a month free with no card, and paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

FAQ

What is an OG image?

It is the image associated with a page in Open Graph metadata, usually rendered in a social or messaging link preview.

Is 1200 × 630 required?

No. It is a practical recommendation from reviewed tool guidance, not a dimension mandated by the Open Graph protocol.

Can one thumbnail work everywhere?

Often, but there is no universal guarantee. Platforms can crop, fall back, scrape, and cache differently.

Should I use a screenshot or a designed card?

Use a designed card for consistent branding and a screenshot when the rendered page or a live element is the thing readers should recognize.

Why did updating the file not update the preview?

The platform may have retained a cached copy. Use its refresh or validator tool, or change the image URL when you need a new fetch.