seo

Give every page a title, a share preview and a sitemap entry so search engines and chat apps show it well.

Pages & routingClientServer

What it is

@kitr/seo gives a route its tags in one call, seo({ title, description }), with site defaults from config/seo.ts. jsonLd() adds structured data, ssrRoute() picks how a route renders, and the build writes the sitemap and robots.txt.

Runs on both sides. Tags only help when crawlers get HTML, so use the web platform in ssr or static mode.

Install

kitr add seo

First time? Run npm i -g @kitr/kitr once. Inside a project, the global kitr runs your project's own version.

Adds @kitr/seo and config/seo.ts. No provider. Every change.

Quick start

Set head on a route and return seo() from it:

// app/routes.ts
import { seo } from '@kitr/seo'

r.page('/pricing', {
  head: () => seo({ title: 'Pricing', description: 'Plans for every team size.' }),
  lazy: () => import('./pages/pricing'),
})

Open /pricing and view the page source. The root route's <HeadContent /> renders the tags into <head>:

<title>Pricing</title>
<meta property="og:title" content="Pricing">
<meta name="twitter:title" content="Pricing">
<meta name="description" content="Plans for every team size.">
<meta property="og:description" content="Plans for every team size.">
<meta name="twitter:description" content="Plans for every team size.">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary">

seo() returns { meta, links }, the shape TanStack Router's head expects, with Open Graph and Twitter tags filled in. The router swaps tags on each navigation. Next in the guide: Give a page its title.

Built on

kitr adds the tag set, site defaults, JSON-LD helpers, the sitemap and robots.txt, and per-route rendering and caching choices.

Problems it solves

Further reading