How to Add Link Previews to Your React App (With Code Examples)

When users share links in your React app, showing a rich preview — title, description, image — makes the experience feel polished and professional. Think Slack, Notion, or Twitter. In this guide, I'll show you two approaches: building it from scratch, and using an API to skip the hard parts. Why Link Previews Are Tricky To generate a preview, you need to fetch the target URL and parse its <meta> tags (Open Graph, Twitter Cards, etc.). Simple in theory, but: CORS blocks you — browsers won't let you fetch arbitrary URLs from the frontend JavaScript-rendered sites — many pages need a headless browser to get the right tags Performance — fetching external URLs on every render tanks UX Rate limiting — sites may block your scraper The only real solution is a backend proxy. Approach 1: Build Your Own Backend Proxy Create a small Node.js endpoint that fetches the URL server-side and parses the meta tags: // server.js (Express) const express = require('express'); const axios = require('axi