Skip to main content
All guidesScan my site

Set a unique <title> and Open Graph tags on every route

Every route gets its own title, description, og:title, og:description, og:url. Never reuse the homepage's tags.

Worth up to 8 points

Why it matters

Search engines and AI summarizers use `<title>` and `<meta name="description">` as the canonical short description of a page. Social previews on Slack, X, LinkedIn use og:title and og:image. If every page on your site shares the homepage's tags, every share preview looks identical and no page can rank for its own keywords.

How to fix it

  1. 1. Set per-route metadata

    In TanStack Start, that's the `head()` option on each route's `createFileRoute`. In Next.js App Router, it's the exported `metadata` const. In Astro, it's the `<head>` of each .astro page.

    // TanStack Start example
head: () => ({
  meta: [
    { title: "Pricing — Acme" },
    { name: "description", content: "Simple monthly pricing." },
    { property: "og:title", content: "Pricing — Acme" },
    { property: "og:description", content: "Simple monthly pricing." },
    { property: "og:url", content: "https://acme.com/pricing" },
  ],
  links: [{ rel: "canonical", href: "https://acme.com/pricing" }],
})

  2. 2. Keep titles under 60 characters

    Google truncates titles around 60 chars; descriptions around 160. Front-load the keyword and brand.

  3. 3. Set og:image only when you have a real image

    A generic placeholder previews worse than no image. Use a hero image, product photo, or a generated OG image per route.

FAQ

Where should og:image NOT live?
Never on a root or layout route — it overrides every child page's image. Put it on leaves only.

See your own score

Run a free Crawlable scan to find every check that needs fixing on your site — not just this one.

Check my site

More guides