Build Discord-Style Rich Link Previews in React (Without CORS Issues)

Have you ever tried to build a link preview card—like the ones you see in Discord, Twitter, or Slack—only to be instantly blocked by CORS errors? If you try to fetch a URL directly from your frontend React application to scrape its <meta> tags, the browser's security model will stop you in your tracks. You have to do this from a backend. But instead of spinning up a whole Node.js/Puppeteer backend just to scrape OpenGraph tags, I’m going to show you how to do this in 5 minutes using a blazing-fast Rust-based utility API. The Goal We are going to build a React component <LinkPreview url="..." /> that takes a URL and automatically renders a beautiful card with the site's title, description, and preview image. Step 1: Get your API Key To bypass CORS and extract the rich metadata, we'll use the Core Web Utilities API on RapidAPI . Go to the Core Web Utilities API page . Subscribe to the Free tier. Grab your x-rapidapi-key . Step 2: The React Component Here is the complete code for our Link