How to Share a Website Link With a Thumbnail Preview

To share a website link with a thumbnail preview, paste the URL into the destination app and wait for its preview card to load. The page owner controls most of the card by publishing Open Graph metadata in the HTML <head>. Add og:title, og:type, og:image, and og:url; add og:description and image details for a more complete result. The destination service decides whether it can fetch the page and how it renders the card.

Copy the complete, publicly reachable URL.
Open the message, email, chat, or social composer where you want to share it.
Paste the URL into the message field.
Wait for the service to fetch the page and create a card.
Check the thumbnail, title, and description before sending or posting.
Send the message. If no card appears, send the URL as plain text or troubleshoot the page metadata and access rules.

Preview generation happens before you send the message in many apps, but behavior varies by destination. A preview is not part of the URL itself; it is a card assembled by the app from the page it fetched.

2. Add Open Graph metadata to your page

If you own the website, put the metadata in the page’s HTML <head>. The Open Graph protocol defines four required properties for every page: og:title, og:type, og:image, and og:url. A description is optional in the protocol but recommended for useful previews.

<head>
  <meta property="og:title" content="Page title">
  <meta property="og:type" content="website">
  <meta property="og:image" content="https://example.com/share-image.jpg">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:description" content="A short description of the page.">
  <meta property="og:image:alt" content="Description of the preview image">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:type" content="image/jpeg">
</head>

Use the canonical page URL for og:url. Set og:image to an image that represents that page, and provide og:image:alt as a description of the image. The protocol also defines image width, height, MIME type, and an optional secure URL.

Choose metadata values deliberately

Title: Keep it specific to the page. Do not reuse a generic site name for every URL.
Description: Summarize what a reader gets after opening the link.
Image: Use a stable, publicly reachable URL that matches the page topic.
Type: Use website for a normal page; choose another Open Graph type only when it accurately describes the content.
Canonical URL: Avoid tracking parameters and duplicate URL variants in og:url.

3. Generate a thumbnail image for the page

A preview image can be a designed social card, a product image, a chart, or a screenshot of the page. If you need a current rendering of a URL, generate the image during your publishing workflow and use its public URL in og:image.

For a page screenshot, capture the intended viewport or the full page, then verify that important content is visible without cookie banners, newsletter popups, or chat widgets obscuring it. Keep the image URL stable so services can retrieve it later.

4. Platform access rules

Every destination fetches and renders previews according to its own rules. Microsoft documents that a Teams website preview needs a thumbnail image or both a title and description, and recommends providing all three. A URL that requires authentication will not receive a Teams preview. See Microsoft’s Teams sharing documentation.

Make sure the page and image can be fetched without a login, private network access, or a browser session. A person may be able to open a page while the destination’s preview fetcher cannot.

5. Test the preview before publishing

Inspect the rendered HTML source, not only the output of a client-side component, and confirm the tags are inside <head>.
Open each image URL directly in a private browser window.
Paste the URL into the target app’s composer and wait for the card.
Check the title, description, image, and destination URL.
Repeat for important destinations because one service’s result does not guarantee another service’s result.

If you do not control the page, you generally cannot repair its metadata yourself. Contact the site owner or share the URL without a preview.

6. Troubleshooting missing or incorrect previews

Symptom	Likely cause	Fix
No card appears	The destination cannot fetch the URL, or the page has no usable metadata.	Confirm the URL is public, add the Open Graph tags, and try again in the destination composer.
Teams shows no preview	The URL requires authentication.	Expose a publicly accessible page if an unauthenticated preview is appropriate. Teams does not create a preview for authenticated URLs.
Wrong title or description	Missing or incorrect `og:title` or `og:description`, or a platform-selected fallback.	Correct the tags in the page head and retest in the specific service.
Wrong image	`og:image` points to an outdated or unrelated asset.	Replace it with a representative, publicly reachable image URL and include image dimensions and type.
Image does not load	The image URL is private, blocked, unstable, or returns an unsupported response.	Open the image URL without credentials, check the response, and use a stable HTTPS asset.
Preview is stale	The destination may be using a previously fetched version.	Verify the live HTML and follow that service’s current cache-refresh guidance; cache behavior differs by platform.
Card appears in one app but not another	Preview requirements and rendering are platform-dependent.	Test each important destination and provide the complete set of standard tags.

7. Performance, reliability, and cost considerations

Keep metadata server-rendered: Put the tags in the initial HTML head so a fetcher does not need to execute application JavaScript.
Use a dependable image host: A slow or intermittently unavailable image host can produce a missing card even when the page itself works.
Keep URLs stable: Changing image URLs or page canonicals after every deployment makes previews harder to refresh consistently.
Protect private content: Do not expose a page or image publicly just to obtain a preview when the content is intended to require authentication.
Control screenshot generation costs: If you generate thumbnails automatically, cache images that have not changed and capture only when the page content or design changes.

The Open Graph protocol specifies the metadata mechanism; it does not promise a uniform card design or refresh schedule across services.

8. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One request returns a PNG, JPEG, WebP, or PDF that you can use as a page’s sharing image. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response reports the result in X-Page-Verdict and X-Billed headers.

See the ScreenshotNeo documentation for all options. The same request can be made with cURL, Python, or Node.js:

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(`HTTP ${res.status}`);
const bytes = await res.arrayBuffer();
await Bun.write('shot.webp', bytes);

Use the resulting file at a public URL, then set that URL as og:image. ScreenshotNeo also supports full-page capture with lazy images loaded, element capture by CSS selector, dark mode, device presets, custom viewports, retina scale, custom CSS and JavaScript, waits, request blocking, headers and cookies, timezone and geolocation, resizing, TTL-based caching, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, and an MCP server with take_screenshot, get_page_info, and capture_pdf tools for AI agents.

There is a free plan with 1,000 screenshots per month and no card. Paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

9. FAQ

Can I force an app to show a preview?

No. You can provide correct metadata and an accessible page, but the destination controls whether it fetches and displays a card.

Do I need Open Graph tags if the page has a normal HTML title?

Open Graph tags give platforms explicit title, image, type, and URL values. Without them, a service may choose fallback content or omit the card.

Can I change a preview after sending a message?

Usually you must edit the page metadata and share again; whether an existing card updates depends on the destination’s caching behavior.

You generally cannot change its preview metadata. Ask the site owner to add or correct the Open Graph tags, or share the URL as-is.

Should the preview image be a screenshot?

It can be. A screenshot is useful when the page’s visual layout is the content you want recipients to recognize; a designed social image may work better when the page needs a clear branded summary.