Generate Website Preview Image

1. The direct answer

To generate a website preview image, create an image asset, publish it at a stable absolute URL, and reference that URL in your page’s initial HTML with Open Graph metadata. The essential tags are og:title, og:type, og:image, and og:url. Add og:image:alt, and include the image dimensions and MIME type when you know them.

<head>
  <meta property="og:title" content="Your page title">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/docs/getting-started">
  <meta property="og:image" content="https://example.com/images/getting-started-preview.jpg">
  <meta property="og:image:alt" content="A diagram showing the getting started workflow">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
</head>

Keep the tags in the server-rendered HTML. Apple Messages does not run JavaScript to discover preview metadata, so client-side-only tags can be missed. See Apple’s TN3156 and the Open Graph Protocol specification.

2. What a website preview image is

A website preview image is usually the Open Graph image displayed when somebody shares a URL. It is a separate digital asset referenced by metadata; it is not automatically a screenshot of the page. The og:image value must be an absolute, publicly reachable image URL.

The Open Graph specification defines these core properties:

Property	Purpose	Required?
`og:title`	Title shown for the shared object	Yes
`og:type`	Object type, commonly `website` or `article`	Yes
`og:image`	Absolute URL of the preview image	Yes
`og:url`	Canonical URL of the object	Yes
`og:image:alt`	Description of the image for accessibility and context	Strongly recommended
`og:image:width` and `og:image:height`	Declared pixel dimensions	Optional
`og:image:type`	MIME type such as `image/jpeg`	Optional
`og:image:secure_url`	HTTPS version when a separate secure URL is needed	Optional

The protocol says that image alt text describes the image rather than acting as a caption, and recommends specifying it when an Open Graph image is present.

3. Create the image asset

Choose the content

Represent the page’s subject in one glance: a product screenshot, a diagram, a photograph, or a restrained illustration. Keep the main subject away from the edges because platforms crop previews differently. Put essential explanation in the metadata title and description instead of relying on tiny text inside the image.

Apple’s current Messages guidance recommends at least 900 pixels of width for preview images. It also documents a 1 MB limit for the main resource at the previewed link and a 10 MB total limit for associated resources. These are Apple-specific guidelines, not universal Open Graph requirements. Apple explicitly advises: “Avoid text in preview images.”

One-off generation

For a single asset, an image-generation editor such as ChatGPT Images can create and edit an image from a prompt, choose an aspect ratio, and save the result. Availability and interface details can change.

A useful prompt states the page subject, audience, brand colors, composition, crop, aspect ratio, and a request to keep important visual content away from the edges. Inspect the saved result at the small size where a link preview will appear. Check spelling, identities, and brand details after every edit.

Repeatable generation

For a publishing pipeline, use an image-generation API. The Image API guide covers single-prompt creation and editing, while the image-generation tool guide covers multi-turn workflows. Both expose controls for output size, quality, format, and compression; verify current model availability and pricing immediately before implementation.

4. Publish the image and add metadata

Export a JPEG, PNG, or WebP file and record its exact pixel dimensions.
Upload it to a stable HTTPS URL that does not require cookies, authentication, or a browser session.
Return the metadata in the page’s initial HTML response.
Use the canonical page URL in og:url.
Describe the visual content in og:image:alt.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Getting Started | Example Docs</title>
  <meta property="og:title" content="Getting Started | Example Docs">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/docs/getting-started">
  <meta property="og:image" content="https://cdn.example.com/previews/getting-started.webp">
  <meta property="og:image:alt" content="A blue workflow diagram for getting started">
  <meta property="og:image:type" content="image/webp">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
</head>
<body>...</body>
</html>

If you use a framework, render these tags during server-side rendering or static generation. Do not depend on a browser effect that inserts them after page load.

5. Capture a real page when a screenshot is the right preview

If the preview should show the actual rendered page instead of designed artwork, take a screenshot at a controlled viewport, select the relevant element, and publish the resulting file. This is useful for documentation pages, dashboards, landing pages, and visual changelogs. Ensure the capture is stable: wait for fonts and images, hide transient UI, and use a deterministic viewport.

Open Graph does not prescribe one universal pixel size. Choose dimensions that suit your target platforms, then verify the result on each one. Apple Messages guidance is a useful constraint when Messages is important, but other platforms may crop or resize differently.

6. Validate before publishing

Open the image URL directly in an incognito window.
Confirm the URL returns an image with the expected Content-Type and status.
View the page source or raw HTTP response and confirm the Open Graph tags are present before JavaScript runs.
Check that the image is large enough for the platforms you target and that its file size is acceptable.
Inspect the crop and legibility at a small display size.
Share the published URL in the actual apps where it matters; previews can be cached and rendered differently.

For Apple Messages, metadata must be directly available on the linked page. Its crawler does not execute JavaScript or follow meta redirects to discover the tags.

7. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. It can create the rendered preview image with one GET request, including full-page or element captures, device presets, custom viewports, dark mode, retina scale, custom CSS and JavaScript, waits, hidden selectors, headers, cookies, and caching. Cookie and consent banners, newsletter popups, and chat widgets are removed before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.

See the ScreenshotNeo API documentation for the complete option list.

cURL

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

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    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://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', image);

ScreenshotNeo also provides take_screenshot, get_page_info, and capture_pdf through its MCP server for Claude, Cursor, and other MCP clients. It includes asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, signed links for public image tags, and a usage API. One thousand screenshots per month are free with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

8. Troubleshooting

Symptom	Likely cause	Fix
No image appears	`og:image` is missing, relative, blocked, or misspelled	Use an absolute HTTPS URL and open it directly without authentication.
Old image keeps showing	The platform cached an earlier preview	Change the asset URL when appropriate, then reshare after the cache expires.
Apple Messages shows the wrong title or no image	Metadata is injected only by JavaScript, or a redirect hides it	Render tags in the initial HTML response and avoid relying on meta redirects.
Image is cropped badly	Important content is near an edge or the platform uses another aspect ratio	Move the subject inward and inspect the preview in each target app.
Image is ignored or shown as an icon	The file is very small	Use a sufficiently large image; Apple notes that images under 150 px wide may be ignored or displayed as icons.
Screenshot contains a cookie banner or chat bubble	The capture happened before cleanup or used a basic browser script	Accept or remove consent UI before capture, hide known selectors, and wait for the page to settle.
Screenshot API returns an error	Invalid key, inaccessible URL, timeout, or bot check	Check credentials and URL access, increase the wait or timeout, inspect verdict headers, and retry transient failures with backoff.

9. Performance, reliability, and cost

Use a static image URL and long-lived caching for assets that change rarely. Version filenames or query strings when you intentionally replace an image. Keep the HTML metadata close to the top of the document and avoid redirects on the image URL.

For generated assets, record the prompt, source page, dimensions, format, and publication URL so you can reproduce a result. For screenshot pipelines, wait only for the selectors or network events the page actually needs; unnecessary delays increase latency. Cache identical captures when the page has not changed.

Open Graph metadata does not guarantee a click-through increase or identical rendering across services. The reliable check is the actual preview in each platform that matters.

10. FAQ

Is an Open Graph image the same as a website screenshot?

No. It is an image file referenced by metadata. It can be artwork, a diagram, a photograph, or a screenshot.

Do I need every optional Open Graph image tag?

No. og:image:alt is strongly recommended, while width, height, type, and secure URL provide additional context when available.

Can I generate the image dynamically in the browser?

You can, but crawlers may not execute that JavaScript. Generate or store the asset ahead of time and emit metadata in the initial HTML response.

What format should I choose?

Use a format your target platforms accept and that keeps the file within their limits. JPEG, PNG, and WebP are common choices; verify the actual response MIME type.

Why does one app show a different crop?

Open Graph defines the metadata fields, not a single display layout. Each service can resize, crop, cache, or omit parts of the preview.