TanStack Solid Start 生成式引擎优化GEO实战指南让 AI 助手准确理解、引用并推荐你的应用【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/router本指南聚焦生成式引擎优化Generative Engine Optimization, GEO在 TanStack Solid Start 应用中如何通过服务端渲染、schema.org 结构化数据JSON-LD、文档头管理与机器可读端点让你的内容被 ChatGPT、Claude、Perplexity 等 AI 系统准确抓取、理解和引用。读完本文你将掌握从根路由到文章页、商品页、FAQ 页的完整 GEO 落地范式以及 Solid 版路由源码中 JSON-LD 渲染与 XSS 防护的底层机制。什么是 GEO生成式引擎优化GEO是围绕AI 系统能否准确理解、引用、推荐你的内容来组织和结构化网站数据的一整套实践。与面向传统搜索引擎的 SEO 不同GEO 的目标受众是 ChatGPT、Claude、Perplexity 以及其他 LLM 驱动的工具——当越来越多的用户通过 AI 助手而非搜索引擎获取信息时你的内容能否在 AI 生成的回答中被如实提及变得日益关键。传统 SEO 关注的是搜索结果中的排名GEO 关注的是AI 生成回答中的准确呈现。二者的技术栈高度重叠——清晰的结构、权威的内容、良好的元数据对两者都有帮助这正是我们可以在 TanStack Solid Start 中一次性落地的重要原因。GEO 与 SEO 的差异维度SEOGEO目标在搜索结果中排名靠前被 AI 引用 / 推荐受众搜索引擎爬虫LLM 训练与检索系统关键信号外链、关键词、页面速度结构化数据、清晰度、权威性内容形态针对摘要片段优化针对提取与综合优化好消息是GEO 的许多最佳实践与 SEO 重叠。清晰的结构、权威的内容、良好的元数据对两者都有帮助。TanStack Solid Start 同时提供了支撑两者的技术底座对应 SEO 指南见 docs/start/framework/solid/guide/seo.md。TanStack Solid Start 为 GEO 提供了什么TanStack Solid Start基于tanstack/solid-router的全栈框架天然具备支撑 GEO 的四大能力服务端渲染SSR——确保 AI 爬虫与 LLM 检索系统看到的是完全渲染后的 HTML 内容而非空壳的客户端应用。结构化数据——通过 JSON-LD 输出机器可读的内容语义。文档头管理Document Head Management——在每个路由上声明head输出 AI 系统可解析的 meta、title、script 标签。服务端路由Server Routes——创建 API、feed 等机器可直接消费的端点。这四个能力并非相互独立SSR 保证 HTML 里真的存在结构化数据与 meta 标签文档头管理负责把这些标签渲染进head服务端路由则补充了 JSON 化的机器接口。下面我们逐一展开。面向 AI 的结构化数据使用 schema.org 词汇表的结构化数据能帮助 AI 系统理解你内容的含义与上下文——这可以说是最重要的 GEO 技术。在 TanStack Solid Start 中你只需在路由的head配置里声明scripts数组并填入application/ldjson类型的脚本即可。Article 结构化数据文章页文章页是内容型站点被 AI 引用的主战场。下面这个示例在loader中加载文章数据并在head中输出完整的 Article schema// src/routes/posts/$postId.tsx import { createFileRoute } from tanstack/solid-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/ldjson, 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, })要点解析head是一个函数接收loaderData因此结构化数据始终与当前路由加载的数据保持同步scripts数组中的每一项都会渲染为一个script标签type: application/ldjson声明了 JSON-LD 的 MIME 类型headline、description、author、publisher、datePublished、dateModified都是 AI 系统重点提取的事实字段务必与页面正文一致。Product 结构化数据商品页对于电商类应用Product schema 能让 AI 助手在回答中给出准确的商品信息价格、库存、评分等// src/routes/products/$productId.tsx 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/ldjson, 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, })实战要点availability使用 schema.org 枚举值InStock/OutOfStock而非随意字符串这是机器可解析的关键priceCurrency使用 ISO 4217 货币代码如USDaggregateRating仅在存在评分数据时输出通过三元表达式条件控制避免输出无效的空评分。Organization 与 Website 结构化数据站点级上下文在根路由createRootRoute的head中声明站点级 schema为整个站点提供全局上下文// src/routes/__root.tsx export const Route createRootRoute({ head: () ({ meta: [ { charSet: utf-8 }, { name: viewport, content: widthdevice-width, initial-scale1 }, ], scripts: [ { type: application/ldjson, 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, })sameAs数组用于声明组织在其他平台上的官方账号Twitter/X、GitHub 等是 AI 系统评估实体同一性与权威性的重要信号。由于根路由的head会出现在所有页面中这类站点级 schema 只需写一次即可全局生效。FAQ 结构化数据FAQ schema 对 GEO 尤其有效——AI 系统经常直接从 QA 对中提取答案// src/routes/faq.tsx export const Route createFileRoute(/faq)({ loader: async () { const faqs await fetchFAQs() return { faqs } }, head: ({ loaderData }) ({ meta: [{ title: Frequently Asked Questions }], scripts: [ { type: application/ldjson, 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, })注意mainEntity通过map从loaderData.faqs生成每个Question都携带name问题与acceptedAnswer.text答案。当 FAQ 数据变化时loader重新执行schema 也随之自动更新。源码视角JSON-LD 是如何被渲染并防 XSS 的从 Solid 版路由源码可以印证上述机制。在 packages/solid-router/src/headContentUtils.tsx 中useTags会遍历当前匹配路由的meta数组专门处理 JSON-LD} else if (script:ldjson in m) { // Handle JSON-LD structured data // Content is HTML-escaped to prevent XSS when injected via innerHTML try { const json JSON.stringify(m[script:ldjson]) resultMeta.push({ tag: script, attrs: { type: application/ldjson, }, children: escapeHtml(json), }) } catch { // Skip invalid JSON-LD objects } }这里有两个值得注意的实现细节双入口支持除了本文示例中使用的scripts: [{ type: application/ldjson, children: ... }]形式路由的 head 还可以直接使用script:ldjson键声明 JSON-LD 对象useTags会将其序列化为script typeapplication/ldjson标签XSS 防护与容错children会经过escapeHtml转义源码注释明确说明这是为了防止经innerHTML注入时的 XSS同时JSON.stringify或解析失败时会被try/catch静默跳过避免单个非法 JSON-LD 破坏整个文档头。最终这些标签由HeadContent组件通过 Solid 的 portal 机制渲染进head元素见 packages/solid-router/src/HeadContent.tsx。createFileRoute、createRootRoute等 API 均由tanstack/solid-router统一导出见 packages/solid-router/src/index.tsx。机器可读端点Machine-Readable Endpoints除了页面内嵌的 JSON-LD你还可以通过服务端路由创建 AI 系统与开发者可直接消费的 API 端点。下面这个/api/products端点返回 schema.org 格式的ItemListJSON// src/routes/api/products.ts import { createFileRoute } from tanstack/solid-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}, }, })), }) }, }, }, })设计要点server.handlers.GET定义了 HTTP GET 处理器request可用于读取查询参数如category从而支持按类目过滤的机器查询响应体采用ItemListListItem结构position字段明确条目顺序每个item的url指向站内对应商品页为 AI 系统提供可引用的权威来源。内容最佳实践技术实现之外内容的组织方式对 GEO 影响巨大。AI 系统擅长从清晰的内容中提取事实与结构下面三类实践可以直接套用。清晰、可提取的事实陈述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 可以直接抽取相反若信息被拆分到下拉框、弹层或图片文字中AI 系统将难以可靠提取。层级化结构正确使用标题层级h1→h2→h3——AI 系统依靠它理解内容的组织方式function DocumentationPage() { return ( article h1Getting Started with TanStack Start/h1 section h2Installation/h2 pInstall TanStack Start using npm.../p h3Prerequisites/h3 pYoull need Node.js 18 or later.../p /section section h2Configuration/h2 pConfigure your app in your build tool config.../p /section /article ) }要点每页只保留一个h1章节用h2子主题用h3不要跳级例如直接从h2跳到h4这既符合无障碍规范也是 AI 解析内容大纲的骨架。权威归属Authoritative Attribution包含作者信息与来源——AI 系统将权威信号纳入考量// src/routes/posts/$postId.tsx 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, })这里同时使用了name标准 meta 名如author与propertyOpen Graph / 文章协议属性如article:author、article:published_time。从 headContentUtils.tsx 的实现看meta 标签按name或property属性去重metaByAttribute记录已出现的属性名因此同一页面中相同属性不会重复输出。llms.txt面向 LLM 的站点指引越来越多的站点开始采用llms.txt文件类似robots.txt向 AI 系统提供指引。你可以用服务端路由动态生成它// src/routes/llms[.]txt.ts import { createFileRoute } from tanstack/solid-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这个看似文件的 URL。llms.txt的常见结构包括站点简介引用块、文档目录、关键事实Key Facts、联系方式让 AI 系统在检索你的站点时优先获得结构化摘要。监控 AI 引用Monitoring AI Citations与传统 SEO 成熟的统计体系不同GEO 的监测手段仍在演进中。目前可以实践的方向用 AI 助手实测——向 ChatGPT、Claude、Perplexity 提问关于你的产品/内容的问题观察它们如何描述与引用监控品牌提及——跟踪 AI 系统对你产品/内容的描述方式是否准确验证结构化数据——使用 Google 的 Rich Results Test 与 Schema.org Validator 等校验工具检查 JSON-LD 是否符合规范关注 AI 搜索渠道——监测在 Perplexity、Bing Chat、Google AI Overviews 中的呈现情况。需要强调的是GEO 是持续迭代的过程每当你更新文章、商品或 FAQ 内容结构化数据都会随loader自动刷新建议把验证 schema → 实测 AI 引用 → 修正内容作为日常发布流程的一部分。由于本仓库是只读的上述所有示例均可在你的应用副本中直接复制使用。【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考