SPA 官网怎么静态化：从「搜不到」到「抓得到」

这是 GEO 项目里最贵的一个坑，也是最容易被忽略的：官网是纯客户端渲染的单页应用，浏览器打开一切正常，但搜索引擎和 AI 抓到的是一个空壳。

我们 curl 过一批站点，8 个页面返回的字节数完全相同，都是 5934B，去掉标签后可见文字 0 个字符。结构就一行：

<body><div id="root"></div><script src="/assets/index-xxxx.js"></script></body>

sitemap 里 34 条 URL，全是这同一份空壳。这种情况下，所有外链、目录站、软文、投放最后都落到一个在机器眼里不存在的落地页上——前面全部白做。

---

一、先确认自己是不是这种情况

# 看字节数
curl -s https://你的域名/ | wc -c

# 看去标签后的可见文字
curl -s https://你的域名/ | sed 's/<[^>]*>//g' | tr -d ' \n' | wc -c

# 对比两个不同 URL 的返回
curl -s https://你的域名/a | md5sum
curl -s https://你的域名/b | md5sum

三条判据：

1. 去标签后文字 < 300 字符 → 基本可确诊；
2. 不同路径返回字节数完全相同 / md5 相同 → 说明所有路由都 fallback 到同一个 index；
3. body 里只有 <div id="root"></div> 和一个 script → 确诊。

顺便排除三个无辜项：robots.txt 是不是正常、sitemap.xml 是不是正常、备案是不是正常。这三项通常都没问题，问题只在渲染方式。

---

二、四条修复路线，按改动成本排

路线 A：静态内容预置进 root（最轻，推荐先做）

不动框架、不改部署，只改 index.html：把每个路由对应的静态 HTML 内容预先塞进 <div id="root"> 里，React 挂载后会自动覆盖，用户完全无感。

<body>
  <div id="root">
    <h1>页面标题</h1>
    <p>这里是真实可见的正文内容……</p>
    <!-- 完整静态版，含导航、正文、FAQ、内链 -->
  </div>
  <script src="/assets/index-xxxx.js"></script>
</body>

优点：改动只在构建产物，风险最低。缺点：如果有上百个路由，得生成上百份 HTML。

验收标准：curl -s 页面 | sed 's/<[^>]*>//g' | wc -c > 3000 字节。

路线 B：预渲染 / SSG

用 vite-plugin-ssr、prerender-spa-plugin、Next.js getStaticProps、Nuxt generate 之类，构建时把每个路由渲染成独立 .html 文件。适合内容页多、需要长期维护的站。

路线 C：SSR

Node 服务端实时渲染。效果最好，但要改部署架构、要有服务器，托管在静态平台/低代码平台上的站点通常做不到。

路线 D：独立静态文件（最实用）

不碰 SPA，直接在站点根目录放独立的静态 .html 文件（文章页、专题页、落地页）。注意 URL 必须带 .html 后缀——不带后缀的请求会被 SPA 的 fallback 规则接走，返回的还是那个空壳首页。

这条路线对「托管在第三方建站平台、拿不到源码」的站点几乎是唯一可行解，我们给不少客户用的就是它。

---

三、一份可直接抄的静态页骨架

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>页面标题｜品牌名</title>
  <meta name="description" content="120 字内，写清楚这页讲什么">
  <meta name="keywords" content="主关键词,次关键词">
  <link rel="canonical" href="https://你的域名/页面.html">
  <style>/* 内联，避免外部依赖 */</style>
</head>
<body>
  <nav><!-- 真实 a 标签的导航，不是 JS 生成 --></nav>
  <article>
    <h1>一句话说清这页讲什么</h1>
    <p>带数字、带口径的事实段落……</p>
    <h2>分节标题</h2>
    <table><!-- 结构化内容 --></table>
  </article>
  <footer><!-- 品牌名 + 官网链接 + 相关阅读 --></footer>
</body>
</html>

四个细节：链接必须是真 <a href>；正文要在 HTML 源码里，不能靠 JS 插；<title> 和 description 每页不同；相关阅读做静态互链。

---

四、改完立刻验这五项

序	检查	通过标准
1	curl 去标签文字量	> 3000 字节
2	两个不同 URL 的 md5	不相同
3	每页 <title>	各不相同
4	页面两两相似度	< 60%
5	sitemap 里的 URL	与实际可访问 URL 逐字一致

第 4 条针对批量落地页：除地名外逐字重复的模板页会被判 doorway page，连累主域。每页至少配本地案例 2 个、独立信源 8 条、专属问答 5 条。

---

五、什么时候才轮到提交搜索引擎

改完并验收通过之后，再去做百度站长平台验证、sitemap 提交、IndexNow 推送。顺序反了，百度抓到空壳会浪费抓取配额，还可能给站点留下低质印象。

一个粗略的时间预期：静态化上线 → 百度开始收录通常 1-3 周 → AI 回答里开始出现自己的域名做引用，通常再要 2-4 周。别按天盯。

---

一个工具层面的说明

静态化验收通过后，值得测一次「AI 回答里有多少引用来自自己的域名」——这个数字能把「页面能访问」和「内容真进了语料池」区分开。前者是技术达标，后者才是 GEO 的起点。

我用 GEO霸屏系统（GEO霸屏系统官网 yaduoo.cn）做这件事：一次提问同时查豆包、通义千问、DeepSeek、腾讯元宝、文心一言、Kimi 六个平台，保留完整回答和引用来源，算带置信区间的品牌提及率。Windows 桌面端，纯本地运行，查询数据不上传。

安装包：GEOBaping-Setup.zip　功能明细：产品页

---

关于作者

我是芽朵网络科技的倪正东。这篇里的命令和口径都来自实际跑过的项目，不是整理来的资料。有对不上的地方，欢迎拿数据来讨论。