Meta Tags for React

React 19: no library needed

Since React 19, you can render <title>, <meta> and <link> tags anywhere in a component, and React automatically moves them into the document <head>. That lets each route or page component own its metadata. Two rules: <title> must contain a single string (build it with a template string first), and render each tag only once per page.

React 18 and older: react-helmet-async

Before React 19, the usual tool is react-helmet-async (use it instead of the older react-helmet, which isn’t safe for server rendering). Wrap your app once in <HelmetProvider>, then put a <Helmet> block in each page. The deepest Helmet wins, so a page’s title overrides the default set in your layout.

The big catch: single-page apps

If your React app is a client-side SPA (Create React App, a plain Vite app), the HTML your server sends is an almost empty <div id="root">. Tags are added only after JavaScript runs:

• Google does run JavaScript, so it usually sees your tags, but rendering can be delayed and errors can hide them.
• Facebook, LinkedIn, X, WhatsApp, Slack and Discord do not run JavaScript. They only read the original HTML, so every shared link shows the same default card, or none.

The fixes, from simplest to strongest: put good default tags in index.html; pre-render your public pages at build time (for example with a Vite pre-render plugin); or use a framework with server rendering such as Next.js, Remix/React Router or Astro. If your app is behind a login, default tags in index.html are usually enough.

Test what crawlers really see

View the page source (Ctrl+U), not the Elements panel: the source is what social crawlers get. For Google, use URL Inspection in Search Console and look at the rendered HTML.