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