How to Build Link Previews with a URL Metadata API

When a user pastes a URL into your app, they expect a rich preview — a title, a description, maybe a thumbnail. Slack does it. Twitter does it. Your users expect it too.

Building a link unfurler from scratch means writing an HTML scraper, handling redirects, parsing Open Graph and Twitter Card meta tags, extracting favicons, and dealing with timeouts and malformed HTML. That's a lot of edge cases for a "nice to have" feature.

The Simpler Approach: Use a Metadata API

The API Snap URL Metadata endpoint does the heavy lifting. Send it a URL, get back structured data:

curl "https://api-snap.com/api/meta?url=https://github.com" \
  -H "Authorization: Bearer snp_your_api_key"

Response:

{
  "title": "GitHub: Let's build from here",
  "description": "GitHub is where over 100 million developers shape the future of software...",
  "image": "https://github.githubassets.com/images/modules/site/social-cards/...",
  "favicon": "https://github.githubassets.com/favicons/favicon.svg",
  "url": "https://github.com",
  "siteName": "GitHub"
}

No scraping. No parsing. No handling of redirect chains or charset issues. Just clean, structured metadata.

Building a Link Preview Component

Here's how you might use this in a React app with a backend API route:

Backend (Node.js / Next.js API Route)

export async function GET(req: Request) {
  const url = new URL(req.url).searchParams.get("url");
  const res = await fetch(
    `https://api-snap.com/api/meta?url=${encodeURIComponent(url)}`,
    { headers: { Authorization: `Bearer ${process.env.SNAPAPI_KEY}` } }
  );
  return Response.json(await res.json());
}

Frontend (React)

function LinkPreview({ url }) {
  const [meta, setMeta] = useState(null);
  useEffect(() => {
    fetch(`/api/preview?url=${encodeURIComponent(url)}`)
      .then(r => r.json())
      .then(setMeta);
  }, [url]);

  if (!meta) return null;
  return (
    <a href={url} className="link-card">
      {meta.image && <img src={meta.image} alt="" />}
      <h3>{meta.title}</h3>
      <p>{meta.description}</p>
      <span>{meta.siteName}</span>
    </a>
  );
}

Use Cases Beyond Chat

• CMS and blog editors — auto-generate card previews when authors paste links
• Bookmark managers — enrich saved URLs with titles and thumbnails
• Social media dashboards — preview how links will appear when shared
• SEO tools — audit Open Graph tags across multiple pages

Handling Edge Cases

The API handles common pitfalls so you don't have to:

• Follows redirects (HTTP → HTTPS, www → non-www, vanity URLs)
• Parses both Open Graph and Twitter Card tags, falling back gracefully
• Extracts favicons from <link> tags and common paths
• Returns clean, normalized data even for poorly structured pages

Pricing for Link Preview Features

If your app unfurls links for every message in a chat, usage adds up. The free plan covers testing and low-traffic apps (100 calls/month). For production chat apps, the Hobby plan ($9/mo, 5,000 calls) or Pro plan ($29/mo, 50,000 calls) will handle the volume. Consider caching results for URLs you've already seen — metadata rarely changes hour to hour.

Get Started

Create a free account, grab your API key, and try the metadata endpoint in under a minute. Pair it with the Screenshot API if you also need visual thumbnails of pages — our guide on building a thumbnail generator walks through the full pattern.