React SEO: how to make a React and Vite site rank

A standard Vite React build produces an index.html with an empty root element and a script tag. Every route serves that same file, and React builds the page in the browser. Google can render it later, but every route starts with the same title and no content, many AI crawlers see nothing, and social previews show the default metadata.

Pick by how often content changes.

React 19 lets components render title, meta, and link elements directly; React hoists them into the document head, including during server rendering and prerendering. That removes the need for helper libraries in many apps. Keep metadata in a single registry keyed by route, so the prerender and the browser use the same values, and make sure no layout component overwrites page values with defaults after hydration. We had exactly that bug: a layout fallback applied noindex to routes missing from the registry.

Use your router's Link component, which renders real anchor elements with href. Avoid navigation via onClick on non-link elements. Use path-based routes, not hash routes. When hydrating prerendered HTML, the first client render must match the server output; content that depends on browser-only state, such as stored preferences or translations, should render after hydration, or React will discard the server HTML. Lazy-load heavy components, but keep primary text in the initial render.

Test the built HTML files, not the dev server. For each public route, check that the HTML contains the H1, main text, a unique title and description, a self-referencing canonical, and valid JSON-LD. Our build runs a verifier over every prerendered route and fails on any missing or mismatched element, and a separate check limits the JavaScript shipped at startup. Then use URL Inspection's live test on a few deployed routes to confirm Google sees the same. SerionFlow is the wrong tool for changing your React app's rendering; it serves its own pages as complete HTML beside your app.