3 ways to add link previews to a React app (with and without a backend)

Link previews (those little cards with a title, image, and description) make any list of URLs dramatically more scannable. But you can't build them purely client-side: fetching another site's HTML from the browser is blocked by CORS, and even if it weren't, you'd be shipping a full HTML parser to every visitor.

You need something server-side. Here are three ways to do it in a React app, from zero-backend to full DIY.

Option 1: Zero backend — call a metadata API from the client

If your app has no server (static SPA, GitHub Pages, etc.), use a metadata extraction API that supports CORS. I built LinkPeek for exactly this — it returns title, description, image, favicon, site name, OpenGraph and Twitter Card data as JSON.

import { useEffect, useState } from "react";