Next.js、Vue 等前端渲染站点：让 AI 爬虫读到正文
简明回答
Googlebot 会渲染 JavaScript，但 2024 年的一项研究发现主要 AI 爬虫不会。用 SSR、静态生成或预渲染，把正文、链接和元数据放进服务端 HTML，再用不执行 JS 的抓取和服务器日志验证。
本文写给用 React、Next.js、Vue、Nuxt 等框架建站的开发者和技术负责人。它解释 AI 爬虫为什么可能拿到空白页、哪些渲染选择能解决、怎样检查结果。检查几个模板只要一小时；现有应用切换渲染模式，可能需要几天到几周。
- 假定 AI 爬虫只读服务器返回的 HTML。
- 查清每个模板的 HTML 里到底有什么。
- 在服务端渲染正文：SSR、静态生成或预渲染。
- 链接、元数据和结构化数据也放进这份 HTML。
- 机器人收到的内容与用户看到的保持一致。
- 用不执行 JS 的抓取和爬虫日志验证，每次发版后复查。
1. 假定爬虫只读服务端 HTML
Section titled “1. 假定爬虫只读服务端 HTML”Google 会渲染 JavaScript。按现有最好的证据，大多数 AI 爬虫不会。
这项研究只是一次观测，距今快两年，各家 AI 公司也都没有公开说明自己是否渲染。稳妥的设计不依赖谁会渲染：把内容放进 HTML。背景见 JavaScript 渲染与 AI 爬虫。
2. 查清每个模板返回什么
Section titled “2. 查清每个模板返回什么”不必检查全站。每类模板挑一个网址：首页、文章、商品、分类、文档页。
curl -s -A "OAI-SearchBot" https://example.com/page/ > raw.htmlgrep -c "正文中间的一句话" raw.htmlgrep -iE '<title>|rel="canonical"|name="description"|application/ld\+json' raw.html逐个模板记录原始 HTML 中是否有：
| 项目 | 原始 HTML 中有吗？ |
|---|---|
| 正文和标题 | |
以 <a href> 形式存在的内链 | |
| 标题、描述、规范网址 | |
| 结构化数据 | |
| 选项卡、折叠面板、「加载更多」里的内容 |
再用网址检查工具对照 Google 看到的版本：网址检查工具。两者的差距，就是 AI 爬虫漏掉的部分。
3. 在服务端渲染正文
Section titled “3. 在服务端渲染正文”现代框架本来就支持服务端渲染，很多时候只要别主动关掉它。
选择渲染模式：
| 内容 | 模式 |
|---|---|
| 营销页、文档、博客 | 构建时静态生成 |
| 经常变化的商品目录或内容 | SSR，或静态生成加定时重新验证 |
| 登录后的应用界面 | 客户端渲染即可，爬虫不需要 |
在 Next.js 中，留意在 useEffect 里取数据、以及在组件树高处写 "use client" 的情况。在 Vue 或 Nuxt 中，确认关键内容页不是纯客户端路由。
所以只给机器人提供预渲染快照，只能作为旧应用的过渡办法，要计划替换掉。
4. 链接和元数据也放进 HTML
Section titled “4. 链接和元数据也放进 HTML”爬虫靠链接发现页面，靠元数据理解页面。两者若是后注入的，出了问题也不会报错。
- 导航用真正的
<a href>链接，不要用div加点击事件：链接最佳实践。 - 在服务端输出
<title>、meta 描述、规范网址和hreflang：规范网址（canonical）信号、为多语言页面设置 hreflang。 - JSON-LD 写在服务端 HTML 里，不要靠标签管理器注入：结构化数据与 AI 搜索。
- 返回真实的状态码。客户端显示「找不到页面」却返回
200，就是软 404：HTTP 状态码与爬虫。 - XML Sitemap 从同一套路由生成：XML 站点地图（Sitemap）。
5. 给机器人和用户同样的事实
Section titled “5. 给机器人和用户同样的事实”服务端渲染对所有人返回同一份 HTML，这一条自然满足。事实走样往往出在只给机器人的快照和按 User-Agent 分流上：价格、库存、日期。如果必须保留快照服务，定期把它的输出和线上页面对比。
6. 验证，并持续验证
Section titled “6. 验证，并持续验证”- 用网址检查工具查看关键模板，确认已被索引。
- 把第 2 步的
curl检查加进 CI，哪次发版把内容挪到了客户端，构建就失败。 - 框架升级和改版后，重新做一遍模板检查。
- 不要相信浏览器里的测试结果。 你的浏览器会执行 JavaScript，爬虫可能不会（见第 1 步）。
- 新站不要用动态渲染。 Google 称之为权宜之计（见第 3 步）。
- 不要把关键内容藏在点击后才加载的交互里（见第 2 步）。
- 不要用 llms.txt 或 Markdown 副本代替修复渲染。 没有文档说明它们能替代：说法核查：llms.txt 能提升 AI 搜索可见度。
- 不要禁止 Googlebot 抓取渲染所需的 JS 和 CSS。 Google 渲染时要用到它们：robots.txt。
怎么判断有没有效果
Section titled “怎么判断有没有效果”- 原始 HTML。 每个关键模板都在 CI 中通过第 2 步的检查表。
- 爬虫访问。 已验证的 AI 搜索爬虫来抓取页面并拿到
200：在服务器日志中验证 AI 爬虫流量。 - 索引。 在 Search Console 网页索引编制报告中确认已索引：网页索引编制报告。
- 引用。 用固定提示词集合和 AI 报告衡量，见 用提示词抽样测量 AI 可见度 和 Bing AI 表现报告（AI Performance）。
| 建议 | 证据等级 |
|---|---|
| Googlebot 会排队渲染 JS | 官方（Google） |
| 主要 AI 爬虫不渲染 JS | 实践观察（Vercel 与 MERJ，2024-12） |
| 正文服务端渲染或预渲染 | 官方（Google、Vue、Next.js） |
| 新建项目避免动态渲染 | 官方（Google） |
| 机器人与用户看到同样的事实 | 官方（微软，限 Copilot 购物） |
| 用原始抓取和日志验证 | 官方（Google） |