# SEO Configuration for the Tanstack Start Supabase Starter Kit > Configure sitemaps, metadata, structured data, and search engine optimization for your Makerkit SaaS application. *Canonical: https://makerkit.dev/docs/tanstack-supabase/development/seo* --- SEO in Makerkit starts with the TanStack Router route `head` option for page-level metadata, an auto-generated sitemap at `/sitemap.xml`, and a `/robots.txt` server route. The kit handles technical SEO out of the box, so you can focus on content quality and backlink strategy. {% sequence title="SEO Configuration" description="Set up search engine optimization for your SaaS" %} [Configure page metadata](#page-metadata) [Customize the sitemap](#sitemap-configuration) [Add structured data](#structured-data) [Submit to Google Search Console](#google-search-console) {% /sequence %} ## Page Metadata ### Route head option Set page-level SEO with the route `head` option. It returns `meta` and `links` arrays that TanStack Router merges into the document ``: ```tsx {% title="apps/web/src/routes/_marketing/pricing.tsx" %} import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/_marketing/pricing')({ head: () => ({ meta: [ { title: 'Pricing | Your SaaS Name' }, { name: 'description', content: 'Simple, transparent pricing. Start free, upgrade when you need more.', }, { property: 'og:title', content: 'Pricing | Your SaaS Name' }, { property: 'og:description', content: 'Simple, transparent pricing for teams of all sizes.', }, { property: 'og:image', content: '/images/og/pricing.png' }, { property: 'og:type', content: 'website' }, { name: 'twitter:card', content: 'summary_large_image' }, { name: 'twitter:title', content: 'Pricing | Your SaaS Name' }, { name: 'twitter:description', content: 'Simple, transparent pricing for teams of all sizes.', }, { name: 'twitter:image', content: '/images/og/pricing.png' }, ], }), component: PricingPage, }); function PricingPage() { // ... } ``` ### Dynamic Metadata For pages with dynamic content, fetch the data in the route `loader` and derive `head` from the loaded data: ```tsx {% title="apps/web/src/routes/_marketing/blog/$slug.tsx" %} import { createFileRoute } from '@tanstack/react-router'; import { createCmsClient } from '@kit/cms'; export const Route = createFileRoute('/_marketing/blog/$slug')({ loader: async ({ params }) => { const cms = await createCmsClient(); const post = await cms.getContentBySlug({ slug: params.slug, collection: 'posts', }); return { post }; }, head: ({ loaderData }) => { const post = loaderData?.post; return { meta: [ { title: `${post?.title} | Your SaaS Blog` }, { name: 'description', content: post?.description }, { property: 'og:title', content: post?.title }, { property: 'og:description', content: post?.description }, { property: 'og:image', content: post?.image }, { property: 'og:type', content: 'article' }, ], }; }, component: BlogPostPage, }); ``` ### Global Metadata Default document metadata lives in `apps/web/src/lib/root-metadata.ts`. The `getRootHead` helper builds the base `meta` + `links`, and the root route at `apps/web/src/routes/__root.tsx` returns them from its `head()`. Individual routes override these per page: ```tsx {% title="apps/web/src/lib/root-metadata.ts" %} import appConfig from '#/config/app.config.ts'; export function getRootHead() { const title = appConfig.title; const description = appConfig.description; return { meta: [ { charSet: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { title }, { name: 'description', content: description }, { name: 'application-name', content: appConfig.name }, { property: 'og:title', content: title }, { property: 'og:description', content: description }, { property: 'og:url', content: appConfig.url }, { property: 'og:site_name', content: appConfig.name }, { name: 'twitter:card', content: 'summary_large_image' }, { name: 'twitter:title', content: title }, { name: 'twitter:description', content: description }, ], links: [{ rel: 'icon', href: '/images/favicon/favicon.ico' }], }; } ``` ## Sitemap Configuration Makerkit auto-generates a sitemap at `/sitemap.xml`. The configuration lives in the TanStack Start server route at `apps/web/src/routes/sitemap[.]xml.ts` (the bracketed filename escapes the dot so the route matches `/sitemap.xml`). ### Adding Static Pages Add new pages to the `STATIC_PATHS` array: ```tsx {% title="apps/web/src/routes/sitemap[.]xml.ts" %} // Static, publicly-indexable marketing paths. CMS-backed blog posts and docs // pages are appended dynamically below. const STATIC_PATHS = [ '/', '/pricing', '/faq', '/blog', '/docs', '/contact', '/about', // Add new pages '/features', '/privacy-policy', '/terms-of-service', '/cookie-policy', ]; ``` The route builds the XML from these paths (prefixed with `appConfig.url`) and returns it from the `GET` server handler. ### Dynamic Content Blog posts and documentation pages are appended automatically. The CMS integration handles this inside the sitemap builder: ```tsx // Blog posts and docs are added automatically const [posts, docs] = await Promise.all([ client.getContentItems({ collection: 'posts', content: false }), client.getContentItems({ collection: 'documentation', content: false }), ]); posts.items.forEach((item) => paths.push(`/blog/${item.slug}`)); docs.items.forEach((item) => paths.push(`/docs/${item.slug}`)); ``` ### Excluding Pages Exclude pages from the sitemap by not including them in `STATIC_PATHS`. For pages that should not be indexed at all, add a `robots` meta tag from the route `head`: ```tsx head: () => ({ meta: [{ name: 'robots', content: 'noindex, nofollow' }], }), ``` ## Structured Data Add JSON-LD structured data for rich search results. Render a `