Wasp SEO 与 GEO 优化指南面向搜索引擎与 AI 爬虫的完整实践【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp在 Wasp 全栈框架中让你的应用同时被传统搜索引擎SEO和 AI 助手GEOGenerative Engine Optimization发现与理解是提升应用可见度的关键。本文基于 Wasp 官方 SEO 指南结合仓库源码系统讲解测量方法、meta 标签、预渲染、语义化标记、结构化数据、页面瘦身与标准文件等全套优化技术读完即可对照清单直接应用到自己的 Wasp 项目中。在哪里优化内容页 vs 应用页在动手之前先明确优化的对象。Wasp 指南建议把优化技术应用到内容页content pages而不是应用页app pages内容页落地页landing page、关于页、定价页以及各类营销页面。它们通常不频繁变化、不随访问者变化是你希望在搜索结果和链接预览中出现的页面。SEO 对这类页面最有效。应用页仪表盘、个人资料页、设置页、表单、聊天界面等展示用户动态数据的页面。它们包含个性化数据应当对其他用户隐藏而且这类页面的目标是被交互而非被阅读无法被有意义地索引。这条宽泛的划分可以帮助你决定对哪些页面应用 SEO 技术。例如你当然希望 ChatGPT 能读到你的落地页从而向用户推荐你的站点但绝不希望 Google 把某个用户的私有仪表盘页面推荐给其他用户。先测量再优化用数据驱动决策Wasp 官方建议的流程是先用行业通用工具测量应用现状 → 挑选与自身最相关的技术重点优化 → 优化后再测一次对比分数提升与是否出现新问题。SEO 是有成本的——至少包括开发时间和维护负担。因此不必追求满分把精力集中在投入产出比最高的技术上小幅提升也能带来显著收益。⚠️务必对生产构建进行测量Wasp 的完整优化只发生在生产构建production build中而非开发服务器。用 Lighthouse 等工具测量wasp start下的应用无法反映爬虫和用户实际得到的内容。请始终针对生产构建测量可以在本地测试或部署后进行。LighthouseLighthouse 是测量网站对搜索引擎和 AI 助手就绪度的首选工具它会针对多个维度打分并按重要性给出待修复问题清单Lighthouse 的四大类问题——性能Performance、无障碍Accessibility、最佳实践Best Practices和 SEO——对页面在搜索引擎与 AI 助手中的表现都很重要。例如 Google 将页面速度作为排名因素而可访问性好的站点更可能被 AI 助手读取和推荐。最直接的方式是通过命令行运行 Lighthouse# 先构建并启动应用的生产版本 $ wasp build $ wasp build start # 服务器运行期间另开一个终端运行 Lighthouse $ npx lighthouse http://localhost:3000 --presetdesktop --view # 可以把 URL 换成某个具体页面或指向已部署的应用。 # 去掉 --presetdesktop 参数即可测试移动端体验。运行约需一分钟期间会看到自动打开的浏览器窗口完成后报告会保存为 HTML 文件并自动打开。用命令行方式便于在开发期定期运行并让 AI 助手读取报告、修复问题也可以直接在 Chrome DevTools 中运行或使用在线服务仅对已部署应用有效。Search ConsoleGoogle Search Console 是 Google 提供的免费服务展示你的已部署站点在 Google 搜索中的表现哪些查询展示了你的站点、获得了多少点击。它还会列出爬取站点时发现的问题并引导你修复是监控 SEO 表现、及早发现问题必备的工具。单用途工具部分 SEO 技术有专门的校验工具下文各技术小节中会提及。建议用它们检查实现是否正确。优化技术清单按投入产出比排序好的 SEO 由几个独立问题组成Wasp 指南按努力-收益比排序如下先做收益大、成本低的用 meta 标签 告诉爬虫每个页面的内容用 预渲染 让内容在无需 JavaScript 时也可读用 语义化标记 和 结构化数据 帮助爬虫理解内容让页面更小提供爬虫寻找的标准文件。这些是适用于大多数网站的通用技术。请记住这些技术只能放大你的内容不能替代内容详见文末好内容才是根本一节。Meta 标签搜索引擎和社交平台从 HTML 的meta标签中读取信息以决定搜索结果和链接预览中展示的标题、描述与预览图。全站级 meta 标签通过app声明的head字段设置作用于整个应用import { app } from wasp.sh/spec export default app({ // ... title: My App, head: [ link relicon href/favicon.ico /, meta namedescription contentYour apps main description. /, meta propertyog:title contentMy App /, meta propertyog:image contenthttps://your-app.com/banner.webp /, ], // ... })页面级 meta 标签对于随页面变化或依赖动态数据的标签可以直接在页面组件中渲染。React 支持在组件中放置meta标签Wasp 页面同样适用export function ProductPage({ productId }) { const product useProduct(productId) return ( meta namedescription content{product.description} / meta propertyog:title content{product.name} / meta propertyog:image content{product.imageUrl} / {/* Twitter/X 的其他字段会回退到 og: 标签 这个标签用于启用大图预览布局 */} meta nametwitter:card contentsummary_large_image / {/* 本页面的原始 URL不带跟踪参数 避免爬虫索引到它的重复变体 */} link relcanonical href{https://your-app.com/products/${productId}} / h2{product.name}/h2 p{product.description}/p {/* ... */} / ) }关于完整的推荐标签集合、图片规范与测试工具见 Meta 标签专题指南。其中值得注意的要点基础 SEO 标签description搜索结果中显示的简介、author、keywordsOpen Graph 标签Facebook、LinkedIn、Slack、Discord 等生成富链接预览的标准og:typeWeb 应用通常为 website、og:title、og:site_name、og:url、og:description、og:imageX (Twitter) Card 标签twitter:card大图预览用summary_large_image、twitter:image、twitter:image:width、twitter:image:height。X 会回退使用 Open Graph 的标题、描述和图片因此设置了 og: 标签后唯一必须补的只有twitter:cardCanonical URL每页设置自引用的link relcanonical防止爬虫把带?utm_source等跟踪参数的同一页面变体当作重复内容索引。由于每页不同应在页面级设置而非head字段预览图规范使用客户端应用的绝对 URL含https://参考各平台推荐尺寸重要内容居中平台裁剪方式不同优先 WebP 或 PNG图片放在 public 目录。预渲染Prerendering默认情况下Wasp 应用是单页应用SPA浏览器下载的 HTML 几乎是空的只有加载 JavaScript 的引导代码由浏览器执行 JS 后渲染内容。多数搜索引擎如 Google在索引时也能执行 JavaScript但部分爬虫和许多 AI 助手完全不运行 JavaScript它们只能看到空 HTML无法回答关于你网站的问题甚至会忽略它。Wasp 可以在构建时把指定路由预渲染为静态 HTML使内容在初始文件中即可读、无需 JavaScript。浏览器仍会下载并执行整个应用呈现与纯 SPA 相同的交互体验两全其美。预渲染按路由逐个开启import { app, page, route } from wasp.sh/spec import { LandingPage } from ./src/LandingPage with { type: ref } export default app({ // ... decls: [ route(LandingRoute, /, page(LandingPage), { prerender: true }), ], })从源码层面看预渲染的实现细节如下Route.hsWasp 内部的Route数据结构中prerender字段是具体的静态路径列表[String]。公开的prerender: true简写会被 TSspec包规范化为[routePath]即路由自身的路径因此到达编译器内部时始终是一个路径列表。wasp build时这些路径会被逐一调用、把页面组件渲染为带水合hydration标记的 HTML写入构建输出文件请求命中预渲染路径时服务器直接发送这份 HTML浏览器加载 JS 后再由 React 水合成完整交互应用无需二次渲染。预渲染的约束与进阶用法详见 预渲染文档不能用于带authRequired: true的页面因为其内容依赖登录用户。Wasp 会在编译期报错Valid.hs 中的validatePrerenderRoutes会校验这些约束。静态路由直接设prerender: true即可。动态路由含动态段如/supported-countries/:country需要传入具体路径数组route(CountryRoute, /supported-countries/:country, page(CountryPage), { prerender: [/supported-countries/us, /supported-countries/es], })预渲染路径必须匹配路由模式且所有动态段都要替换为具体值。未在数组中声明的路径仍正常工作只是按普通方式在客户端渲染。从数据生成路径列表Wasp Spec 文件以普通 Node.js 脚本方式运行见 Spec 说明因此可以用任何 Node.js APIfs、path、fetch或 npm 库生成预渲染路径例如从分析服务拉取 Top 10 国家列表再映射为路径。水合不匹配排查预渲染时渲染typeof window、Date.now()、Math.random()、浏览器 APIwindow.innerWidth、localStorage等会导致前后端渲染结果不一致React 可能丢弃预渲染 HTML。修复方式是首屏渲染保持一致用useEffectuseState的useIsClient模式在水合后再添加客户端行为。语义化标记Semantic Markup大多数爬虫和屏幕阅读器看不到图片内容因此每张有意义的图片都需要通过alt属性提供文本描述。缺失alt文本是 Lighthouse SEO 审计中最常标记的问题之一img src{testimonial.avatarSrc} alt{Profile picture of ${testimonial.name}} /纯装饰性图片可以用空alt让爬虫忽略传达信息的图片如产品照片、头像则应在alt中描述该信息。同时应使用语义化 HTML 帮助爬虫理解内容每个页面用一个h1作为主标题用h2、h3等按顺序组织副标题使用描述性链接文本而非点击这里这种泛泛表述让爬虫知道链接页面的主题。链接尤其值得注意——爬虫通过跟随a标签发现页面。带onClick导航的button对爬虫不可见因此结构性导航页头、页脚、内容内链接应始终使用真实链接。在 Wasp 中应使用Link组件它渲染a标签并对路由做类型检查程序化导航如表单提交后重定向留给动作场景import { Link } from wasp/client/router export function Navbar() { return ( nav {/* ❌ 爬虫看不到也无法跟随这种导航 */} button onClick{() navigate(/pricing)}Pricing/button {/* ✅ 可被发现的真实链接 */} Link to/pricingPricing/Link /nav ) }结构化数据Structured Data默认情况下爬虫和 AI 引擎只把你的页面当作纯文本读取——一袋词靠猜来理解含义与关系。结构化数据以机器可读的格式提供更多内容信息让爬虫理解得更准确、展示更丰富的结果。如果你在 Google 上搜索过菜谱并看到带星级评分、烹饪时间和照片的结果那就是结构化数据在起作用。对典型 SaaS 应用你可以在定价页用它帮助爬虫识别不同套餐、功能与价格并直接展示在搜索结果页。最常用的方式是JSON-LD——一种特定格式的script标签import type { WebApplication, WithContext } from schema-dts; export function PricingPage() { const pricingPlans usePricingPlans(); const structuredData: WithContextWebApplication { context: https://schema.org, type: WebApplication, name: My travel app, applicationCategory: TravelApplication, offers: pricingPlans.map((plan) ({ type: Offer, name: plan.name, price: plan.price, priceCurrency: USD, description: plan.description, })), }; return ( h1Our Pricing Plans/h1 pChoose the plan that works best for you./p {/* ... */} script typeapplication/ldjson {JSON.stringify(structuredData)} /script / ); }schema-dts提供类型化的 TypeScript 定义保证结构化数据对象与 Schema.org 词汇表一致。上例用WebApplication类型描述应用本体并用Offer数组逐个描述套餐最终通过JSON.stringify序列化到application/ldjson脚本标签中。减小页面体积搜索引擎通过 Core Web Vitals 将页面速度纳入排名因素页面越小加载越快。两项收益最大的做法优化图片按实际显示尺寸提供图片优先 WebP 或 AVIF 等现代格式从源码导入图片见 静态资源处理可让 Vite 对文件名做哈希浏览器得以激进缓存。懒加载页面重型部分Wasp 可以拆分组件使其 HTML、JS 和 CSS 不在一开始就加载。对大型或首屏以下below-the-fold的组件用React.lazy按需加载import { lazy } from react // 这个组件可能引入大型绘图库 // 且不在页面顶部因此不预先加载。 const InteractiveGraph lazy(() import(src/components/InteractiveGraph)); export function LandingPage() { return ( div h1Welcome to My App/h1 pHeres some important information about our app.../p {/* 在页面其余部分加载完成后加载。 */} Suspense fallback{pLoading graph.../p} InteractiveGraph / /Suspense /div ) }标准文件Well-known Files爬虫会在站点根路径寻找几个标准文件。把它们放在项目根目录的public目录下见 静态资源处理——该目录的文件原样从根路径提供所以public/robots.txt在线上对应https://your-app.com/robots.txt. └── public ├── favicon.ico ├── robots.txt ├── llms.txt └── sitemap.xmlrobots.txt最小的robots.txt允许爬虫访问除管理、API、认证等不希望它们浪费时间爬取的路由以外的所有内容User-agent: * Allow: / Disallow: /admin/ Disallow: /api/ Disallow: /auth/⚠️robots.txt不能把页面从搜索结果中隐藏robots.txt只阻止爬取不阻止索引。如果其他站点链接到你的/admin/路由Google 依然可以不访问该页面而索引这个 URL。要可靠地让应用页退出搜索结果请在这些页面组件中添加robotsmeta 标签export function DashboardPage() { return ( meta namerobots contentnoindex, nofollow / h1Your Dashboard/h1 {/* ... */} / ) }sitemap.xml站点地图列出你希望被索引的站点 URL。爬虫通常能通过跟随页面间链接发现页面但对于外部链接稀少的新应用站点地图是让爬虫最快找到全部路由的方式。你也可以把它提交给 Search Console监控 Google 的索引情况。内容页通常数量少且稳定手写public/sitemap.xml即可或让 AI 助手根据main.wasp.ts中的路由生成。⚠️保持站点地图最新过期的站点地图列出失效 URL 或缺少新页面比没有更糟。一旦添加内容页变化时记得重新生成。llms.txtllms.txt可以把 AI 助手引导到它应该阅读的主要页面帮助其了解你的应用。LLM 很擅长理解 Markdown因此通常用 Markdown 编写但格式不限# MyTravelApp MyTravelApp is a web application that helps users plan their trips. ## Docs - [Features](https://mytravelapp.com/features): What the app can do. - [Pricing](https://mytravelapp.com/pricing): Plans and prices. - [API documentation](https://mytravelapp.com/api-docs): How LLMs can interact with the app on a users behalf. ## Getting started - [Demo](https://mytravelapp.com/demo): Try the app without signing up. - [Sign up](https://mytravelapp.com/signup): Create an account. - [Dashboard](https://mytravelapp.com/dashboard): Where users manage their trips after signing up. ## Optional - [Blog](https://mytravelapp.com/blog): Travel tips and product updates.llms.txt也可以作为一种替代式的信息呈现方式不指向页面而是直接写出完整内容让助手无需渲染和解析真实页面就能了解应用的一切# MyTravelApp MyTravelApp is a web application that helps users plan their trips. It lets you build day-by-day itineraries, track your budget, and share plans with travel companions. ## Features - **Itinerary builder.** Add flights, hotels, and activities to a timeline that automatically sorts them by date and warns you about overlaps. - **Budget tracking.** [...] ## Pricing MyTravelApp is free for one active trip. The Pro plan is $9/month and unlocks unlimited trips, offline access, and [...] ## Frequently asked questions **Can I use MyTravelApp offline?** Yes, Pro users can download trips for offline access [...] [...]值得留意的是Wasp 仓库自身就在使用llms.txt生态web/markdown-snapshots/目录下维护着llms.txt、llms-full.txt、llms-current.txt等快照文件由web/scripts/markdown-snapshots.mts生成供 AI 助手系统化读取文档——这正是该技术在生产项目中的真实落地范例。其他技术SEO 的技术手段远不止这些。线上有大量资料Wasp 指南建议从 Google Search 官方文档开始——它是 Google 期望页面的完整参考并专门增设了面向 AI 助手的优化章节。其入门指南SEO Starter Guide是很好的起点。好内容才是根本以上所有内容是一份技术检查清单应用每项技术、测量、勾选。但这些技术只能放大已经存在的东西。如果你的页面没有有用、相关的内容再多的 SEO 也不会让它排名靠前。请确保内容高质量、写得好、为用户提供价值。堆砌关键词、使用标题党、批量生产未经审阅的内容长期来看没有帮助甚至可能被搜索引擎惩罚。专注于创建回答用户问题、解决用户问题的内容。Google 也发布了关于创建优质内容的指南Creating helpful, reliable, people-first content其中详细说明了内容创作应关注的重点——在把本节清单逐项落实之前值得先读一读它。【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Wasp SEO 与 GEO 优化指南：面向搜索引擎与 AI 爬虫的完整实践
Wasp SEO 与 GEO 优化指南面向搜索引擎与 AI 爬虫的完整实践【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp在 Wasp 全栈框架中让你的应用同时被传统搜索引擎SEO和 AI 助手GEOGenerative Engine Optimization发现与理解是提升应用可见度的关键。本文基于 Wasp 官方 SEO 指南结合仓库源码系统讲解测量方法、meta 标签、预渲染、语义化标记、结构化数据、页面瘦身与标准文件等全套优化技术读完即可对照清单直接应用到自己的 Wasp 项目中。在哪里优化内容页 vs 应用页在动手之前先明确优化的对象。Wasp 指南建议把优化技术应用到内容页content pages而不是应用页app pages内容页落地页landing page、关于页、定价页以及各类营销页面。它们通常不频繁变化、不随访问者变化是你希望在搜索结果和链接预览中出现的页面。SEO 对这类页面最有效。应用页仪表盘、个人资料页、设置页、表单、聊天界面等展示用户动态数据的页面。它们包含个性化数据应当对其他用户隐藏而且这类页面的目标是被交互而非被阅读无法被有意义地索引。这条宽泛的划分可以帮助你决定对哪些页面应用 SEO 技术。例如你当然希望 ChatGPT 能读到你的落地页从而向用户推荐你的站点但绝不希望 Google 把某个用户的私有仪表盘页面推荐给其他用户。先测量再优化用数据驱动决策Wasp 官方建议的流程是先用行业通用工具测量应用现状 → 挑选与自身最相关的技术重点优化 → 优化后再测一次对比分数提升与是否出现新问题。SEO 是有成本的——至少包括开发时间和维护负担。因此不必追求满分把精力集中在投入产出比最高的技术上小幅提升也能带来显著收益。⚠️务必对生产构建进行测量Wasp 的完整优化只发生在生产构建production build中而非开发服务器。用 Lighthouse 等工具测量wasp start下的应用无法反映爬虫和用户实际得到的内容。请始终针对生产构建测量可以在本地测试或部署后进行。LighthouseLighthouse 是测量网站对搜索引擎和 AI 助手就绪度的首选工具它会针对多个维度打分并按重要性给出待修复问题清单Lighthouse 的四大类问题——性能Performance、无障碍Accessibility、最佳实践Best Practices和 SEO——对页面在搜索引擎与 AI 助手中的表现都很重要。例如 Google 将页面速度作为排名因素而可访问性好的站点更可能被 AI 助手读取和推荐。最直接的方式是通过命令行运行 Lighthouse# 先构建并启动应用的生产版本 $ wasp build $ wasp build start # 服务器运行期间另开一个终端运行 Lighthouse $ npx lighthouse http://localhost:3000 --presetdesktop --view # 可以把 URL 换成某个具体页面或指向已部署的应用。 # 去掉 --presetdesktop 参数即可测试移动端体验。运行约需一分钟期间会看到自动打开的浏览器窗口完成后报告会保存为 HTML 文件并自动打开。用命令行方式便于在开发期定期运行并让 AI 助手读取报告、修复问题也可以直接在 Chrome DevTools 中运行或使用在线服务仅对已部署应用有效。Search ConsoleGoogle Search Console 是 Google 提供的免费服务展示你的已部署站点在 Google 搜索中的表现哪些查询展示了你的站点、获得了多少点击。它还会列出爬取站点时发现的问题并引导你修复是监控 SEO 表现、及早发现问题必备的工具。单用途工具部分 SEO 技术有专门的校验工具下文各技术小节中会提及。建议用它们检查实现是否正确。优化技术清单按投入产出比排序好的 SEO 由几个独立问题组成Wasp 指南按努力-收益比排序如下先做收益大、成本低的用 meta 标签 告诉爬虫每个页面的内容用 预渲染 让内容在无需 JavaScript 时也可读用 语义化标记 和 结构化数据 帮助爬虫理解内容让页面更小提供爬虫寻找的标准文件。这些是适用于大多数网站的通用技术。请记住这些技术只能放大你的内容不能替代内容详见文末好内容才是根本一节。Meta 标签搜索引擎和社交平台从 HTML 的meta标签中读取信息以决定搜索结果和链接预览中展示的标题、描述与预览图。全站级 meta 标签通过app声明的head字段设置作用于整个应用import { app } from wasp.sh/spec export default app({ // ... title: My App, head: [ link relicon href/favicon.ico /, meta namedescription contentYour apps main description. /, meta propertyog:title contentMy App /, meta propertyog:image contenthttps://your-app.com/banner.webp /, ], // ... })页面级 meta 标签对于随页面变化或依赖动态数据的标签可以直接在页面组件中渲染。React 支持在组件中放置meta标签Wasp 页面同样适用export function ProductPage({ productId }) { const product useProduct(productId) return ( meta namedescription content{product.description} / meta propertyog:title content{product.name} / meta propertyog:image content{product.imageUrl} / {/* Twitter/X 的其他字段会回退到 og: 标签 这个标签用于启用大图预览布局 */} meta nametwitter:card contentsummary_large_image / {/* 本页面的原始 URL不带跟踪参数 避免爬虫索引到它的重复变体 */} link relcanonical href{https://your-app.com/products/${productId}} / h2{product.name}/h2 p{product.description}/p {/* ... */} / ) }关于完整的推荐标签集合、图片规范与测试工具见 Meta 标签专题指南。其中值得注意的要点基础 SEO 标签description搜索结果中显示的简介、author、keywordsOpen Graph 标签Facebook、LinkedIn、Slack、Discord 等生成富链接预览的标准og:typeWeb 应用通常为 website、og:title、og:site_name、og:url、og:description、og:imageX (Twitter) Card 标签twitter:card大图预览用summary_large_image、twitter:image、twitter:image:width、twitter:image:height。X 会回退使用 Open Graph 的标题、描述和图片因此设置了 og: 标签后唯一必须补的只有twitter:cardCanonical URL每页设置自引用的link relcanonical防止爬虫把带?utm_source等跟踪参数的同一页面变体当作重复内容索引。由于每页不同应在页面级设置而非head字段预览图规范使用客户端应用的绝对 URL含https://参考各平台推荐尺寸重要内容居中平台裁剪方式不同优先 WebP 或 PNG图片放在 public 目录。预渲染Prerendering默认情况下Wasp 应用是单页应用SPA浏览器下载的 HTML 几乎是空的只有加载 JavaScript 的引导代码由浏览器执行 JS 后渲染内容。多数搜索引擎如 Google在索引时也能执行 JavaScript但部分爬虫和许多 AI 助手完全不运行 JavaScript它们只能看到空 HTML无法回答关于你网站的问题甚至会忽略它。Wasp 可以在构建时把指定路由预渲染为静态 HTML使内容在初始文件中即可读、无需 JavaScript。浏览器仍会下载并执行整个应用呈现与纯 SPA 相同的交互体验两全其美。预渲染按路由逐个开启import { app, page, route } from wasp.sh/spec import { LandingPage } from ./src/LandingPage with { type: ref } export default app({ // ... decls: [ route(LandingRoute, /, page(LandingPage), { prerender: true }), ], })从源码层面看预渲染的实现细节如下Route.hsWasp 内部的Route数据结构中prerender字段是具体的静态路径列表[String]。公开的prerender: true简写会被 TSspec包规范化为[routePath]即路由自身的路径因此到达编译器内部时始终是一个路径列表。wasp build时这些路径会被逐一调用、把页面组件渲染为带水合hydration标记的 HTML写入构建输出文件请求命中预渲染路径时服务器直接发送这份 HTML浏览器加载 JS 后再由 React 水合成完整交互应用无需二次渲染。预渲染的约束与进阶用法详见 预渲染文档不能用于带authRequired: true的页面因为其内容依赖登录用户。Wasp 会在编译期报错Valid.hs 中的validatePrerenderRoutes会校验这些约束。静态路由直接设prerender: true即可。动态路由含动态段如/supported-countries/:country需要传入具体路径数组route(CountryRoute, /supported-countries/:country, page(CountryPage), { prerender: [/supported-countries/us, /supported-countries/es], })预渲染路径必须匹配路由模式且所有动态段都要替换为具体值。未在数组中声明的路径仍正常工作只是按普通方式在客户端渲染。从数据生成路径列表Wasp Spec 文件以普通 Node.js 脚本方式运行见 Spec 说明因此可以用任何 Node.js APIfs、path、fetch或 npm 库生成预渲染路径例如从分析服务拉取 Top 10 国家列表再映射为路径。水合不匹配排查预渲染时渲染typeof window、Date.now()、Math.random()、浏览器 APIwindow.innerWidth、localStorage等会导致前后端渲染结果不一致React 可能丢弃预渲染 HTML。修复方式是首屏渲染保持一致用useEffectuseState的useIsClient模式在水合后再添加客户端行为。语义化标记Semantic Markup大多数爬虫和屏幕阅读器看不到图片内容因此每张有意义的图片都需要通过alt属性提供文本描述。缺失alt文本是 Lighthouse SEO 审计中最常标记的问题之一img src{testimonial.avatarSrc} alt{Profile picture of ${testimonial.name}} /纯装饰性图片可以用空alt让爬虫忽略传达信息的图片如产品照片、头像则应在alt中描述该信息。同时应使用语义化 HTML 帮助爬虫理解内容每个页面用一个h1作为主标题用h2、h3等按顺序组织副标题使用描述性链接文本而非点击这里这种泛泛表述让爬虫知道链接页面的主题。链接尤其值得注意——爬虫通过跟随a标签发现页面。带onClick导航的button对爬虫不可见因此结构性导航页头、页脚、内容内链接应始终使用真实链接。在 Wasp 中应使用Link组件它渲染a标签并对路由做类型检查程序化导航如表单提交后重定向留给动作场景import { Link } from wasp/client/router export function Navbar() { return ( nav {/* ❌ 爬虫看不到也无法跟随这种导航 */} button onClick{() navigate(/pricing)}Pricing/button {/* ✅ 可被发现的真实链接 */} Link to/pricingPricing/Link /nav ) }结构化数据Structured Data默认情况下爬虫和 AI 引擎只把你的页面当作纯文本读取——一袋词靠猜来理解含义与关系。结构化数据以机器可读的格式提供更多内容信息让爬虫理解得更准确、展示更丰富的结果。如果你在 Google 上搜索过菜谱并看到带星级评分、烹饪时间和照片的结果那就是结构化数据在起作用。对典型 SaaS 应用你可以在定价页用它帮助爬虫识别不同套餐、功能与价格并直接展示在搜索结果页。最常用的方式是JSON-LD——一种特定格式的script标签import type { WebApplication, WithContext } from schema-dts; export function PricingPage() { const pricingPlans usePricingPlans(); const structuredData: WithContextWebApplication { context: https://schema.org, type: WebApplication, name: My travel app, applicationCategory: TravelApplication, offers: pricingPlans.map((plan) ({ type: Offer, name: plan.name, price: plan.price, priceCurrency: USD, description: plan.description, })), }; return ( h1Our Pricing Plans/h1 pChoose the plan that works best for you./p {/* ... */} script typeapplication/ldjson {JSON.stringify(structuredData)} /script / ); }schema-dts提供类型化的 TypeScript 定义保证结构化数据对象与 Schema.org 词汇表一致。上例用WebApplication类型描述应用本体并用Offer数组逐个描述套餐最终通过JSON.stringify序列化到application/ldjson脚本标签中。减小页面体积搜索引擎通过 Core Web Vitals 将页面速度纳入排名因素页面越小加载越快。两项收益最大的做法优化图片按实际显示尺寸提供图片优先 WebP 或 AVIF 等现代格式从源码导入图片见 静态资源处理可让 Vite 对文件名做哈希浏览器得以激进缓存。懒加载页面重型部分Wasp 可以拆分组件使其 HTML、JS 和 CSS 不在一开始就加载。对大型或首屏以下below-the-fold的组件用React.lazy按需加载import { lazy } from react // 这个组件可能引入大型绘图库 // 且不在页面顶部因此不预先加载。 const InteractiveGraph lazy(() import(src/components/InteractiveGraph)); export function LandingPage() { return ( div h1Welcome to My App/h1 pHeres some important information about our app.../p {/* 在页面其余部分加载完成后加载。 */} Suspense fallback{pLoading graph.../p} InteractiveGraph / /Suspense /div ) }标准文件Well-known Files爬虫会在站点根路径寻找几个标准文件。把它们放在项目根目录的public目录下见 静态资源处理——该目录的文件原样从根路径提供所以public/robots.txt在线上对应https://your-app.com/robots.txt. └── public ├── favicon.ico ├── robots.txt ├── llms.txt └── sitemap.xmlrobots.txt最小的robots.txt允许爬虫访问除管理、API、认证等不希望它们浪费时间爬取的路由以外的所有内容User-agent: * Allow: / Disallow: /admin/ Disallow: /api/ Disallow: /auth/⚠️robots.txt不能把页面从搜索结果中隐藏robots.txt只阻止爬取不阻止索引。如果其他站点链接到你的/admin/路由Google 依然可以不访问该页面而索引这个 URL。要可靠地让应用页退出搜索结果请在这些页面组件中添加robotsmeta 标签export function DashboardPage() { return ( meta namerobots contentnoindex, nofollow / h1Your Dashboard/h1 {/* ... */} / ) }sitemap.xml站点地图列出你希望被索引的站点 URL。爬虫通常能通过跟随页面间链接发现页面但对于外部链接稀少的新应用站点地图是让爬虫最快找到全部路由的方式。你也可以把它提交给 Search Console监控 Google 的索引情况。内容页通常数量少且稳定手写public/sitemap.xml即可或让 AI 助手根据main.wasp.ts中的路由生成。⚠️保持站点地图最新过期的站点地图列出失效 URL 或缺少新页面比没有更糟。一旦添加内容页变化时记得重新生成。llms.txtllms.txt可以把 AI 助手引导到它应该阅读的主要页面帮助其了解你的应用。LLM 很擅长理解 Markdown因此通常用 Markdown 编写但格式不限# MyTravelApp MyTravelApp is a web application that helps users plan their trips. ## Docs - [Features](https://mytravelapp.com/features): What the app can do. - [Pricing](https://mytravelapp.com/pricing): Plans and prices. - [API documentation](https://mytravelapp.com/api-docs): How LLMs can interact with the app on a users behalf. ## Getting started - [Demo](https://mytravelapp.com/demo): Try the app without signing up. - [Sign up](https://mytravelapp.com/signup): Create an account. - [Dashboard](https://mytravelapp.com/dashboard): Where users manage their trips after signing up. ## Optional - [Blog](https://mytravelapp.com/blog): Travel tips and product updates.llms.txt也可以作为一种替代式的信息呈现方式不指向页面而是直接写出完整内容让助手无需渲染和解析真实页面就能了解应用的一切# MyTravelApp MyTravelApp is a web application that helps users plan their trips. It lets you build day-by-day itineraries, track your budget, and share plans with travel companions. ## Features - **Itinerary builder.** Add flights, hotels, and activities to a timeline that automatically sorts them by date and warns you about overlaps. - **Budget tracking.** [...] ## Pricing MyTravelApp is free for one active trip. The Pro plan is $9/month and unlocks unlimited trips, offline access, and [...] ## Frequently asked questions **Can I use MyTravelApp offline?** Yes, Pro users can download trips for offline access [...] [...]值得留意的是Wasp 仓库自身就在使用llms.txt生态web/markdown-snapshots/目录下维护着llms.txt、llms-full.txt、llms-current.txt等快照文件由web/scripts/markdown-snapshots.mts生成供 AI 助手系统化读取文档——这正是该技术在生产项目中的真实落地范例。其他技术SEO 的技术手段远不止这些。线上有大量资料Wasp 指南建议从 Google Search 官方文档开始——它是 Google 期望页面的完整参考并专门增设了面向 AI 助手的优化章节。其入门指南SEO Starter Guide是很好的起点。好内容才是根本以上所有内容是一份技术检查清单应用每项技术、测量、勾选。但这些技术只能放大已经存在的东西。如果你的页面没有有用、相关的内容再多的 SEO 也不会让它排名靠前。请确保内容高质量、写得好、为用户提供价值。堆砌关键词、使用标题党、批量生产未经审阅的内容长期来看没有帮助甚至可能被搜索引擎惩罚。专注于创建回答用户问题、解决用户问题的内容。Google 也发布了关于创建优质内容的指南Creating helpful, reliable, people-first content其中详细说明了内容创作应关注的重点——在把本节清单逐项落实之前值得先读一读它。【免费下载链接】waspThe batteries-included full-stack framework for the AI era. Develop JS/TS web apps (React, Node.js, and Prisma) using declarative code that abstracts away complex full-stack features like auth, background jobs, RPC, email sending, end-to-end type safety, single-command deployment, and more.项目地址: https://gitcode.com/GitHub_Trending/wa/wasp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考