SEO

Built-in SEO (Search Engine Optimization) with centralized configuration. Manage your site’s title, description, keywords, and canonical URL from a single config file.

Key features

Centralized meta tag management
Page title and description
Keywords meta tag
Canonical URL for proper indexing

Why this matters?

Good SEO helps search engines understand and rank your content. Proper meta tags improve click-through rates from search results, while canonical URLs prevent duplicate content penalties.

Configuration

Global SEO settings are defined in packages/config/index.ts:

const config: Config = {
  core: {
    websiteUrl: "https://www.example.com",
    appTitle: "My App - A description of what it does",
    appDescription: "A longer description for search engines",
    appKeywords: ["keyword1", "keyword2", "keyword3"],
  }
}

Property	Purpose	Required
`websiteUrl`	Canonical URL for the site	Yes
`appTitle`	Page title shown in browser tab and search results	Yes
`appDescription`	Meta description for search engines	No
`appKeywords`	Keywords meta tag (array of strings)	No

Best Practices

Title: Keep it under 60 characters. Include your brand name and a clear value proposition.

Description: Write 150-160 characters describing your page content. This appears in search results.

Keywords: While less important for modern SEO, include relevant terms that describe your content.

Per-Page SEO

To override the global SEO settings for a specific page, use the head option on your route. TanStack Start collects the meta and links returned here and renders them into the document <head>:

import { createFileRoute } from "@tanstack/react-router"

export const Route = createFileRoute("/about")({
  head: () => ({
    meta: [
      { title: "About Us - My App" },
      { name: "description", content: "Learn more about our team and mission" },
    ],
  }),
  component: AboutPage,
})

function AboutPage() {
  return <div>{/* Page content */}</div>
}

The meta entries returned from a route override the matching global config values for that page. Make sure your root route renders <HeadContent /> inside the document <head> so these tags are emitted.