DEV Community

Alexei
Alexei

Posted on

How to Add Rich Link Previews to Any App in 5 Minutes

#webdev #tutorial #api #javascript

Building a chat app, newsletter tool, or content aggregator? You need link previews — those nice cards that show a title, description, and image when someone shares a URL.

The pain: scraping Open Graph tags yourself means dealing with timeouts, JS-rendered pages, anti-bot blocks, and maintaining parsing logic. For most projects, it's not worth the overhead.

I built MetaPeek — a URL metadata extraction API that runs on Cloudflare's edge network (300+ locations, sub-100ms responses). One GET request returns everything you need.

The /v1/preview Endpoint

This is the simplest way to get link preview data:

const response = await fetch(
  `https://metapeek.p.rapidapi.com/v1/preview?url=${encodeURIComponent(url)}`,
  {
    headers: {
      'x-rapidapi-key': 'YOUR_API_KEY',
      'x-rapidapi-host': 'metapeek.p.rapidapi.com'
    }
  }
);
const { title, description, image, icon, domain } = await response.json();
Enter fullscreen mode Exit fullscreen mode

Response:

{
  "title": "GitHub: Let's build from here",
  "description": "GitHub is where over 100 million developers...",
  "image": "https://github.githubassets.com/assets/social-...",
  "icon": "https://github.githubassets.com/favicons/favicon.svg",
  "domain": "github.com",
  "url": "https://github.com",
  "responseTime": 42
}
Enter fullscreen mode Exit fullscreen mode

Exactly 6 fields — ready to render as a card.

React Hook 

function useLinkPreview(url) {
  const [preview, setPreview] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!url) return;
    setLoading(true);
    fetch(
      `https://metapeek.p.rapidapi.com/v1/preview?url=${encodeURIComponent(url)}`,
      {
        headers: {
          'x-rapidapi-key': import.meta.env.VITE_RAPIDAPI_KEY,
          'x-rapidapi-host': 'metapeek.p.rapidapi.com'
        }
      }
    )
      .then(r => r.json())
      .then(data => { setPreview(data); setLoading(false); })
      .catch(() => setLoading(false));
  }, [url]);

  return { preview, loading };
}
Enter fullscreen mode Exit fullscreen mode

Full Metadata with /v1/extract

Need more than just preview data? The extract endpoint returns 14 fields:

curl "https://metapeek.p.rapidapi.com/v1/extract?url=https://github.com"   -H "x-rapidapi-key: YOUR_API_KEY"   -H "x-rapidapi-host: metapeek.p.rapidapi.com"
Enter fullscreen mode Exit fullscreen mode

You get: title, description, image, favicon, siteName, type, locale, twitter card data, author, publishedTime, themeColor, canonical URL, and response time.

Field Filtering

Only need specific fields?

GET /v1/extract?url=https://dev.to&fields=title,description,image
Enter fullscreen mode Exit fullscreen mode

Python 

import requests

def get_link_preview(url, api_key):
    resp = requests.get(
        "https://metapeek.p.rapidapi.com/v1/preview",
        params={"url": url},
        headers={
            "x-rapidapi-key": api_key,
            "x-rapidapi-host": "metapeek.p.rapidapi.com"
        }
    )
    return resp.json()

preview = get_link_preview("https://github.com", "YOUR_KEY")
print(f"{preview['title']} - {preview['domain']}")
Enter fullscreen mode Exit fullscreen mode

Pricing

  • Free: 100 requests/day (no credit card)
  • Basic: $9.99/mo — 5,000/day + batch endpoint
  • Pro: $29.99/mo — 25,000/day + batch (50 URLs)

Free tier is enough for development and small projects.

Try it on RapidAPI: Search MetaPeek

Top comments (0)