Build a Link Preview Service in 30 Minutes
Link previews are everywhere — Slack, Discord, Twitter, LinkedIn. Here's how to build your own.
## Architecture
- User submits a URL
- Check Redis cache for existing preview
- If not cached, call ScreenshotAPI for thumbnail
- Store result in Redis with 24h TTL
- Return preview with title, description, and screenshot
## Node.js Implementation
`javascript
const express = require('express');
const Redis = require('ioredis');
const redis = new Redis(); const app = express();
app.get('/preview', async (req, res) => {
const { url } = req.query;
const cached = await redis.get(preview:${url});
if (cached) return res.json(JSON.parse(cached));
const screenshot = await fetch('https://i.ytimg.com/vi/JZUfYUyWTAA/maxresdefault.jpg', {
method: 'POST',
headers: { 'x-api-key': process.env.API_KEY, 'Content-Type': 'application/json' },
body: JSON.stringify({ url, device: 'desktop', format: 'webp' })
});
const data = await screenshot.json();
await redis.set(preview:${url}, JSON.stringify(data), 'EX', 86400);
res.json(data);
});
`
## Performance Tips
- Use WebP format for smaller file sizes
- Cache aggressively — most sites don't change hourly
- Use mobile viewport for compact thumbnails