2026 年 JavaScript SEO：渲染、索引与 AI 爬虫

React、Vue、Angular、Svelte 等现代框架在浏览器中构建页面。这对交互性很有利，但对可见度有风险。JavaScript SEO 是一系列确保 JS 网站能被搜索引擎和 AI 读懂的做法。本指南将解释 Google 如何处理 JavaScript、有哪些渲染方式、常见错误是什么，以及如何测试您的页面。

Google 如何处理 JavaScript 页面？

分为三个阶段：抓取、渲染、索引。Google 搜索中心对这一流程的描述如下：

1. 抓取：Googlebot 获取 URL 并读取原始 HTML。在这一阶段发现的链接会立即进入队列。
2. 渲染：页面在渲染队列中等待，随后无界面的 Chromium 执行 JavaScript 并构建最终页面。
3. 索引：Google 分析渲染后的内容，再决定是否以及如何将其编入索引。

由此可见：原始 HTML 中缺失的任何内容，都取决于渲染能否成功。如果脚本出错、超时或被 robots.txt 屏蔽，Google 只会索引之前看到的内容，而那可能只是一个空壳。

CSR、SSR 和静态渲染有什么区别？

区别在于 HTML 在哪里生成：在浏览器中、在服务器上按每次请求生成，还是在构建时一次性生成。

Next.js、Nuxt、SvelteKit、Astro 等框架已将 SSR 和静态生成作为内容页面的默认选项。对于博客、文档或产品页面，几乎没有理由只在浏览器中渲染内容。

最常见的 JavaScript SEO 错误有哪些？

大多数问题来自只有在交互之后才出现的内容或链接。

• 没有 href 的链接：在 "div" 或 "span" 元素上用点击事件实现的导航不会被跟踪。请使用真实的 "a href" 链接。
• 隐藏在交互之后的内容：只有在点击、切换标签或无限滚动后才加载的文字，Googlebot 可能永远不会渲染。
• 资源被屏蔽：在 robots.txt 中屏蔽 JavaScript 或 API 文件会导致无法渲染。
• 元数据设置过晚：由 JavaScript 修改的标题、canonical 或 noindex 标签，可能与原始 HTML 相矛盾。
• 带井号的 URL："/#/product" 这类片段不会被视为独立页面；请使用 History API 和干净的路径。
• 软 404：单页应用在显示“未找到”时返回 200 状态码，会干扰索引。
• 脚本包过大：大型脚本会拖慢渲染、损害 Core Web Vitals，并增加超时风险。

为什么 JavaScript 会影响在 AI 中的可见度？

因为大多数 AI 爬虫只读取原始 HTML。对爬虫日志的分析（例如 Vercel 在 2024 年发布的 AI 爬虫流量研究）发现，OpenAI 和 Anthropic 的爬虫会获取 JavaScript 文件，但不会执行。如果一个页面的文字只有在 JavaScript 运行后才出现，那么即使 Google 正常索引了它，在为 ChatGPT、Claude 或 Perplexity 提供数据的系统看来，它也可能是空白的。

如果被 AI 引用对您很重要，请把主要答案、标题、表格和链接放在服务端 HTML 中，并确认 robots.txt 允许您希望的 AI 爬虫访问。我们关于AI 爬虫 robots.txt 设置的指南列出了主要爬虫，AI 可抓取性审查工具则能显示它们在您的页面上能读到什么。

如何测试 JavaScript SEO？

把原始 HTML 与 Google 渲染后的结果进行对比。

1. 查看页面源代码（而不是开发者工具中的元素）：如果主要内容不在其中，就说明它依赖 JavaScript。
2. 使用 Google Search Console 中的网址检查工具，查看渲染后的 HTML 和截图。
3. 运行富媒体搜索结果测试，它同样会显示任意公开 URL 的渲染后 HTML。
4. 在浏览器中禁用 JavaScript，大致了解不渲染页面的爬虫能看到什么。
5. 分别用开启和关闭 JavaScript 模式的爬虫抓取网站，比较发现的链接和文字。
6. 用可索引性检查工具检查关键 URL 的索引状态。

JavaScript SEO 检查清单是什么？

六条规则覆盖大多数情况：

• 主要内容、标题、元描述和 canonical 都在初始 HTML 中。
• 内部链接使用 "a href" 元素，并指向可抓取的 URL。
• robots.txt 中没有屏蔽任何 JavaScript、CSS 或 API 文件。
• 不存在的页面和重定向返回正确的 HTTP 状态码。
• 延迟加载只用于首屏以下的媒体，绝不用于主要文字。
• 每次重要的前端发布后，都在 Search Console 中测试渲染效果。

结论

只要内容的存在不依赖 JavaScript，JavaScript 和 SEO 就能很好地共存。在服务器上或构建时渲染内容页面，保持真实链接，并测试 Google 和 AI 实际看到的内容。Sorank 以 autopilot 方式把文章以干净的 HTML 直接发布到您的 CMS 中，并附带内部链接和结构化数据：查看套餐和 3 天免费试用。