How to build Slack-style link previews from any URL with one GET request

The problem: link previews look simple until you build one

Every modern app that accepts URLs is expected to unfurl them. A user pastes a link into your chat app, comment box or CMS, and they expect a card with a title, a description and an image to appear — because that is what Slack, Discord, iMessage and Twitter have trained everyone to expect.

The naive implementation is a fetch plus a regex for og:title and og:image. In production, that breaks constantly:

Many URLs redirect two or three times (link shorteners, tracking wrappers, http-to-https) before reaching the real page.
Responses arrive gzip- or brotli-compressed, and titles come back full of HTML entities like & and ’.
Image URLs are often relative paths like /images/hero.jpg, useless until resolved against the canonical URL.
Plenty of pages have no Open Graph tags at all — you need a fallback chain through Twitter card tags and plain HTML.
Big sites increasingly block requests from datacenter IPs, so your scraper works on your laptop and fails on your server.

The one-call solution

The Link Preview & Open Graph Scraper API does all of the above in a single request. Call the preview endpoint with the URL you want to unfurl:

GET /preview?url=https://www.wikipedia.org/

You get back one JSON object containing the page title, description, the best image the page offers, the favicon, the canonical URL after all redirects, plus the full sets of Open Graph and Twitter card tags. Every URL in the response is already absolute, so you can drop the image straight into an img tag without any path juggling.

Step by step: unfurling links in a chat app

1. Detect URLs client-side. When a message contains a link, send just that URL to your backend. Never call the API directly from the browser, or you expose your key.
2. Validate before you fetch. The free /validate endpoint tells you whether a string is a well-formed, resolvable URL — cheap insurance against wasting preview calls on typos.
3. Fetch the preview server-side. Call /preview and cache the result keyed by canonical URL. Link metadata rarely changes; a 24-hour cache eliminates most repeat calls.
4. Render defensively. Always check that image is non-null before rendering an image slot. A title-plus-description card still looks fine; a broken image icon does not.
5. Batch backfills. Adding previews to existing content? /batch accepts up to 10 URLs per call, which makes migrating an archive of old messages far faster than looping one-by-one.

Edge cases worth knowing about

Pages with no metadata. The API applies a fallback chain — Open Graph first, then Twitter card tags, then plain HTML (the title element, the meta description, the first usable image). You still get a renderable card for bare-bones pages; just treat the description as optional in your UI.

Sites that block scrapers. If a domain rejects datacenter traffic, route the request through residential proxies via the API's proxy option instead of retrying and burning quota.

Canonical URLs and deduplication. The same article often circulates under many tracking-parameter variants. Use the returned canonical URL as your cache and dedupe key so ten shares of one article produce one stored preview.

Raw metadata. If you need everything the page declares — every og:* and twitter:* property, all meta tags — use /metadata instead of /preview, or hit /og and /twitter for just those tag families.

FAQ

Does it follow redirects? Yes, including shortener chains, and it reports the final canonical URL so you know where the link actually lands.
What about pages behind Cloudflare or IP blocks? Enable residential proxy routing for those requests; keep the default for everything else since proxied calls are slower.
Are relative image and favicon paths handled? Yes — every URL in the response is resolved to an absolute URL before you see it.
How should I handle failures? A fetch can still fail for dead links or timeouts. Render the plain URL as a fallback and retry the preview asynchronously rather than blocking message delivery.

Copy-paste code

Calling link-preview-open-graph-scraper.p.rapidapi.com — replace YOUR_RAPIDAPI_KEY with your key.

cURL

curl --request GET \
  --url 'https://link-preview-open-graph-scraper.p.rapidapi.com/preview?url=https%3A%2F%2Fwww.wikipedia.org%2F' \
  --header 'X-RapidAPI-Key: YOUR_RAPIDAPI_KEY' \
  --header 'X-RapidAPI-Host: link-preview-open-graph-scraper.p.rapidapi.com'

Python

import requests

url = "https://link-preview-open-graph-scraper.p.rapidapi.com/preview"
querystring = {"url": "https://www.wikipedia.org/"}
headers = {
    "X-RapidAPI-Key": "YOUR_RAPIDAPI_KEY",
    "X-RapidAPI-Host": "link-preview-open-graph-scraper.p.rapidapi.com",
}

response = requests.get(url, headers=headers, params=querystring)
print(response.json())

JavaScript (fetch)

const url = 'https://link-preview-open-graph-scraper.p.rapidapi.com/preview?url=https%3A%2F%2Fwww.wikipedia.org%2F';
const options = {
  method: 'GET',
  headers: {
    'X-RapidAPI-Key': 'YOUR_RAPIDAPI_KEY',
    'X-RapidAPI-Host': 'link-preview-open-graph-scraper.p.rapidapi.com',
  },
};

const response = await fetch(url, options);
console.log(await response.json());

Node.js (axios)

import axios from 'axios';

const options = {
  method: 'GET',
  url: 'https://link-preview-open-graph-scraper.p.rapidapi.com/preview',
  params: {url: 'https://www.wikipedia.org/'},
  headers: {
    'X-RapidAPI-Key': 'YOUR_RAPIDAPI_KEY',
    'X-RapidAPI-Host': 'link-preview-open-graph-scraper.p.rapidapi.com',
  },
};

const { data } = await axios.request(options);
console.log(data);