Multilingual SEO：SaaS 多语言 SEO 如何在 6 个月内将自然流量翻 3 倍

// src/routes/$locale/pricing.tsx
export const Route = createFileRoute("/$locale/pricing")({
  parseParams: ({ locale }) => {
    if (!["en", "zh", "de"].includes(locale)) {
      throw new Error("无效的区域设置")
    }
    return { locale: locale as "en" | "zh" | "de" }
  },
  // ... loader, component
})

// 从路由 loader 注入
export const Route = createFileRoute("/$locale/pricing")({
  loader: async ({ params }) => {
    const baseUrl = "https://tanstackship.com"
    const locales = ["en", "zh", "de"]

    return {
      hreflang: [
        ...locales.map((locale) => ({
          rel: "alternate",
          hrefLang: locale,
          href: `${baseUrl}/${locale}/pricing`,
        })),
        { rel: "alternate", hrefLang: "x-default", href: `${baseUrl}/pricing` },
      ],
      canonical: `${baseUrl}/${params.locale}/pricing`,
    }
  },
})

// server/sitemap.ts — 生成按区域设置的 sitemap
export const generateSitemap = createServerFn({ method: "GET" }).handler(
  async ({}, { context }) => {
    const locales = ["en", "zh", "de"]
    const pages = ["/", "/pricing", "/docs", "/blog", "/features"]

    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  ${pages.map((page) => `
    <url>
      <loc>https://tanstackship.com/en${page}</loc>
      ${locales.map((l) => `
        <xhtml:link rel="alternate" hreflang="${l}"
          href="https://tanstackship.com/${l}${page}"/>
      `).join("")}
    </url>
  `).join("")}
</urlset>`

    return new Response(sitemap, {
      headers: { "Content-Type": "application/xml" },
    })
  }
)

const keywords = {
  en: {
    primary: "SaaS starter template",
    secondary: ["React SaaS boilerplate", "web app starter 2026"],
    longTail: ["how to build a SaaS with TanStack Start", "multi-language SaaS template"],
  },
  de: {
    primary: "SaaS Startvorlage",       // Not: "SaaS Starter Template"
    secondary: ["React SaaS Boilerplate", "Web-App-Grundgerüst 2026"],
    longTail: ["SaaS mit Cloudflare Workers bauen", "mehrsprachige SaaS Vorlage"],
  },
  zh: {
    primary: "SaaS启动模板",
    secondary: ["React SaaS模板", "Web应用启动套件2026"],
    longTail: ["如何使用TanStack Start构建SaaS", "多语言SaaS模板"],
  },
}

export const getSeoPerformanceByLocale = createServerFn({ method: "GET" }).handler(
  async ({}, { context }) => {
    const result = await context.env.DB.prepare(`
      SELECT
        locale,
        COUNT(*) as pages_indexed,
        AVG(avg_position) as avg_position,
        SUM(clicks) as total_clicks,
        SUM(impressions) as total_impressions
      FROM search_analytics
      WHERE date > datetime('now', '-30 days')
      GROUP BY locale
      ORDER BY total_clicks DESC
    `).all()

    return result.results
  }
)