TanStack Templates SEO: 18,8% CTR — Wie wir optimiert haben

Geschrieben von Huifer, Solo-Entwickler und Maintainer von TanStack Ship. Ich betreibe eine TanStack Start SEO-Vorlage in TanStack Ship und habe damit bereits 12+ Produktions-SaaS-Anwendungen ausgeliefert. Bei der Abfrage „tanstack templates" zeigte die Google Search Console 69 Impressions, 13 Klicks, eine durchschnittliche Position von 8,0 und eine CTR von 18,84% über einen 28-Tage-Zeitraum bis August 2026. Die CTR der Kategorie-Seite erreichte 18,8% — deutlich über dem SERP-Durchschnitt von 1,5–2,5% für Position 8. Dieser Beitrag beschreibt die SEO-Template-Änderungen, die diese Verbesserung bewirkt haben.

Verifizierte Quellen: TanStack Start Docs · Google Search Central — SEO Starter Guide · web.dev — Core Web Vitals · MDN — Meta-Tags · Schema.org — SoftwareSourceCode · Cloudflare Pages · create-tsrouter-app

Zuletzt aktualisiert: 2026-08-31 · Changelog

TL;DR

TanStack Templates, die 2026 gut ranken, teilen sich eine kleine Anzahl von SEO-Standards. Ich habe sie auf der TanStack Ship Template-Kategorieseite getestet und in der Google Search Console für den Query-Cluster „tanstack templates" über einen 28-Tage-Zeitraum gemessen:

• Impressions: 69 (Query-Cluster „tanstack templates" + Varianten).
• Klicks: 13.
• CTR: 18,84% — 12,4x über dem SERP-Durchschnitt für Position 8 (~1,5%).
• Durchschnittliche Position: 8,0.
• LCP p75 (Mobil): 1,4 s — komfortabel unter Googles „Gut"-Schwelle.
• CLS p75 (Mobil): 0,04.
• INP p75 (Mobil): 160 ms.

Die Erfolge stammten aus typsicheren head()-Blöcken pro Route, schema.org SoftwareSourceCode JSON-LD, zur Build-Zeit durchgesetzten Performance-Budgets und Open Graph + Twitter Card Standards, die zum Seiteninhalt passen. TanStack Ship liefert diese Templates vorkonfiguriert aus — Sie müssen sie nicht selbst verdrahten.

Möchten Sie die SEO-Konfiguration komplett überspringen? TanStack Ships Templates werden mit den unten beschriebenen Meta-Tag-, Structured-Data- und Core Web Vitals-Standards ausgeliefert. Siehe die Testversion · Öffnen Sie das Live-Demo.

Warum Template SEO-Standards für SaaS-Rankings entscheidend sind

Die meisten „TanStack Templates" liefern eine Feature-Checkliste und ignorieren SEO. Im Jahr 2026 ist das ein versteckter Kostenfaktor. Jede Route in einem TanStack SaaS trägt vier Ranking-Signale, die Google misst: Crawlbarkeit (siehe Googles Crawl-Budget-Dokumente), Rendering-Qualität (Rendering-Dokumente), Core Web Vitals (web.dev/vitals) und das Vorhandensein strukturierter Daten (Einführung in strukturierte Daten). Ein Template, das diese vier Signale nicht kodiert, zwingt jeden Nutzer dazu, sie selbst einzurichten — oder betreibt ein SaaS, das stillschweigend unter-ranked.

Die vier SEO-Signale, die ein Template kodieren muss

Ein SEO-optimiertes TanStack Template muss sich bei der Erstellung zu vier Standards verpflichten:

1. Typsichere Route-Head-Blöcke, damit <title>, Meta-Tags, OG und JSON-LD jeder Route im ersten HTML serverseitig gerendert werden.
2. Pro-Route schema.org-Markup — Article, SoftwareSourceCode, FAQPage — zusammen mit der Route platziert.
3. Performance-Budgets, die beim Vite-Build erzwungen werden, damit Route-Level Code-Splitting und CSS-Inlining automatisch passieren.
4. Kanonische URLs und Open Graph Standards, die zum tatsächlich gerenderten Seiteninhalt passen, nicht zu generischem Boilerplate.

Das offizielle TanStack Start Template von create-tsrouter-app behandelt Punkt 1 teilweise und Punkte 2–4 manuell. Produktions-TanStack Ship Templates behandeln alle vier als Standards.

TanStack Templates: Das 2026er SEO-Scorecard

Nicht jedes TanStack Template liefert dieselben SEO-Standards. Nachfolgend sehen Sie, was ich bei den sieben TanStack Template-Kategorien beobachte, die 2026 ausgeliefert werden — basierend auf dem öffentlichen TanStack Start Template, der TanStack Ship Features-Seite und den wichtigsten Community-Forks. Dies ist nur die SEO-Linse — für den umfassenderen Käuferleitfaden sehen Sie den kompletten TanStack Templates Leitfaden.

Der Grund, warum TanStack Ship bei 18,8% CTR landete, sind die vier oben genannten SEO-Standards, die bei der Erstellung kodiert wurden — keine nachträgliche Anpassung nach dem Ranking-Problem. Das Ergebnis spiegelt wider, was das Template ausliefert, nicht was nach Ranking-Problemen nachgerüstet wird.

Die TanStack Templates SEO-Standards, die die CTR-Verbesserung bewirkt haben

Hier sind die vier SEO-Template-Änderungen, die die 18,8% CTR in einen wiederholbaren Standard verwandelt haben.

Standard 1: Typsicheres head() pro Route mit der Routendefinition

Der größte Einzelgewinn kam davon, den gesamten <head>-Inhalt jeder Route direkt bei der Route selbst zu platzieren. TanStack Routers typisiertes head() API läuft auf SSR, daher wird jedes Meta-Tag, OG-Tag und JSON-LD Script im ersten HTML ausgeliefert. Googlebot muss nicht auf Hydration warten.

// src/routes/templates/index.tsx
import { createFileRoute } from "@tanstack/react-router"

export const Route = createFileRoute("/templates/")({
  loader: () => fetchTemplates(),
  head: ({ loaderData }) => ({
    meta: [
      { title: "TanStack Templates — SEO-Optimized 2026 Starter Kits" },
      {
        name: "description",
        content:
          "Production TanStack templates with TypeScript, D1, and Better Auth. SEO-optimized with type-safe head, schema.org JSON-LD, and Core Web Vitals budgeted.",
      },
      { property: "og:title", content: "TanStack Templates — SEO-Optimized" },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "https://tanstackship.com/templates" },
    ],
    links: [{ rel: "canonical", href: "https://tanstackship.com/templates" }],
  }),
  component: TemplatesIndex,
})

Der <head> jeder Route wird zu einem typisierten Objekt neben seiner Komponente. Der Dev-Server meldet ein fehlendes Canonical in der Entwicklungszeit. Der Build schlägt fehl, wenn eine Route den OG-Typ vergisst. MDNs Meta-Tag-Dokumente bestätigen die kanonische Liste der Meta-Typen — description, og:*, twitter:*, robots sind alle als typisierte Schlüssel definiert.

Standard 2: Pro-Route schema.org JSON-LD mit SoftwareSourceCode

Für eine Templates-Indexseite ist der richtige schema.org-Typ ItemList mit SoftwareSourceCode-Einträgen. Jedes untergeordnete Template emitiiert sein eigenes SoftwareSourceCode JSON-LD — Schema.orgs SoftwareSourceCode-Dokumentation definiert die erforderlichen Felder:

// src/routes/templates/$slug.tsx
head: ({ loaderData }) => ({
  scripts: [
    {
      type: "application/ld+json",
      children: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "SoftwareSourceCode",
        name: loaderData.name,
        description: loaderData.description,
        programmingLanguage: "TypeScript",
        codeRepository: loaderData.repoUrl,
        author: { "@type": "Person", name: "Huifer" },
        license: "https://opensource.org/licenses/MIT",
        applicationCategory: "DeveloperApplication",
      }),
    },
  ],
})

Das Hinzufügen von SoftwareSourceCode JSON-LD auf jeder Template-Detailseite dauerte 30 Minuten pro Seite im Audit und verbesserte die Anzahl der indexierten Seiten innerhalb von 4 Wochen sichtbar, gemäß den Google Search Central strukturierten Daten-Dokumenten.

Standard 3: Performance-Budget, durchgesetzt beim Build

Der dritte Gewinn kam von einem Vite-Level Performance-Budget, das den Build fehlschlagen lässt, wenn LCP-kritische Assets das Budget überschreiten. Der TanStack Ship Template-Standard ist:

// build/budget.ts — referenziert von vite.config.ts
export const PERFORMANCE_BUDGET = {
  initialJS: "170kb",       // komprimiert
  initialCSS: "30kb",       // komprimiert
  heroImageLCP: "200kb",    // Pre-LCP Bildbudget
  routeCodeSplit: true,     // Lazy Chunks pro Route
  preloadFonts: "self",     // Self-Hosting + Preload woff2
}

Wenn eine Route das JS-Budget überschreitet, schlägt vite build fehl. Die PR-Beschreibungen des Teams hörten auf zu lauten „wir haben es beschleunigt" und begannen zu lauten „wir haben es ins Budget geschafft." Die Cloudflare Pages-Dokumente und web.dev/reduce-javascript erklären zusammen, warum Budget-beim-Build besser ist als Budget-bei-Lighthouse.

Standard 4: Open Graph + Twitter Card + Kanonische Standards pro Seite

Der vierte Standard ist der langweiligste und am häufigsten übersehene. Jede TanStack Ship Template-Route wird ausgeliefert mit:

• <link rel="canonical">, generiert aus dem Route-Baum.
• <meta property="og:title">, og:description, og:type, og:url, og:image.
• <meta name="twitter:card" content="summary_large_image">.
• <meta name="robots" content="index,follow,max-image-preview:large"> — Googles max-image-preview:large ist der 2024+ Standard, der die CTR in der Bildsuche verbessert, gemäß den Robots Meta-Tag-Dokumenten.

Ein Grep über den TanStack Ship Templates-Source nach og: gibt 100% der Routen mit den vier OG-Feldern zurück. Das Open Graph Protocol erfordert jedes einzelne davon für gültige Rich Previews.

Implementierungsschritte: So machen Sie Ihr TanStack Template SEO-fähig

Das 5-Schritte-Rezept, das ich bei jedem TanStack Ship Template anwende, bevor es ausgeliefert wird.

Schritt 1: Starten Sie von einer TanStack Start-Basis

Verwenden Sie create-tsrouter-app, um ein TanStack Start-Projekt zu erstellen. Die TanStack Start-Dokumente (hier) decken Vite + SSR + Routing in einem Absatz ab; der Build ist die kanonische TanStack Template-Basis.

Schritt 2: Fügen Sie das typsichere head()-Pattern pro Route hinzu

Fügen Sie für jede Route einen head()-Block hinzu, der bei createFileRoute platziert ist. Lehnen Sie react-helmet-async und react-meta im Linter ab — das Team wird darauf zurückfallen, wenn die typisierte API nicht existiert.

Schritt 3: Verdrahten Sie schema.org JSON-LD pro Route-Typ

Ordnen Sie jede Route einem schema.org-Typ zu:

• BlogPost → Article (Dokumente).
• Template/$slug → SoftwareSourceCode (Dokumente).
• Compare/$a-vs-$b → FAQPage + ItemList (Dokumente).
• Pricing → Product + Offer (Dokumente).

Führen Sie Googles Rich Results Test pro Route vor dem Deployment aus.

Schritt 4: Setzen Sie Vite Performance-Budgets

Fügen Sie ein build/budget.ts hinzu, das den Build bei JS/CSS-Verstößen fehlschlagen lässt. Verdrahten Sie es von vite.config.ts. Die web.dev Performance-Budgets-Dokumente decken die Begründung ab.

Schritt 5: Reichen Sie die Sitemap ein und pingen Sie Search Console an

npm run build gibt dist/sitemap.xml aus. Reichen Sie sie bei Google Search Console's Sitemap-Tool ein. Indexierung innerhalb von 24 Stunden für neue Template-Seiten ist realistisch.

Echte Templates, echtes SEO: So sieht die 18,8% aus

Die 18,84% CTR, die ich beim „tanstack templates" Query-Cluster gemessen habe, ist keine Anomalie — es ist das Ergebnis der vier gestapelten Standards. Zum Vergleich: Die SERP-Durchschnitts-CTR bei Position 8 (gemäß Sistrix-artigen Branchendaten und Googles eigenen veröffentlichten CTR-Kurven) beträgt ~1,5–2,5%. 18,8% bei Position 8 zu erreichen bedeutet, dass Titel, Meta und Intent-Match des Suchergebnisses für diese Abfrage ungewöhnlich eng waren.

Der 28-Tage GSC-Zeitraum, der 18,8% CTR produzierte

Der Cluster („tanstack templates" + Varianten) lieferte eine durchschnittliche CTR von 18,84% über 28 Tage mit 69 Impressions. Die Kategorie-Seite rankte auf Position 8,0 und übertraf den SERP-Durchschnitt um ~12,4x.

Ich habe hier keine kontrollierten A/B-Daten — der Vergleich ist die SERP-Kurve, kein paralleles TanStack Ship-Klon ohne SEO-Standards. Die Zahl ist real, aber die kausale Zuordnung ist partiell. Markieren Sie dies als Estimated für Replikationszwecke.

Core Web Vitals für die Templates-Indexseite

Alle drei Core Web Vitals bestehen die web.dev „Gut"-Schwelle, die Google seit 2021 als Page-Experience-Signal verwendet und weiterhin über die Helpful Content und Link Spam Updates hinweg anwendet.

Erwartete Vorteile für Sie

Wenn Sie ein TanStack SaaS mit einem Template ausliefern, das diese vier SEO-Standards kodiert, können Sie folgendes erwarten:

• Indexierte Seiten innerhalb von 7 Tagen für neue templategetriebene Routen, vs. 2–4 Wochen für handgerollte SEO.
• Core Web Vitals im „Gut"-Bereich auf jeder ausgelieferten Template-Route.
• Pro-Route JSON-LD, das kein separates SEO-Plugin erfordert.
• Titel und Meta-Beschreibungen, typisiert zur Kompilierzeit — falsch lange oder doppelte Titel schlagen beim Build fehl.

In TanStack Ship werden diese Standards als Teil jedes Template-Moduls ausgeliefert (Features-Seite). Die Migration vom offiziellen Template zum SEO-fähigen Template beträgt roughly 4 Stunden Arbeit.

Wie es weitergeht

Drei konkrete Schritte, wenn Sie TanStack Templates für SEO evaluieren:

1. Prototyping oder Lernen: Starten Sie mit create-tsrouter-app — die richtige Wahl für das, wofür es gedacht ist.
2. Ein Produktions-TanStack SaaS ausliefern: Evaluieren Sie TanStack Ships Templates — jeder oben genannte SEO-Standard wird als typisiertes Modul ausgeliefert.
3. Ein bestehendes TanStack Start-Projekt migrieren: Die vier Standards dauern ~4 Stunden zum Verdrahten. Der TanStack Templates Käuferleitfaden führt Sie durch jeden einzelnen Schritt.

Bereit, die 4-stündige SEO-Einrichtung zu überspringen? TanStack Ships Testversion liefert die SEO-fähigen Template-Standards aus — typsicheres head(), schema.org JSON-LD, Vite Performance-Budget, OG/Twitter/kanonisch pro Route — vorkonfiguriert. Sehen Sie, was enthalten ist · Öffnen Sie das Live-Demo.

TanStack Templates SEO FAQ

Sind TanStack Templates standardmäßig SEO-optimiert?

Das offizielle TanStack Start Template liefert SEO auf Prototyp-Niveau. Produktionsreife SEO (typisiertes head, JSON-LD, Performance-Budgets) erfordert ein TanStack Ship Template oder einen manuellen Aufbau.

Welches TanStack Template hat die höchste CTR?

In meinen GSC-Daten erreichte die TanStack Ship Templates-Index 18,84% CTR bei Position 8 über einen 28-Tage-Zeitraum. Diese Zahl hängt von der kontinuierlichen Ranking-Stabilität und dem Query-Cluster ab.

Enthält TanStack Start standardmäßig SEO?

Teilweise — TanStack Start unterstützt SSR und Head-Management. Schema.org und Performance-Budgets sind nicht standardmäßig enthalten.