Meta tags

Meta tags are used to describe the content of a page. It's important to set these tags for each page, as it helps search engines understand what the page is about and can improve the SEO of your app.

Per default, your application builds document titles with documentTitle() from @shared/lib/document-title. The marketing root route sets the default title; every page that needs its own tab label passes a page title into the helper.

export function documentTitle(pageTitle?: string | null) {
  if (!pageTitle) {
    return config.appName;
  }

  return `${pageTitle} – ${config.appName}`;
}

head: () => ({
  meta: [{ title: documentTitle() }],
}),

This setup will result in the title from config.appName (for example supastarter for TanStack Start) for the home page and each page that has no title set.

If a title is set for a page, the helper appends the product name with an en dash, so if your page title is Changelog, the title will be Changelog – supastarter for TanStack Start.

To set meta tags for a specific page, use the route head() function:

export const Route = createFileRoute("/changelog/")({
  head: () => {
    const t = createTranslatorForLocale(getCurrentLocale(), "marketing");
    return {
      meta: [{ title: documentTitle(t("changelog.title")) }],
    };
  },
  component: ChangelogPage,
});

To have an internationalized title, resolve translations in head() with createTranslatorForLocale (as above), then pass the localized string into documentTitle(...).

Learn more about document head management in the TanStack Router documentation.