URL Metadata API: Extract Title, Description, and Open Graph Data from Any URL

You're building a feature that shows link previews — the card with a title, description, and image that appears when someone pastes a URL into Slack, Twitter, or iMessage. To generate that card, you need to fetch the page, parse the HTML, extract Open Graph tags, fall back to meta tags, find the favicon, and handle edge cases like JavaScript-rendered pages, redirects, and encoding issues.

Or you could make one API call and get all of that as structured JSON.

Why Scraping Metadata Yourself Is Painful

• JavaScript-rendered pages — many modern sites don't include Open Graph tags in the initial HTML; they're injected by client-side JavaScript, so a simple fetch returns empty meta tags
• Redirect chains — shortened URLs, tracking redirects, and canonical URLs mean the page you fetch isn't always the page you wanted
• Encoding issues — pages serve content in UTF-8, ISO-8859-1, or other encodings, and getting the charset wrong produces garbled text
• Rate limiting and blocking — many sites block server-side requests that don't look like browsers, returning CAPTCHAs or 403 errors
• Timeout handling — slow sites, large pages, and hanging connections need careful timeout management to avoid blocking your own service

Fetching Metadata in One Request

The API Snap URL Metadata endpoint handles all of this for you:

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

Response:

{
  "title": "GitHub - vercel/next.js: The React Framework",
  "description": "The React Framework. Contribute to vercel/next.js development...",
  "image": "https://opengraph.githubassets.com/...",
  "favicon": "https://github.githubassets.com/favicons/favicon.svg",
  "siteName": "GitHub",
  "type": "object",
  "url": "https://github.com/vercel/next.js"
}

Structured JSON with the title, description, Open Graph image, favicon, and site name. No HTML parsing, no regex, no edge case handling on your end.

Use Cases

Link Previews in Chat and Messaging

When a user pastes a URL into your chat app, fetch the metadata and render a preview card with the page title, description, and thumbnail. This is exactly what Slack, Discord, and iMessage do — and the API gives you the same data they extract.

Bookmark Managers and Read-Later Apps

Auto-populate bookmark entries with the page title, description, and favicon. Users save a URL and immediately see a rich, organized entry instead of a raw link.

CMS Link Embeds

When content editors paste URLs into a rich text editor, automatically convert them into embedded cards with metadata. This is the behavior users expect from modern CMS platforms like Notion and Confluence.

SEO Auditing Tools

Check whether pages have proper Open Graph tags, meta descriptions, and favicons. Batch process a list of URLs and flag any that are missing critical metadata.

Integration Example: React Link Preview Component

async function fetchLinkPreview(url: string) {
  const res = await fetch(
    `https://api-snap.com/api/meta?url=${encodeURIComponent(url)}`,
    { headers: { Authorization: "Bearer snp_your_api_key" } }
  );
  return res.json();
}

// Usage in a React component
const metadata = await fetchLinkPreview("https://stripe.com");
// { title: "Stripe | Payment Processing Platform", image: "...", ... }

Caching Recommendations

Metadata doesn't change frequently. Cache responses for 24–72 hours to reduce API calls and improve latency. If you're building a link preview feature, fetch metadata once when the link is first shared and store the result alongside the message or bookmark.

Try it now — create a free API Snap account and test the URL metadata endpoint with any URL.