How to Add a Link Preview Image in HTML

Direct answer: add an Open Graph og:image meta tag inside your page’s <head>. Point its content value at the publicly reachable image you want sharing services to fetch.

<meta property="og:image" content="https://example.com/social-preview.jpg">

For a reliable baseline, define the other basic Open Graph properties too: title, object type, canonical URL, description, and alternative text for the image. Open Graph specifies og:title, og:type, og:image, and og:url as the four basic properties, and places them in the document head. The protocol also says that an og:image should have og:image:alt. See the Open Graph protocol for the property definitions.

1. Add the complete metadata block

Put this markup in the server-rendered HTML for the page being shared:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Article title</title>

  <meta property="og:title" content="Article title">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/article">
  <meta property="og:image" content="https://example.com/social-preview.jpg">
  <meta property="og:image:alt" content="A concise description of the preview image">
  <meta property="og:description" content="A short description of the article.">

  <meta name="twitter:card" content="summary_large_image">
</head>
<body>
  <article>Page content</article>
</body>
</html>

The og:image value is an image URL, not a filesystem path and not an image embedded in the visible body. Crawlers request that URL separately when they build a preview. Use an absolute HTTPS URL that works without a login, session cookie, or browser interaction.

What each property does

Property	Purpose	Practical guidance
og:title	Preview headline	Use the page’s clear, shareable title.
og:type	Object type	Use article for an article; website is common for a general home page.
og:url	Canonical object URL	Use the preferred public URL, including the correct protocol and path.
og:image	Preview image URL	Put the primary image first and make it publicly fetchable.
og:image:alt	Accessible image description	Describe the visual concisely; do not repeat the entire title.
og:description	Supporting summary	Write a short description that makes sense without the page body.
twitter:card	X card presentation hint	summary_large_image is a common choice for a large image card.

2. Make the image URL crawler-friendly

The metadata can be correct while the preview still fails if the image request fails. Check these conditions before debugging HTML:

• Return a successful response for the image URL without authentication.
• Serve the actual image bytes with a correct MIME type such as image/jpeg, image/png, or image/webp.
• Use HTTPS and a stable URL. Avoid URLs that expire quickly or require a signed browser session.
• Allow crawler requests through your CDN, firewall, WAF, and rate limiter.
• Do not depend on JavaScript to insert the og:image tag. Put it in the HTML response or use server-side rendering.
• Ensure redirects end at the intended image and do not loop.

A 1200×630 image is a widely used practical recommendation for cross-platform sharing, but it is not a universal Open Graph requirement. Services can crop or reinterpret the asset, so keep important subjects away from the extreme edges and inspect the result on the service where you will share it.

Optional structured image properties

The protocol supports additional properties for the same image:

<meta property="og:image:url" content="https://example.com/social-preview.jpg">
<meta property="og:image:secure_url" content="https://example.com/social-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 concise description of the preview image">

og:image:url is equivalent to og:image. The secure URL, MIME type, dimensions, and alt text are optional structured properties. Supplying them can make the resource details explicit, but they cannot fix an inaccessible or incorrect image URL.

3. Choose one image or provide fallbacks

You may declare multiple og:image values. When values conflict, the Open Graph protocol says the first image is preferred. Put the image you want most services to use first:

<meta property="og:image" content="https://example.com/article-wide.jpg">
<meta property="og:image:alt" content="Wide illustration for the article">

<meta property="og:image" content="https://example.com/article-square.jpg">
<meta property="og:image:alt" content="Square illustration for the article">

Use multiple declarations only when you have a clear reason, such as offering a second crop. A long list of near-duplicate images makes debugging harder and does not guarantee that a particular network will choose a specific crop.

4. Test the deployed page

1. Deploy the page and confirm that the public URL serves the intended HTML.
2. Fetch the HTML as a plain HTTP client and search the response for og:image. This catches tags that exist only after client-side rendering.
3. Open the image URL directly and verify its status, content type, dimensions, and access controls.
4. Use a preview or debugger tool to inspect the metadata found by a crawler.
5. Use the target platform’s own inspection or refresh workflow when available.
6. After changing the image, allow for platform-specific caching. Preview tools diagnose what they retrieved; they do not prove that every service will render identically.

curl -I https://example.com/social-preview.jpg
curl -L https://example.com/article | grep -i 'og:image'

If the response is generated by a framework, inspect the final server response rather than the source template. In a single-page application, configure server-side rendering or static generation for shareable routes so crawlers receive the metadata immediately.

5. Common implementation patterns

Static HTML

For a hand-written page, place the tags directly in <head>. Keep one canonical URL and one primary image per page.

Templates and server-side rendering

Generate values from page data, but escape attribute values correctly. A title containing quotation marks must not break the HTML attribute. Test a rendered page for missing, duplicated, or empty properties.

React, Vue, and other client-rendered apps

Adding tags with a client-side head library can work for browsers, but some crawlers may read the initial response before JavaScript runs. Prefer server-side rendering, static generation, or an edge-rendered document for public pages.

Canonical and query-string URLs

Set og:url to the canonical page you want associated with the share. Tracking parameters can remain in the clicked link, but the Open Graph URL should normally identify the canonical content.

6. Troubleshooting: why is my link preview image not showing?

Symptom	Likely cause	Fix
No image and no title	Tags are missing, malformed, or outside <head>.	Inspect the raw HTML response and add the complete metadata block.
Old image remains	The platform cached an earlier fetch.	Use its debugger or refresh flow, then test again after deployment.
Image URL works in a browser but not for crawlers	WAF, authentication, hotlink protection, or user-agent rules block the request.	Permit unauthenticated image requests and review CDN logs.
Broken-image placeholder	Non-200 response, redirect loop, expired URL, or incorrect MIME type.	Fetch with curl -I, follow redirects, and serve stable image bytes.
Wrong image is selected	Another og:image appears first or a framework emits duplicate tags.	Keep the preferred image first and remove unintended duplicates.
Preview has no metadata on an SPA	Tags are inserted only after JavaScript executes.	Use SSR, static generation, or edge rendering.
Image is cropped badly	The service uses its own card dimensions or crop.	Use a suitable landscape source, keep key content centered, and inspect the target service.
Only some pages fail	Template data is empty, escaped incorrectly, or points to a private asset.	Compare a working and failing page’s final HTML and image response.

7. Performance, reliability, and cost considerations

Open Graph tags add negligible HTML size. The expensive operation is the crawler’s image fetch, so optimize the asset rather than removing useful metadata:

• Compress JPEG, PNG, or WebP images while preserving readable text and important detail.
• Serve the image from a CDN close to likely crawlers and set a cache policy appropriate for stable assets.
• Use immutable, versioned filenames when you need predictable cache invalidation, or use the platform’s refresh tool after replacing an existing URL.
• Keep the image endpoint independent of application sessions and database-heavy page logic.
• Monitor image errors separately from page errors; a healthy HTML page can still have a failing preview asset.

There is no Open Graph service fee for adding these tags. Any cost comes from storing, transforming, or delivering your images, or from an optional screenshot or rendering service you choose.

8. Generate preview images automatically

If every article needs a branded or data-driven image, generate the image during publishing and store a stable public URL in your page record. Then render that URL into og:image. For pages that need a screenshot of an existing URL, an API can capture the page after its content loads.

Or skip the browser setup

For a screenshot of a live page, ScreenshotNeo provides a single GET request that returns PNG, JPEG, WebP, or PDF. Its capture flow accepts cookie and consent banners, then removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot. Each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, 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 all options, including full-page and element capture, device presets, custom CSS and JavaScript, waits, blocking rules, headers, cookies, geolocation, resizing, caching, signed links, asynchronous jobs, bulk capture, usage, and PDF output.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -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/article"},
    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/article'
});
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 import('node:fs/promises').then(fs => fs.writeFile('shot.webp', buffer));

ScreenshotNeo also has an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Plans include 1,000 shots per month free with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

FAQ

How do I set an og:image tag?

Add <meta property="og:image" content="https://..."> inside the document’s <head>, using an absolute public image URL.

Does the image need to be an img element?

No. og:image is metadata. It belongs in <head>; it does not replace a visible body image.

Can I use a relative image URL?

Use an absolute URL. It removes ambiguity for crawlers and makes the resource independently fetchable.

Why is my link preview image not showing after I fixed the tag?

The crawler may have cached the previous result, or it may be unable to fetch the image. Check the raw HTML, request the image directly, and run the platform’s refresh or debugger flow.

Should I add Twitter Card tags as well?

Adding twitter:card with summary_large_image is a practical cross-platform hint. Keep the Open Graph properties because other sharing services use them too.

Can I change the image that appears when I share a link?

Change the URL in og:image, deploy the page, and refresh the target service’s cached preview when that option is available.