Link Preview Generator: Inspect and Build Share Cards

A link preview generator fetches a web page and shows the metadata that may appear when someone shares its URL: typically a title, description, image, and source domain. To inspect one page, use a checker or fetch its HTML and read the Open Graph tags. To generate previews inside your own application, fetch and normalize that metadata on your server, then render your own card.

The Open Graph Protocol says its purpose is to let any web page become a rich object in a social graph. Its basic metadata belongs in the document’s <head>. See the Open Graph Protocol reference.

1. What a link preview generator reads

Open Graph metadata is a central source for share previews. The basic properties are:

Property	Meaning
`og:title`	The title associated with the shared page.
`og:description`	A short description of the page.
`og:image`	The image URL offered for the preview.
`og:url`	The canonical URL identifying the object.
`og:type`	The type of object represented.

Platforms and preview services can interpret metadata differently. A checker is useful for finding missing or malformed values, but simulated output is not proof that every platform will render the same card or has refreshed its cached copy. If exact output matters, also use the platform’s own debugger or sharing workflow.

2. Add metadata to a page

Put the tags in the HTML head of the page you want people to share. Use absolute, publicly reachable URLs for the canonical page and image. Replace the example values with page-specific content.

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

  <meta property="og:title" content="A useful page title">
  <meta property="og:description" content="A concise summary of this page.">
  <meta property="og:image" content="https://example.com/images/share-card.jpg">
  <meta property="og:url" content="https://example.com/articles/example">
  <meta property="og:type" content="article">
</head>
<body>
  <h1>A useful page title</h1>
</body>
</html>

Keep the title and description representative of the page. The dossier does not establish a universal ideal image size, text length, or character limit for every platform; do not assume one value guarantees identical results everywhere. Check the current platform guidance for the surfaces that matter to your audience.

3. Inspect a URL manually

For an occasional check, a manual preview checker is the quickest workflow. The OpenGraph.io checker describes inspection of a URL’s title, description, image, and Open Graph tags. Use a checker to spot absent or malformed fields, then confirm with the relevant platform tool if you need to know how that platform currently treats the page. The OpenGraph.io site provides its checker and describes its API for application use.

Deploy the page at a publicly accessible URL. A crawler cannot retrieve a page that exists only on your laptop or behind an inaccessible login.
Paste the exact canonical URL into a checker.
Compare the reported title, description, image, and Open Graph values with the page’s intended content.
Correct the HTML head, deploy, and inspect again. When a platform shows old data, check its own debugging or refresh workflow.

4. Generate a preview in an application

For a product that accepts pasted links, the server should fetch and normalize metadata rather than trusting arbitrary HTML inserted into the client. An API can supply preview-ready fields and fallbacks. OpenGraph.io documents a site API that returns Open Graph metadata and inferred values; its documented quickstart uses an App ID and URL-encodes the target URL. Check the provider’s current documentation for response schema, limits, and pricing before building a dependency around it: REST quickstart.

Here is a runnable Python example using that documented endpoint shape. Set the App ID in an environment variable; the program prints the returned JSON for inspection. Install requests with python -m pip install requests.

import json
import os
from urllib.parse import quote

import requests

app_id = os.environ["OPENGRAPH_APP_ID"]
target_url = "https://example.com/articles/example"
encoded_url = quote(target_url, safe="")
endpoint = f"https://opengraph.io/api/3.0/site/{encoded_url}"

response = requests.get(
    endpoint,
    params={"app_id": app_id},
    timeout=20,
)
response.raise_for_status()
data = response.json()
print(json.dumps(data, indent=2))

Set the credential before running: export OPENGRAPH_APP_ID='your-app-id'. Inspect the API’s current response documentation and map its fields into your own stable internal shape; do not couple your front end to a vendor response without handling missing values.

cURL

curl --fail --silent --show-error \
  "https://opengraph.io/api/3.0/site/https%3A%2F%2Fexample.com%2Farticles%2Fexample?app_id=YOUR_APP_ID"

Node.js

const appId = process.env.OPENGRAPH_APP_ID;
if (!appId) throw new Error('Set OPENGRAPH_APP_ID');

const targetUrl = 'https://example.com/articles/example';
const endpoint = `https://opengraph.io/api/3.0/site/${encodeURIComponent(targetUrl)}`;
const requestUrl = new URL(endpoint);
requestUrl.searchParams.set('app_id', appId);

const response = await fetch(requestUrl);
if (!response.ok) {
  throw new Error(`Metadata request failed: ${response.status} ${response.statusText}`);
}
const metadata = await response.json();
console.log(JSON.stringify(metadata, null, 2));

Run the Node example in a modern Node.js runtime with built-in fetch, setting OPENGRAPH_APP_ID in the environment. Keep API credentials on the server, never in browser JavaScript.

5. Render safely and handle incomplete metadata

Normalize fetched data into a small application-owned object, for example { title, description, image, url, domain }. The cited API describes fallback values from standard HTML title and description when Open Graph data is missing or incomplete; that is provider behavior, not a universal guarantee made by every platform.

Use a fallback title such as the hostname if no usable title is returned.
Omit the image area if there is no valid image URL; avoid rendering a broken-image icon.
Escape text and validate URL schemes before rendering. Treat fetched page content as untrusted input.
Do not fetch user-supplied URLs directly from a privileged server without controls. Restrict private and loopback network destinations, limit redirects and response size, and apply timeouts to reduce server-side request forgery and resource-exhaustion risks.
Show a loading state while metadata is retrieved and a useful plain-link fallback if retrieval fails.

6. Debugging checklist

Symptom	Likely cause	What to do
Title or description is missing	The corresponding tag is absent, malformed, or not present in the delivered HTML head.	Inspect the deployed page source and add the Open Graph property. Check the relevant platform debugger afterward.
Preview image does not appear	The image URL may be wrong, inaccessible to crawlers, or not an image response.	Open the absolute image URL without a login, verify it serves the intended image, and inspect the page metadata again.
Checker shows old information	A checker or platform may be showing cached data; the research does not establish a universal cache policy.	Confirm the deployed HTML changed, then use the platform’s own debugger or refresh mechanism where available.
Local preview works only in a browser	The page may require a logged-in session or browser-only client rendering.	Ensure the metadata is available in the server-delivered HTML and the public crawler can access the page.
API request fails	Common causes include missing credentials, an unencoded URL, network errors, or provider limits.	Check the credential, encode the target URL as shown, inspect HTTP status and provider documentation, and retry transient failures with bounded backoff.
Different surfaces show different cards	Platforms may interpret or cache metadata differently.	Validate the shared URL with each platform’s own tool when exact rendering matters; a multi-platform simulator is diagnostic, not a guarantee.

7. Performance, reliability, and cost

Fetching metadata for every page view adds latency and makes your card depend on the target site and metadata provider being reachable. Cache normalized results for a reasonable period, use request timeouts, cap response sizes, and refresh or invalidate entries when users need an updated preview. Consider deduplicating simultaneous requests for the same URL. Keep a graceful link-only fallback so a slow or unavailable fetch does not block the rest of your interface.

For an API, compare the response fields and fallback behavior, redirect handling, rate limits, price, and reliability requirements. OpenGraph.io’s quickstart currently states an allowance of 100 free monthly API credits; this is a vendor claim and can change, so verify its current terms before relying on it.

8. Screenshot the rendered page when visual inspection helps

A link preview generator reads page metadata to populate a share card. A screenshot captures the rendered webpage itself, which helps when you need to inspect layout, visual assets, or a page after browser rendering. ScreenshotNeo is a website screenshot API and MCP server; see ScreenshotNeo and its API documentation.

Or skip the browser setup

Use a ScreenshotNeo request to capture the target page as an image. This is a page screenshot, not a replacement for reading Open Graph fields or a guarantee of a platform’s social card rendering.

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

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

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/articles/example' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners are accepted and removed before capture; known newsletter popups and chat widgets are removed too.
Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers identify the page verdict and billing status.
An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs.
The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

FAQ

Usually it reads metadata, including the image URL exposed by the page; it does not necessarily create that image.

Will one checker show exactly what every platform displays?

No. Treat simulated output as a diagnostic view. Verify with the destination platform’s own tools when exact behavior matters.

The research does not verify a universal size. Check current first-party guidance for each platform you target.

Should metadata fetching happen in the browser?

Usually the server is a better place to fetch and normalize arbitrary URLs: it protects API credentials and lets you enforce timeouts, URL restrictions, and response limits.