How to Add Link Previews to Your React App

Link previews — those little cards that show a title, description, and image when you paste a URL — are a great UX touch for chat apps, social feeds, or any interface where users share links. In this tutorial, we will build a reusable React component that fetches and displays link previews. The Problem Browsers block cross-origin requests for security reasons. You cannot fetch https://github.com from your React app and read its <meta> tags directly — CORS will stop you. The solution: a server-side proxy that fetches the URL, parses the HTML, and returns structured metadata. Building the Hook Let us start with a useLinkPreview hook: import { useState, useEffect } from 'react'; function useLinkPreview(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { if (!url) return; const controller = new AbortController(); setLoading(true); setError(null); fetch(`/api/preview?url=${encodeUR