Add Rich Link Previews to Any Web App in 5 Minutes (React, Vue, Node.js)

Every chat app, social feed, and CMS needs link previews. You paste a URL, and it shows the title, description, and image — like Slack, Discord, or Twitter. Building this yourself means: Fetching r...

By · · 1 min read
Add Rich Link Previews to Any Web App in 5 Minutes (React, Vue, Node.js)

Source: DEV Community

Every chat app, social feed, and CMS needs link previews. You paste a URL, and it shows the title, description, and image — like Slack, Discord, or Twitter. Building this yourself means: Fetching remote pages server-side Parsing Open Graph / Twitter Card meta tags Handling timeouts, redirects, encodings Caching results Running a headless browser if you want screenshots Or you can use an API and skip all of that. Here's how to add link previews to your app in under 5 minutes using LinkPeek — a free link preview API. Step 1: Get a Free API Key curl -X POST https://linkpeek-api.linkpeek.workers.dev/v1/register \ -H "Content-Type: application/json" \ -d '{"email": "[email protected]"}' Response: { "api_key": "lp_aBcDeFgHiJkLmNoPqRsTuVwXyZ012345", "plan": "free", "daily_limit": 100 } Free tier: 100 requests/day, no credit card. Step 2: Fetch Link Metadata Node.js / Express // server.js app.get('/api/preview', async (req, res) => { const { url } = req.query; const response = await fetch( `h