SPA路由不支持SEO，因爬虫无法执行JS获取动态内容；预渲染在构建时生成静态HTML快照供爬虫抓取，适合页面固定场景；SSR/SSG则更彻底但成本更高；还需配置独享title/meta、语义化标签、robots.txt、sitemap.xml并用Search Console验证。
SPA 路由本身不支持 SEO，必须靠服务端配合
单页应用（SPA）使用前端路由（如 Vue Router 的 history 模式或 React Router 的 BrowserRouter），所有页面切换都在浏览器内完成，服务器只返回一个 HTML 文件。搜索引擎爬虫通常不执行 JavaScript，或执行不完整，导致无法识别动态渲染的内容，页面标题、描述、正文都抓不到——本质上不是“没做 SEO”，而是爬虫根本看不到内容。
预渲染是轻量级、见效快的解决方案
预渲染指在构建时（build time）针对指定路由，用无头浏览器（如 Puppeteer）访问页面、等待 JS 渲染完成，再将生成的静态 HTML 保存下来。部署时，当爬虫请求这些路径，服务器直接返回已渲染好的 HTML，而非空壳 index.html。
- 适合页面数量固定、更新频率低的场景（如官网、文档页、营销落地页）
- Vue CLI 可集成 prerender-spa-plugin；Vite 生态推荐 vite-plugin-prerender
- 需显式配置需要预渲染的路由列表，例如
['/', '/about', '/products/123']，动态路由需提前枚举参数 - 注意：预渲染后的 HTML 是静态快照，若页面依赖用户登录态、实时 API 数据，需额外处理（如留空区域 + 客户端 hydration 补充）
服务端渲染（SSR）或静态站点生成（SSG）更彻底但成本更高
预渲染解决的是“爬虫看不见”的问题，而 SSR（如 Nuxt、Next.js）是在每次请求时服务端实时执行 JS 渲染；SSG（如 VitePress、Next.js 的 getStaticProps）则在构建时为每个路由生成独立 HTML 文件。两者都能输出带内容的首屏 HTML，天然利于 SEO。
- SSR 适合内容频繁变动、需个性化数据的页面（如用户仪表盘、搜索结果页）
- SSG 更适合内容稳定、可提前生成的站点（博客、帮助中心），构建后无需 Node 服务，可托管在 CDN
- 相比预渲染，SSR/SSG 支持动态路由自动推导、数据获取与 HTML 输出强绑定，维护性更好
别忘了基础 SEO 配置和验证环节
无论用哪种方案，以下细节决定 SEO 效果是否落地：
-
每个路由独享 title 和 meta description：通过路由守卫（Vue）或 useEffect（React）动态写入 document.title 和
<meta name="description"> -
语义化 HTML 结构：用
<h1>~<h6>、<article>、<section>等标签组织内容，避免全靠 div 堆砌 - 生成并部署 robots.txt 和 sitemap.xml：尤其 sitemap 要包含所有预渲染/SSG 的路由，便于爬虫发现
- 用 Google Search Console 抓取测试：输入 URL，选择“查看渲染后的 HTML”，确认看到的是含正文、标题、关键词的真实内容，而非空 div 或 loading 文本
