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