尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

JavaScript SEO:Google 和 AI 爬虫在你的网站上真正看到了什么

JavaScript SEO:Google 和 AI 爬虫在你的网站上真正看到了什么 JavaScript SEO 就是确保用 JavaScript 构建的内容仍然能被找到和读取。Google 会运行 JavaScript通常是在第二轮抓取时。而主要的 AI 爬虫根本不运行 JavaScript所以一个只有等 JavaScript 运行后才会出现文本的页面对它们来说几乎是空的。解决办法是让文本直接出现在 HTML 里通过服务端渲染或预渲染。下面是不那么舒服的JavaScript SEO版本我自己网站的一个早期版本对我一直告诉客户要重视的那些 AI 爬虫来说几乎是隐形的。页面在浏览器里看起来是完整的。但它实际发送出去的是一个近乎空白的文件和一段之后才构建页面的脚本。Google 最终会运行那段脚本。ChatGPT 的爬虫不会。JavaScript SEO 就是确保用 JavaScript 构建的内容仍然能被找到、读取和索引的工作。这份指南会解释 Google 对 JavaScript 做什么、AI 爬虫又改怎么做、我在 50 个真实网站上测量到了什么以及如何用一个下午检查并修复你自己的网站。JavaScript SEO 到底是什么意思每个网页到达访客的方式只有两种而这一区别决定了 JavaScript SEO 的大部分内容。服务端渲染SSR或静态 HTML。服务器发送一个完整的页面。文字、标题和链接都已经在 HTML 文件里。任何读取这个文件的东西——无论是人还是机器人——都能立刻得到内容。客户端渲染CSR。服务器发送一个几乎空白的壳通常是一个单独的div idroot/div外加一个 JavaScript 包。访客的浏览器运行这个包然后页面才会出现。在浏览器里这两种看起来一模一样这就是问题藏得这么好的原因。只有在遇到不运行 JavaScript 的访客时差异才会显现。那个访客看到的是壳而一个壳没有任何可以参与排名、引用或标注的内容。作为单页应用构建的 React、Vue 和 Svelte 应用默认在客户端渲染。许多用 AI 网站构建器制作的网站也是如此。Next.js、Nuxt 和 Astro 等框架可以改发送完整的 HTML但前提是网站按那种方式配置。光看框架名字说明不了任何问题你必须看服务器实际发送了什么。Google 如何处理 JavaScript抓取、渲染、索引Google 确实会运行 JavaScript。Google 自己的文档明确说明它主要通过三个阶段处理 JavaScript 网页应用抓取、渲染和索引。重要的细节是前两个阶段之间的间隔。Googlebot 先抓取 HTML然后把页面放入队列交给无头 Chromium 浏览器渲染。用 Google 的话说页面可能会在这个队列里停留几秒钟但也可能更久。Google Search CentralJavaScript SEO 基础知识所以客户端渲染的页面确实会被 Google 索引但要走两轮而且第二轮中任何出错的地方脚本错误、被屏蔽的文件、缓慢的 API 调用都可能让 Google 拿到空壳。Google 还警告说它不会渲染来自被屏蔽文件的 JavaScript所以 robots.txt 里一条屏蔽你的 JavaScript 或 CSS 文件夹的规则会在它面前悄悄把你的页面变成空白。Google 自己的建议同一份指南里是不要依赖那第二轮渲染并不是所有机器人都会运行 JavaScript。Google Search CentralJavaScript SEO 基础知识这句话就是这篇文章的全部论点。Google 能应付 JavaScript。而读取你网站的大多数其他系统不能。AI 爬虫会渲染 JavaScript 吗不会。这是大部分 JavaScript SEO 建议写得太早、没来得及覆盖的部分。Vercel 和 MERJ 分析了 Vercel 网络上的爬虫流量并于 2024 年 12 月公布了结果。他们在渲染问题上的发现毫不含糊目前主流 AI 爬虫都不会渲染 JavaScript。Vercel 和 MERJAI 爬虫的崛起他们测试的名单包括 OpenAI 的 GPTBot、OAI-SearchBot 和 ChatGPT-UserAnthropic 的 ClaudeBot以及 PerplexityBot。他们发现这些爬虫确实会抓取 JavaScript 文件但不会执行它们。有两个例外值得知道Google 的 Gemini 使用 Googlebot 的基础设施所以它像 Google 一样渲染Applebot 通过基于浏览器的爬虫渲染页面。对客户端渲染的网站来说这意味着人们越来越常用来代替搜索的答案引擎读到的是空壳。如果你的文本不在 HTML 里ChatGPT、Claude 和 Perplexity 就没有任何你的内容可以引用。两个诚实的提醒。那份研究来自 2024 年底而爬虫是会变化的它是我所知道的公开发表的最好的测量结果但不是一条永久定律。另外一些平台现在只为它们认识的爬虫预渲染页面。例如Lovable 的文档描述了在较旧的应用上为经过验证的搜索和 AI 爬虫做预渲染。那只会帮到名单上的爬虫帮不到别人链接预览、较小的 AI 工具以及任何新东西仍然会拿到壳。我在 50 个 AI 构建的网站上测量到的结果为了看看这有多普遍2026 年 9 月 20 日我测量了 50 个网站它们按顺序取自三家 AI 网站构建器的公开展示区20 个来自 Lovable17 个来自 Bolt13 个来自 Replit。每个首页都被抓取两次一次是普通的、不带 JavaScript 的请求也就是 AI 爬虫读取它的方式一次是无头浏览器里带 JavaScript 的请求也就是人看到它的方式。然后我统计了每个版本里的可见单词数。32 个中的 20 个网站的大部分或全部文本都依赖 JavaScript7 个单词是对它隐形的那批网站中爬虫收到的中位数631 个单词是同样的那些网站上带 JavaScript 的人看到的中位数内容太少无法判断、或无法访问的网站被排除在外。50 个中有 32 个可以判断。这 20 个网站中的 18 个发给爬虫的只有 1 到 11 个单词。另外两个展示了部分文本。这些网站并没有坏。在浏览器里它们是完整的页面中位数是 631 个单词。它们只是被构建成在浏览器里自行组装。head 标签看起来没问题这才是陷阱下面就是这个问题能挺过那么多审计的原因。SEO 工具最先检查的页面部分几乎总是存在的即使在那些完全没发送内容的网站上也是如此。爬虫收到的 HTML 中网站数量共抓取 38 个title 标签37meta description36canonical 标签22H1 标题15等待 JavaScript 的空 root div20一份只看 title 和 meta description 的检查清单会让这些网站通过。缺失的是页面正文。在 20 个依赖 JavaScript 的网站中只有 2 个的 HTML 里有一个 H1而有 17 个发货时带着空的 root div。完整的方法、样本规则和原始结果都在 50 站研究里。这不能说明什么三个展示区的 50 个首页只是一个样本说明这个问题很普遍而不是在整个网络上普遍到什么程度而且内页可能与首页不同。我自己的网站也有同样的问题我是在自己的网站上发现这个问题的早于在任何其他人的网站上发现它。我某个页面的第一个版本一个叫 /future 的页面是一个客户端渲染的壳。它发送的 HTML 是1,984 字节而我的名字在里面只出现了两次两次都在 meta 标签里。读者看到的一切都是之后由 JavaScript 构建的。对一个卖点就是可被搜索引擎和 AI 读取的网站来说这等于用自己的文案打了自己的脸。所以我把网站重建为把每个页面都以成品 HTML 发布现在构建步骤会在任何内容上线前把网站内容变成完整的页面而且页面上没有任何东西需要 JavaScript 才能存在。动画和聊天助手仍然使用 JavaScript。文字不需要。你可以自己验证这个说法打开 growwithram.in 上的任意页面按 CtrlUMac 上是 CmdOptionU然后在源码里搜索页面上能看到的一句话。它会在那里。如何在五分钟内检查你自己的网站第一次检查你不需要 SEO 工具。你需要的是你的服务器发送了什么和你的浏览器显示了什么之间的差异。查看页面源码。打开页面按 CtrlU用 CtrlF 搜索页面中间的一句话。如果它不在源码里那么不运行 JavaScript 的爬虫就看不到它。寻找壳。如果源码大部分是 script 标签和一个空的div idroot或div idapp那么这个页面是客户端渲染的。检查 Google 渲染了什么。在 Search Console 里使用 URL Inspection然后选 View crawled page阅读 HTML。那是 Google 的第二轮它告诉你 Google 的渲染是否成功而不是 AI 爬虫看到了什么。检查你的 robots.txt。确保它没有屏蔽你的 JavaScript 和 CSS 加载自的文件夹。Google 不会用它不被允许抓取的文件来渲染。每个模板选一个页面重复检查首页、产品或服务页、博客文章、分类页。渲染问题属于模板所以每个模板查一个页面就能覆盖整个网站。如果你习惯用终端一条命令就能给你爬虫视角的单词数curl -s https://yoursite.com/ | sed -e s/[^]*/ /g | tr -s \n | wc -w在那项研究里我用这个标准把低于 50 个单词的页面判定为对爬虫隐形。如何修复服务端渲染、预渲染或一个临时方案有三个真正的选项其中一个是权宜之计。方案爬虫收到什么什么时候用它服务端渲染SSR完整页面每次请求时构建内容频繁变化或需要个性化静态生成 / 预渲染完整页面提前构建好内容在发布时才变化大多数营销网站和博客动态渲染一份预渲染副本只提供给被识别的机器人只作为迁移期间的临时桥梁对大多数商业网站来说预渲染是最简单的答案页面在两次发布之间很少变化所以构建一次然后给所有人提供成品 HTML。Next.js、Nuxt、Astro 等框架都支持它。如果用的是 AI 构建器看看平台现在提供什么比如 Lovable 的文档说自 2026 年 5 月 13 日起新应用已使用服务端渲染。Google 对第三个选项的态度很直接动态渲染是一种变通方案不是推荐的解决方案Google Search Central动态渲染作为变通方案它只帮到你的服务器认识的机器人而且它让你不得不保持每个页面的两个版本同步。用它来争取时间而不是把它当作修复本身。这些都不意味着要移除 JavaScript。Vercel 的研究把实用要点说得很清楚客户端渲染对计数器、聊天组件和交互元素这类增强功能仍然有效。规则比不要用 JavaScript更窄、更容易你想被找到的文字必须放在 HTML 里。JavaScript SEO 最佳实践一份检查清单一旦内容进入 HTML下面这些检查能抓住其余问题。每一条都来自 Google 的 JavaScript SEO 指南或来自我在审计中看到的东西。链接是真正的链接。Google 说它只能发现带href的a元素形式的链接。带 onclick 处理器的按钮对爬虫来说不是链接。路由使用真正的 URL而不是片段。/services是一个页面#/services不是。单页应用应该使用 History API。缺失页面返回真正的 404。一个用 200 状态显示未找到的客户端应用会制造软 404。Google 的指南给出两种修复重定向到一个返回 404 的 URL或者给错误视图加一个 noindex 标签。title、description 和 canonical 要出现在初始 HTML 里。JavaScript 可以设置它们但 Google 说设置 canonical 的最佳方式是在 HTML 里而且 JavaScript 不应该把它改成不同的 URL。没有重要内容在等待点击。只有打开标签页或按下按钮才加载的文本可能不会被爬虫看到因为它不会点击。JavaScript 和 CSS 可被爬取。robots.txt 里不能有屏蔽页面渲染所需文件的规则。结构化数据尽量放在 HTML 里。Google 能读取 JavaScript 注入的 JSON-LD不运行 JavaScript 的 AI 爬虫不能。JavaScript SEO 审计会检查什么五分钟检查告诉你有没有问题。审计告诉你问题在哪里、波及网站的多少、以及先修什么。当我审计一个 JavaScript 网站时工作遵循与上面研究相同的两次抓取方法但应用于每个模板而不是单个首页。每个模板的原始对比渲染。对每种页面类型比较服务器发送的 HTML 与 JavaScript 运行后的页面单词数、标题、链接和图片。两者之间的差距就是问题的规模而且它几乎总是模板问题而不是页面问题。只在渲染后出现的链接。如果导航、相关文章或分页只在 JavaScript 运行后才出现那么不渲染的爬虫找到的页面会少得多。统计每个模板两个版本里的内链数量。两个版本的 head 标签。title、description、canonical 和 robots meta 在原始版和渲染版之间可能不同。JavaScript 在加载后改变的 canonical 或 noindex 是最有破坏性的发现之一因为它可能悄悄与 HTML 里的那个互相矛盾。缺失页面上的状态码。请求一个本不该存在的 URL。一个用 200 和一条友好的未找到消息应答的单页应用正在制造软 404。robots.txt 对照页面自身的文件。检查页面渲染所需的任何东西都没被屏蔽另外还要单独检查你允许了哪些 AI 爬虫。Google 实际渲染了什么。每个模板选一个页面做 URL Inspection与浏览器显示的内容比较。如果 Google 的渲染 HTML 缺内容问题出在渲染本身而不只是跳过渲染的爬虫。每一条发现都附有它出现的页面和一种你自己验证的方法因为渲染问题很容易声称也很容易证伪。如果一个发现无法从外部复现它就不会进入报告。接下来做什么JavaScript SEO 曾经是一个只属于 Google 的问题也只有 Google 式的答案耐心点渲染器总会到的。那些从不运行 JavaScript 的 AI 爬虫的出现改变了一切。今天一个客户端渲染的页面会被 Google 延迟索引并且被大多数在网络上回答问题的系统当作空白内容来读取。先从每个模板的一个页面的五分钟检查开始。如果文本在源码里你就没问题可以继续走检查清单。如果不在那就是全站最有价值的那个技术修复因为其他每一件 SEO 工作都依赖内容首先可被读取。常见问题JavaScript 会影响 SEO 吗只有当内容依赖它时才会。Google 会运行 JavaScript通常在抓取之后的第二轮所以客户端渲染的页面可能被延迟或不完整地索引。大多数 AI 爬虫根本不运行 JavaScript。如果你的文本在服务器发送的 HTML 里页面上的 JavaScript 就没有害处。客户端渲染对 SEO 不好吗对你想被找到的内容来说在实践中是的。Google 可以索引它但要走两轮而主流 AI 爬虫只读取空壳。客户端渲染对不需要被索引的交互功能没有问题。AI 爬虫会渲染 JavaScript 吗主流爬虫不会。Vercel 和 MERJ 发现 GPTBot、OAI-SearchBot、ChatGPT-User、ClaudeBot 和 PerplexityBot 会抓取 JavaScript 文件但不会执行它们。使用 Google 基础设施的 Gemini 以及 Applebot 会渲染。服务端渲染 vs 客户端渲染哪个对 SEO 更好对任何你想被找到的页面是服务端渲染或静态预渲染。爬虫一次请求就收到成品页面。客户端渲染让索引依赖一个大多数 AI 爬虫永远不会执行的第二步渲染。如何检查 Google 是否能看到我的 JavaScript 内容在 Search Console 里使用 URL Inspection打开 View crawled page阅读 Google 渲染出的 HTML。要看非渲染爬虫得到什么查看页面源码CtrlU并搜索页面里的一句话。相关阅读延伸外链以下为推荐的相关技术教程来自致知笔记如何将笔记本电脑连接到外接显示器如何检查 IP 地址是静态还是动态Static/Dynamic IP如何在 Windows 11/10 中创建密码重置盘
返回列表