TanStack Start 中文文档
样式与元数据

生成式引擎优化(GEO)

注意

想找传统的搜索引擎优化?请看 SEO 指南

什么是 GEO?

生成式引擎优化(Generative Engine Optimization,GEO) 是组织你的内容和数据,让 AI 系统——比如 ChatGPT、Claude、Perplexity 和其他大语言模型驱动的工具——能够准确理解、引用和推荐你内容的实践。

传统 SEO 关注在搜索引擎结果页面中排名,而 GEO 关注在 AI 生成的回答中被准确呈现。随着越来越多用户通过 AI 助手而非传统搜索获取信息,这正变得越来越重要。

译者注:SEO 与 GEO 的关系

GEO 可以理解为「针对大模型友好的 SEO」。传统 SEO 面向搜索引擎爬虫(追求排名),GEO 面向大语言模型的训练与检索系统(追求被准确引用)。两者并不冲突——清晰的结构、权威的内容和良好的元数据对两者都有利。做好 SEO 的网站,在 GEO 上通常也不会太差。

GEO 与 SEO 的区别

方面SEOGEO
目标在搜索结果中排名被 AI 引用/推荐
受众搜索引擎爬虫大语言模型训练与检索系统
关键信号链接、关键词、页面速度结构化数据、清晰度、权威性
内容格式为摘要(snippet)优化为提取与综合优化

好消息是:许多 GEO 最佳实践与 SEO 重叠。清晰的结构、权威的内容和良好的元数据对两者都有帮助。

TanStack Start 提供什么

支持 GEO 的 TanStack Start 特性:

  • 服务端渲染——确保 AI 爬虫看到完全渲染的内容
  • 结构化数据——支持机器可读内容的 JSON-LD
  • 文档 Head 管理——AI 系统可以解析的 meta 标签
  • 服务器路由——创建机器可读的端点(API、feed)

面向 AI 的结构化数据

使用 schema.org 词汇表的结构化数据,帮助 AI 系统理解你内容的含义和上下文。这可能是最重要的 GEO 技术。

文章 Schema

// src/routes/posts/$postId.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params }) => {
    const post = await fetchPost(params.postId)
    return { post }
  },
  head: ({ loaderData }) => ({
    meta: [{ title: loaderData.post.title }],
    scripts: [
      {
        type: 'application/ld+json',
        children: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'Article',
          headline: loaderData.post.title,
          description: loaderData.post.excerpt,
          image: loaderData.post.coverImage,
          author: {
            '@type': 'Person',
            name: loaderData.post.author.name,
            url: loaderData.post.author.url,
          },
          publisher: {
            '@type': 'Organization',
            name: 'My Company',
            logo: {
              '@type': 'ImageObject',
              url: 'https://myapp.com/logo.png',
            },
          },
          datePublished: loaderData.post.publishedAt,
          dateModified: loaderData.post.updatedAt,
        }),
      },
    ],
  }),
  component: PostPage,
})

商品 Schema

对于电商,商品 schema 帮助 AI 助手提供准确的商品信息:

export const Route = createFileRoute('/products/$productId')({
  loader: async ({ params }) => {
    const product = await fetchProduct(params.productId)
    return { product }
  },
  head: ({ loaderData }) => ({
    meta: [{ title: loaderData.product.name }],
    scripts: [
      {
        type: 'application/ld+json',
        children: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'Product',
          name: loaderData.product.name,
          description: loaderData.product.description,
          image: loaderData.product.images,
          brand: {
            '@type': 'Brand',
            name: loaderData.product.brand,
          },
          offers: {
            '@type': 'Offer',
            price: loaderData.product.price,
            priceCurrency: 'USD',
            availability: loaderData.product.inStock
              ? 'https://schema.org/InStock'
              : 'https://schema.org/OutOfStock',
          },
          aggregateRating: loaderData.product.rating
            ? {
                '@type': 'AggregateRating',
                ratingValue: loaderData.product.rating,
                reviewCount: loaderData.product.reviewCount,
              }
            : undefined,
        }),
      },
    ],
  }),
  component: ProductPage,
})

组织与网站 Schema

在根路由添加组织 schema,提供站点级上下文:

// src/routes/__root.tsx
export const Route = createRootRoute({
  head: () => ({
    meta: [
      { charSet: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    ],
    scripts: [
      {
        type: 'application/ld+json',
        children: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'WebSite',
          name: 'My App',
          url: 'https://myapp.com',
          publisher: {
            '@type': 'Organization',
            name: 'My Company',
            url: 'https://myapp.com',
            logo: 'https://myapp.com/logo.png',
            sameAs: [
              'https://twitter.com/mycompany',
              'https://github.com/mycompany',
            ],
          },
        }),
      },
    ],
  }),
  component: RootComponent,
})

FAQ Schema

FAQ schema 对 GEO 尤其有效——AI 系统经常提取问答对:

export const Route = createFileRoute('/faq')({
  loader: async () => {
    const faqs = await fetchFAQs()
    return { faqs }
  },
  head: ({ loaderData }) => ({
    meta: [{ title: 'Frequently Asked Questions' }],
    scripts: [
      {
        type: 'application/ld+json',
        children: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'FAQPage',
          mainEntity: loaderData.faqs.map((faq) => ({
            '@type': 'Question',
            name: faq.question,
            acceptedAnswer: {
              '@type': 'Answer',
              text: faq.answer,
            },
          })),
        }),
      },
    ],
  }),
  component: FAQPage,
})

机器可读端点

创建 AI 系统和开发者可以直接消费的 API 端点:

// src/routes/api/products.ts
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/api/products')({
  server: {
    handlers: {
      GET: async ({ request }) => {
        const url = new URL(request.url)
        const category = url.searchParams.get('category')

        const products = await fetchProducts({ category })

        return Response.json({
          '@context': 'https://schema.org',
          '@type': 'ItemList',
          itemListElement: products.map((product, index) => ({
            '@type': 'ListItem',
            position: index + 1,
            item: {
              '@type': 'Product',
              name: product.name,
              description: product.description,
              url: `https://myapp.com/products/${product.id}`,
            },
          })),
        })
      },
    },
  },
})

内容最佳实践

除了技术实现,内容结构对 GEO 也很重要:

清晰、陈述事实的语句

AI 系统会提取事实性主张。让你的关键信息显式化:

// Good: Clear, extractable facts
function ProductDetails({ product }) {
  return (
    <article>
      <h1>{product.name}</h1>
      <p>
        {product.name} is a {product.category} made by {product.brand}. It costs
        ${product.price} and is available in {product.colors.join(', ')}.
      </p>
    </article>
  )
}

层级结构

使用正确的标题层级——AI 系统用它理解内容组织:

function DocumentationPage() {
  return (
    <article>
      <h1>Getting Started with TanStack Start</h1>

      <section>
        <h2>Installation</h2>
        <p>Install TanStack Start using npm...</p>

        <h3>Prerequisites</h3>
        <p>You'll need Node.js 18 or later...</p>
      </section>

      <section>
        <h2>Configuration</h2>
        <p>Configure your app in your build tool config...</p>
      </section>
    </article>
  )
}

权威性归属

包含作者信息和来源——AI 系统会考虑权威性信号:

export const Route = createFileRoute('/posts/$postId')({
  head: ({ loaderData }) => ({
    meta: [
      { title: loaderData.post.title },
      { name: 'author', content: loaderData.post.author.name },
      {
        property: 'article:author',
        content: loaderData.post.author.profileUrl,
      },
      {
        property: 'article:published_time',
        content: loaderData.post.publishedAt,
      },
    ],
  }),
  component: PostPage,
})

llms.txt

一些站点开始采用 llms.txt 文件(类似 robots.txt),为 AI 系统提供指引:

// src/routes/llms[.]txt.ts
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/llms.txt')({
  server: {
    handlers: {
      GET: async () => {
        const content = `# My App

> My App is a platform for building modern web applications.

## Documentation
- Getting Started: https://myapp.com/docs/getting-started
- API Reference: https://myapp.com/docs/api

## Key Facts
- Built with TanStack Start
- Supports React and Solid
- Full TypeScript support

## Contact
- Website: https://myapp.com
- GitHub: https://github.com/mycompany/myapp
`

        return new Response(content, {
          headers: {
            'Content-Type': 'text/plain',
          },
        })
      },
    },
  },
})

译者注:llms.txt 是什么?

llms.txt 是社区提出的一个约定(不是标准),类比 robots.txt:它用纯文本描述你的站点、关键事实和文档入口,方便大语言模型在抓取时快速理解站点结构。配合 GEO 实践(结构化数据、清晰内容),能让你的站点更容易被 AI 工具准确引用。

监控 AI 引用

与有成熟分析体系的传统 SEO 不同,GEO 监控仍在发展中。可以考虑:

  • 用 AI 助手测试——向 ChatGPT、Claude 和 Perplexity 询问你的产品/内容
  • 监控品牌提及——追踪 AI 系统如何描述你的产品
  • 验证结构化数据——用 Google 的富结果测试Schema.org Validator
  • 检查 AI 搜索引擎——监控你在 Perplexity、Bing Chat 和 Google AI Overviews 中的出现情况

On this page