DEV Community

eatyou eatyou
eatyou eatyou

Posted on

How I Built a Link Preview API on Cloudflare Workers for $0

#webdev #cloudflare #api #javascript

Adding link previews to a web app sounds simple until you actually try it. You need to:

  • Fetch the target URL
  • Parse HTML for Open Graph tags, meta tags, favicon
  • Handle timeouts, redirects, encoding issues
  • Optionally generate a visual preview card
  • Cache results so you're not hammering the same URLs

Most developers either self-host a scraper (hello, Puppeteer memory leaks) or pay $12-76/month for services like Microlink or OpenGraph.io.

I wanted something simpler. So I built LinkPeek — a link preview API that runs entirely on Cloudflare's free tier.

The Stack

  • Cloudflare Workers — serverless compute at the edge
  • Hono — lightweight web framework (Express-like but for Workers)
  • D1 — SQLite database for API keys, usage tracking, and caching

Total monthly cost: $0.

What It Does

1. Metadata Extraction 

curl "https://linkpeek-api.linkpeek.workers.dev/v1/preview?url=https://github.com&key=YOUR_KEY"
Enter fullscreen mode Exit fullscreen mode

Returns:

{
  "url": "https://github.com",
  "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/assets/campaign-social.png",
  "favicon": "https://github.githubassets.com/favicons/favicon.svg",
  "site_name": "GitHub"
}
Enter fullscreen mode Exit fullscreen mode

2. SVG Preview Cards 

<img src="https://linkpeek-api.linkpeek.workers.dev/v1/preview/image?url=https://github.com&key=YOUR_KEY" />
Enter fullscreen mode Exit fullscreen mode

Generates a styled SVG card with the site's metadata — ready to embed anywhere.

How the Metadata Extraction Works

The core logic fetches the target URL and parses the HTML response for:

  1. Open Graph tags (og:title, og:description, og:image)
  2. Twitter Card tags (twitter:title, twitter:description, twitter:image)
  3. Standard meta tags (title, description, favicon)
  4. Fallbacks (h1 tags, first paragraph, etc.)

Results are cached in D1 for 1 hour to avoid redundant fetches.

The SVG Card Generator

Instead of using headless browsers to render preview images (expensive!), I generate SVG cards server-side. SVGs are:

  • Lightweight (typically under 5KB)
  • Resolution-independent
  • Easily styled
  • Cacheable

Security

A few things I built in:

  • SSRF Protection — blocks requests to localhost, private IPs
  • Rate Limiting — 100 req/day free, with X-RateLimit-* headers
  • HTML Size Limit — responses capped at 1MB
  • Register Rate Limit — max 5 per IP per hour

API Endpoints

Endpoint Description
POST /v1/register Get free API key
GET /v1/preview?url= JSON metadata
GET /v1/preview/image?url= SVG preview card
GET /v1/usage Usage stats
GET /docs Full API docs

Getting Started

Register for a free API key:

curl -X POST https://linkpeek-api.linkpeek.workers.dev/v1/register \n  -H "Content-Type: application/json" \n  -d '{"email": "you@example.com"}'
Enter fullscreen mode Exit fullscreen mode

Then start making requests — 100/day free.

What's Next

  • PNG screenshots — URL-to-image rendering
  • Custom card templates — user-styled preview cards
  • Higher rate limits — paid tiers at $9/mo and $29/mo

Try It

LinkPeek: https://linkpeek-api.linkpeek.workers.dev

Docs: https://linkpeek-api.linkpeek.workers.dev/docs

Free tier, no credit card needed. Would love your feedback!

Built with Cloudflare Workers, Hono, and D1.

Top comments (0)