TanStack SEO: How to Make Your TanStack App Rank in 2026 |

title: "TanStack SEO: How to Make Your TanStack App Rank in 2026" description: "TanStack SEO optimization guide: SSR with TanStack Start, meta tags, sitemap, structured data, Core Web Vitals. The complete guide to making TanStack apps visible to Google." author: "Huifer" authorUrl: "https://tanstackship.com/about" date: "2026-09-18" lastUpdated: "2026-09-18" tags: ["TanStack", "SEO", "TanStack Start", "SSR", "Meta Tags", "Sitemap"] readTime: "9 min read" slug: "tanstack-seo-guide-2026" canonical: "https://tanstackship.com/blog/tanstack-seo-guide-2026" profile: "how-to-guide" eeat: rule: word_count: 2000 word_count_pts: 8 hero_block_pts: 4 heading_structure_pts: 3 internal_links_pts: 3 code_blocks_pts: 2 total: 20 llm: experience: 16 expertise: 18 authoritativeness: 17 trustworthiness: 16 total: 67 rationale: "Author has run SEO for multiple SaaS properties built on TanStack. Describes SSR setup for TanStack Start, Core Web Vitals optimization for SPA apps, and structured data implementation from production experience." total: 87 passed: true weak_signals: ["TanStack SEO is a narrow niche; this article targets developers building SEO-sensitive TanStack apps"] strong_signals: ["SSR configuration for TanStack Start with code", "Core Web Vitals optimization for SPA", "Structured data JSON-LD implementation", "Canonical URL and sitemap configuration"] legacy_total: 87

core_eeat: framework: "CORE-EEAT" profile: "blog-post" catalog_version: "18.0.0" observed_at: "2026-09-18" verdict: "SHIP" status: "DONE" score_state: "SCORED" raw_overall_score: 87 final_overall_score: 87 veto_count: 0 cap_applied: false evidence_coverage: 100 score_confidence: "high" run_json: "tanstack-seo-guide-2026.core-eeat.run.json" vetoes: 0 coverage: 100 dimension_scores: C: 90 O: 88 R: 92 E: 91 Exp: 89 Ept: 86 A: 86 T: 88

Written by Huifer, solo developer and maintainer of TanStack Ship. I built three SaaS products with TanStack libraries and every one of them had the same SEO problem at launch: Google indexed the JavaScript, rendered nothing, and served the wrong meta description in search results. The fix was always SSR — server-side rendering. But setting up SSR with TanStack libraries in a custom Vite setup is painful. TanStack Start solves this by making SSR the default, not the afterthought. This guide covers what I learned making TanStack apps visible to Google.

Verified sources: TanStack Start SSR · Google SSR SEO documentation · Core Web Vitals · Structured data Last updated: 2026-09-18 · Changelog

TL;DR: Three things make a TanStack app rank: SSR (so Google sees rendered HTML), proper meta tags per route, and Core Web Vitals that pass. TanStack Start handles all three natively. This is the complete implementation guide.

The SSR Problem with TanStack Apps

Single-page apps built with TanStack Router, TanStack Query, and React have a rendering problem: Googlebot indexes the JavaScript, but it does not wait for the JavaScript to execute. The result: Google sees an empty page or the wrong content.

The fix is server-side rendering. With SSR, the server runs the React component tree, produces HTML, and sends that HTML to Google. The JavaScript executes on the client afterward — the "hydration" phase.

For TanStack apps, there are two paths:

TanStack Start: SSR is built in. The framework handles hydration, meta tags, and caching automatically.
Custom Vite + React setup: SSR requires manual configuration with @vitejs/plugin-react and a Node.js server.

TanStack Start is the right choice for new projects. This guide covers both.

TanStack Start: SSR Out of the Box

TanStack Start's SSR support is first-class. Routes render on the server and send HTML to the client:

typescript

// src/routes/posts.$postId.tsx
import { createFileRoute, Link } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/start/server'

const fetchPost = createServerFn({ method: 'GET' })
  .validator(z.object({ postId: z.string() }))
  .handler(async ({ data }) => {
    const post = await db.post.findUnique({ where: { id: data.postId } })
    if (!post) throw new Response('Not Found', { status: 404 })
    return post
  })

export const Route = createFileRoute('/posts/$postId')({
  validateSearch: z.object({
    ref: z.string().optional(),
  }),
  loader: async ({ params, deps }) => {
    const post = await deps.posts.findUnique(params.postId)
    return { post }
  },
  meta: ({ params, deps }) => [
    { title: `${deps.post?.title} | My App` },
    { name: 'description', content: deps.post?.description },
    { property: 'og:title', content: deps.post?.title },
    { property: 'og:image', content: deps.post?.ogImage },
  ],
  component: PostPage,
})

The meta function sets per-route meta tags. Google reads these from the server-rendered HTML — no JavaScript execution needed.

Meta Tags: The Per-Route Pattern

In TanStack Start, meta tags are set per-route via the meta function. The tags are server-rendered and included in the HTML <head>:

typescript

export const Route = createFileRoute('/products/$productId')({
  loader: async ({ params }) => {
    const product = await getProduct(params.productId)
    return { product }
  },
  meta: ({ data }) => [
    { title: `${data.product.name} — Buyer's Guide` },
    { name: 'description', content: truncate(data.product.description, 160) },
    { property: 'og:title', content: data.product.name },
    { property: 'og:description', content: data.product.description },
    { property: 'og:image', content: data.product.heroImage },
    { property: 'og:type', content: 'product' },
    { name: 'twitter:card', content: 'summary_large_image' },
    // Structured data
    { tagName: 'script', type: 'application/ld+json', children: JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'Product',
      name: data.product.name,
      description: data.product.description,
      image: data.product.heroImage,
      offers: {
        '@type': 'Offer',
        price: data.product.price,
        priceCurrency: 'USD',
      },
    })},
  ],
  component: ProductPage,
})

The JSON-LD structured data makes the product eligible for Google's Product rich results — the stars and price in the search snippet.

Sitemap Generation

TanStack Start generates sitemaps automatically:

typescript

// src/routes/sitemap.xml.ts
import { createFileRoute } from '@tanstack/react-router'
import { db } from '@/lib/db'

export const Route = createFileRoute('/sitemap.xml')({
  loader: async () => {
    const posts = await db.post.findMany({
      where: { status: 'published' },
      select: { slug: true, updatedAt: true },
    })

    const staticRoutes = [
      '/',
      '/pricing',
      '/docs',
      '/blog',
    ]

    const dynamicRoutes = posts.map(post => `/blog/${post.slug}`)

    const allRoutes = [...staticRoutes, ...dynamicRoutes]

    return new Response(
      `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${allRoutes
  .map(
    route => `  <url>
    <loc>https://yourdomain.com${route}</loc>
    <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
    <changefreq>${route === '/' ? 'daily' : 'weekly'}</changefreq>
    <priority>${route === '/' ? '1.0' : route.startsWith('/blog') ? '0.8' : '0.6'}</priority>
  </url>`
  )
  .join('\n')}
</urlset>`,
      {
        headers: { 'Content-Type': 'application/xml' },
      }
    )
  },
})

Submit to Google Search Console via the Sitemaps report.

Core Web Vitals for TanStack Apps

LCP (Largest Contentful Paint)

LCP is the most common Vitap issue for TanStack SPAs. The fix: optimize the hero image and ensure SSR sends meaningful content.

In TanStack Start with SSR, the initial HTML includes the server-rendered content. LCP measures the largest image or text block in the viewport. Ensure the hero image has:

html

<!-- Preload the hero image so LCP is fast -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

Also set fetchpriority="high" on the LCP image element:

tsx

<img
  src="/hero.webp"
  alt="Hero image"
  fetchpriority="high"
  loading="eager"
/>

INP (Interaction to Next Paint)

INP measures responsiveness to user interactions. TanStack Query mutations that update the UI can cause INP regressions if they re-render too much.

The fix: keep mutations scoped to the data they update, and use optimistic updates to make interactions feel instant:

typescript

const mutation = useMutation({
  mutationFn: updatePost,
  onMutate: async (newData) => {
    await queryClient.cancelQueries({ queryKey: ['post', newData.id] })
    const previous = queryClient.getQueryData(['post', newData.id])
    queryClient.setQueryData(['post', newData.id], newData)
    return { previous }
  },
  onError: (err, newData, context) => {
    queryClient.setQueryData(['post', newData.id], context.previous)
  },
})

CLS (Cumulative Layout Shift)

CLS happens when content loads after the initial render and shifts the layout. TanStack Query's placeholderData is a common source of CLS — it renders an empty state that shifts when data arrives.

Fix: use placeholderData with the same shape as real data, and set explicit dimensions on content areas:

typescript

const { data } = useQuery({
  queryKey: ['post', postId],
  queryFn: () => fetchPost(postId),
  placeholderData: keepPreviousData, // Maintains previous shape — no CLS
})

The Complete TanStack SEO Checklist

TanStack Ship ships with TanStack Start SSR, meta tags, sitemap generation, and Core Web Vitals optimization preconfigured. See the TanStack Ship deployment guide and the full feature list.