TanStack Templates SEO: 实现 18.8% 点击率的模板优化实战

// TanStack Start: 路由级别的 SEO 配置
// File: routes/_index.tsx
import { SeoConfig } from "@tanstack/start/seo";

export const seo: SeoConfig = {
  title: "TanStack Ship — Ship Production SaaS in Days",
  description:
    "The TanStack-powered boilerplate for solo founders. Authentication, Stripe payments, Cloudflare email, and SEO pre-configured. Deploy to edge in one command.",
  canonical: "https://tanstackship.com",
  og: {
    title: "TanStack Ship — Ship SaaS Faster",
    description: "Production-grade SaaS boilerplate with TanStack. One command to Cloudflare Workers.",
    type: "website",
    image: "/og-default.png",
  },
  twitter: {
    card: "summary_large_image",
    site: "@tanstackship",
  },
  schema: {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    name: "TanStack Ship",
    applicationCategory: "BusinessApplication",
    operatingSystem: "Cloudflare Workers",
    offers: {
      "@type": "Offer",
      price: "299",
      priceCurrency: "USD",
    },
  },
};

// .lighthouserc.json — CI 性能预算
{
  "ci": {
    "collect": {
      "settings": {
        "staticDistDir": "./dist/client"
      }
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:seo": ["error", { "minScore": 0.95 }],
        "first-contentful-paint": ["error", { "maxNumericValue": 1800 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "interaction-to-next-paint": ["error", { "maxNumericValue": 200 }],
        "total-blocking-time": ["error", { "maxNumericValue": 200 }]
      }
    }
  }
}

<!-- TanStack Ship SSR 交付给 Googlebot 的内容——从第一个字节开始 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>TanStack Ship Pricing — Plans for Solo Founders</title>
  <meta name="description" content="Simple, transparent pricing. $299 one-time. Includes lifetime updates and priority support.">
  <meta property="og:title" content="TanStack Ship Pricing">
  <meta property="og:description" content="Production SaaS boilerplate for solo founders.">
  <meta property="og:type" content="website">
  <link rel="canonical" href="https://tanstackship.com/pricing">

  <!-- JSON-LD 结构化数据——完全服务端渲染 -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "TanStack Ship",
    "description": "SaaS boilerplate for solo founders on Cloudflare Workers",
    "applicationCategory": "BusinessApplication",
    "operatingSystem": "Cloudflare Workers",
    "offers": {
      "@type": "Offer",
      "price": "299",
      "priceCurrency": "USD",
      "availability": "https://schema.org/InStock"
    }
  }
  </script>
</head>

// TanStack Start: 路由级加载优化
import { createFileRouter } from "@tanstack/start/router";

// 每个路由自动代码分割——无需手动使用 React.lazy
const router = createFileRouter("./routes", {
  // 悬停时预取，实现感知上的即时导航
  preloadStrategy: "hover",
  // 每个路由的最大分块大小（KB）
  routeChunkMaxSize: 150,
  // 视口内可见链接时预加载
  preloadWhileVisible: true,
});

/* TanStack Ship 模板：移动优先响应式 CSS */
/* 大多数布局无需容器查询——简单断点即可 */
:root {
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 默认零 CLS 的布局系统 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-md);
}

/* 移动端不要用 height: 100vh——会导致地址栏滚动 CLS */
.hero {
  min-height: 80svh; /* svh = 小视口高度，解决移动端 URL 栏滚动问题 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

// TanStack Ship: /faq 路由的 FAQ schema 模板
export const faqSchema = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: [
    {
      "@type": "Question",
      name: "What is TanStack Ship?",
      acceptedAnswer: {
        "@type": "Answer",
        text: "TanStack Ship is a production-ready SaaS boilerplate built on TanStack Router, TanStack Start, and Cloudflare Workers. It includes authentication, Stripe payments, Cloudflare email, and SEO pre-configured.",
      },
    },
    {
      "@type": "Question",
      name: "How long does it take to deploy?",
      acceptedAnswer: {
        "@type": "Answer",
        text: "Most founders deploy a production-ready SaaS in 2-3 days. The template includes one-command Cloudflare Workers deployment with automatic environment setup.",
      },
    },
    {
      "@type": "Question",
      name: "Does it include SEO optimization?",
      acceptedAnswer: {
        "@type": "Answer",
        text: "Yes. TanStack Ship templates ship with SSR, JSON-LD structured data, Core Web Vitals budgets in CI, and meta tag management pre-configured. Pages score 90+ on Lighthouse SEO by default.",
      },
    },
  ],
};