How to Create a Link Preview Image

A link preview image is created by publishing an image at a public URL and adding Open Graph metadata to the page head. Start with a representative image, use og:image alongside og:title, og:type, and og:url, then verify the raw HTML and the preview on each service where you share the link.

What a link preview image is

The image shown beside a shared URL is usually selected from metadata in the page’s HTML. The Open Graph protocol lets a web page become a rich object in a social graph; its four basic properties are og:title, og:type, og:image, and og:url.^{Open Graph protocol}

og:image contains an image URL. It does not embed the binary image in the HTML. The receiving service fetches the page and linked resources before assembling its own card, so the page and image must be reachable by its crawler.

Step 1: Create the image

A 1200 × 630 pixel image (about 1.91:1) is a practical starting point recommended by vendor guidance. It is not a universal rule: services can crop, resize, cache, or render previews differently.

Put the main subject near the center and keep important text away from every edge.
Use strong contrast and a simple composition that remains clear at thumbnail size.
Export as JPEG or PNG unless your target service documents support for another format.
Use a descriptive filename such as link-preview-guide.jpg.
Keep the image stable at its URL; changing pixels behind the same URL can leave old previews cached.

One broadly proportioned image is easiest to maintain. Platform-specific variants can fit particular card layouts better, but they add design and publishing work. Text-heavy cards are more vulnerable to cropping than a clear visual subject.

Step 2: Publish it at a crawler-accessible URL

Upload the file to your normal web host or object storage and serve it over HTTPS. The URL in og:image should resolve directly to the image, without requiring a login, browser interaction, or a session cookie.

curl -I https://example.com/images/link-preview.jpg

Check that the response is successful and has an image content type such as image/jpeg or image/png. Check the page itself too:

curl -L https://example.com/articles/link-preview

Do not rely only on what a browser displays after JavaScript runs. Many crawlers inspect the server-returned HTML, so metadata rendered only on the client can be missed.

Step 3: Add the required Open Graph tags

Place these tags in the document’s <head>:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>How to Create a Link Preview Image</title>
    <meta property="og:title" content="How to Create a Link Preview Image" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://example.com/articles/link-preview" />
    <meta property="og:image" content="https://example.com/images/link-preview.jpg" />
  </head>
  <body>...</body>
</html>

og:url should be the canonical URL for the page or object. Use an absolute URL for both og:url and og:image.

Useful optional image properties

The protocol supports structured properties that help consumers understand the image:

<meta property="og:image:secure_url" content="https://example.com/images/link-preview.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A guide to creating link preview images" />

og:image:secure_url: an HTTPS version of the image URL.
og:image:type: the image MIME type.
og:image:width and og:image:height: the intrinsic dimensions.
og:image:alt: a concise description of the image, not a caption or keyword list.

Multiple images and ordering

You can provide more than one og:image. The Open Graph documentation says the first image is preferred when values conflict, so put your intended default first:

<meta property="og:image" content="https://example.com/images/primary.jpg" />
<meta property="og:image" content="https://example.com/images/alternate.jpg" />

Multiple entries give consumers options, but behavior varies. If you need predictable output, publish one clearly chosen image and confirm it on your target services.

Validate the complete page

Fetch the page with curl -L and search the returned source for og:title, og:type, og:url, and og:image.
Fetch the image URL separately and confirm it returns the intended file.
Check that the canonical URL and image URL use HTTPS and do not contain accidental whitespace or relative paths.
Use each receiving platform’s current preview or debugging tool when available.
Share a controlled test URL and compare the displayed crop, title, and image.

curl -sL https://example.com/articles/link-preview | \
  grep -E 'og:(title|type|url|image)'

Preview generation is service-specific. Experimental research across 20 platforms found differences in fields and layouts, so identical rendering everywhere cannot be guaranteed. Treat a 1200 × 630 canvas as a useful baseline, then validate the services that matter to your audience.

Performance, caching, and reliability

Keep the image reasonably sized. Large files slow crawler retrieval and may be rejected or resized. Compress without making text unreadable.
Return the image directly. Avoid redirect chains, expiring signed URLs, and HTML error pages at the image URL.
Keep metadata in the initial response. Server-rendered head tags are more dependable than tags inserted after hydration.
Plan for caching. A service may retain an old card after you change the page. Use the service’s refresh or re-scrape mechanism when available; cache lifetimes differ.
Keep URLs stable. If you replace an image, preserving its URL can reduce broken references, while changing the URL can help distinguish a deliberate new version when a cache remains stale.

There is no universal image-success rate or size-compliance guarantee. Preview consumers choose their own limits and layout rules.

Or skip the browser setup

If you need the preview artwork itself generated from a live page, ScreenshotNeo can capture it through one API request. Before capture it accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. It also provides an MCP server for Claude, Cursor, and other MCP clients.

See the ScreenshotNeo API documentation for all options, including full-page capture, device and viewport settings, retina scale, custom CSS and JavaScript, waits, request blocking, headers and cookies, caching, signed links, asynchronous jobs, bulk capture, and PDF output.

cURL

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

Python

import requests

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

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/articles/link-preview'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('link-preview.webp', Buffer.from(await res.arrayBuffer()));

The free plan includes 1,000 shots each month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account.

Troubleshooting

No image appears

Inspect the raw HTML returned to a crawler. Confirm that og:image exists, is absolute, and resolves to the intended image without authentication or a blocked request. Also check that the image response is successful and has an image content type.

The wrong image appears

Look for repeated og:image tags and move the intended image to the first position. Remove framework defaults or plugin-generated tags that precede your chosen value.

The old image remains

The receiving service may have cached the preview. Use its current official refresh or debugging tool if one exists, then retry with the same canonical URL. Cache duration is service-specific.

The preview differs between services

Compare the actual cards on your target platforms. Services use different crops, fields, dimensions, and cache behavior. Keep important content centered and test representative links instead of assuming one renderer’s result applies everywhere.

The page title is wrong

Set og:title explicitly and verify the server response. Some consumers fall back to the HTML title or other page text when Open Graph data is missing.

The image URL works in a browser but not for a crawler

Check redirects, robots or firewall rules, hotlink protection, user-agent filtering, rate limits, and expiring URLs. A crawler must be able to retrieve the resource without interactive browser state.

Cost and maintenance choices

Choice	Advantages	Trade-off
One shared image	Simple metadata and low maintenance	Less control over platform-specific crops
Multiple `og:image` values	Offers consumers alternatives	Order and consumer selection can vary
Static generated files	Predictable retrieval and low runtime cost	Requires a regeneration workflow
On-demand ScreenshotNeo capture	Captures live pages and removes common overlays before capture	Uses screenshot credits and needs API-key handling

Cache captures when the source page has not changed. For public embeds, use signed links and keep the API key on your server rather than exposing it in client-side code.

FAQ

Is 1200 × 630 mandatory?

No. It is a practical vendor recommendation and a useful baseline, not a universal requirement.

Can I put the image data directly in `og:image`?

The property is defined as an image URL. Publish the file at a retrievable URL instead of embedding binary data in the tag.

Do I need every optional image property?

No. The four basic properties are the starting point. Width, height, type, secure URL, and alt provide additional information when supported.

Why does a preview appear days after I changed the page?

Preview services cache fetched pages and images. Refresh behavior and cache lifetimes differ, so use the receiving service’s available debugger or re-scrape action.

Should the alt text repeat the title?

Describe what the image depicts. The alt property is an image description, not a caption or a list of search terms.