Skip to content

Metadata · Vite + React

Every page needs a title tag in Vite + React

The title is the clickable line in every search result and the label on every browser tab. Without one, search engines invent something from your page content and you have no control over the first thing anyone reads about you.

The fix for Vite + React

13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.

A Vite SPA has one index.html, so titles must be set at runtime. Use react-helmet-async, or set it directly per route:

tsx code
import { useEffect } from "react";

export function usePageTitle(title: string) {
  useEffect(() => {
    document.title = `${title} — example.com`;
  }, [title]);
}

Be aware this only helps browsers and crawlers that execute JavaScript. For reliable search and social previews, prerender the routes or move to a framework with server rendering.

On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.

Check your Vite + React site

113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.

No signup. Results in 30 seconds.

The same fix, other stacks