搜索抓取

JavaScript 渲染与 URL 发现:蜘蛛到底能看到哪些链接

很多站点的导航和分页由 JavaScript 生成,蜘蛛可能拿不到链接入口。本文说明原始 HTML、渲染队列和前端路由对 URL 发现的影响,并给出服务端渲染、预渲染、内链和 Sitemap 配合的实用做法。

搜索抓取

JavaScript 渲染与 URL 发现:蜘蛛到底能看到哪些链接

很多站点的导航、分页和商品列表都由 JavaScript 在浏览器里生成。对用户来说没问题,但对搜索蜘蛛来说,这些链接可能压根不在初始 HTML 里。URL 发现的第一步不是“让蜘蛛执行脚本”,而是“让它不用执行脚本也能看到入口”。

蜘蛛处理 JS 的两种路径

以 Google 为例,抓取通常分两步:先请求原始 HTML,把 URL 放进抓取队列;如果页面需要渲染,再进入渲染队列执行 JS。渲染队列有延迟,也有资源限制。其他搜索引擎对 JS 的执行能力、等待时间和渲染覆盖率差异更大。因此,把关键链接完全交给 JS 输出,等于把发现时机往后推,甚至可能永远等不到。

哪些写法会让 URL 变“隐形”

  • onclick 跳转:用 div 或 button 绑定点击事件,而不是 a href。蜘蛛不会去点,链接地址读不到。
  • 前端路由:单页应用里用 history.pushState 切换 URL,初始 HTML 往往只有一个空容器。
  • 无限滚动:内容随滚动异步加载,后续页面的 URL 没有被任何静态链接指向。
  • 分页按钮:“下一页”由 JS 计算生成,且没有可抓取的 href。
  • 异步菜单:分类或筛选链接在接口返回后才插入 DOM,原始 HTML 里没有。

这些写法共同的问题是把“URL 清单”藏在执行结果里。蜘蛛如果跳过渲染,或者渲染失败,就只剩下少量入口可走。

让关键 URL 在初始 HTML 里可见

优先保证核心路径不依赖 JS。常见做法包括:

  1. 服务端渲染或静态生成,让导航、列表、分页在 HTML 源码里就有 a 标签。
  2. 对必须客户端渲染的页面,使用预渲染或动态渲染,向蜘蛛返回可读的 HTML 版本。
  3. 分页保留真实 href,例如 /list?page=2,而不是只用按钮和事件。
  4. 分类、标签、详情页之间建立普通内链,不要全部依赖筛选组件。
  5. Sitemap 作为补充清单,但不要把它当作内链的替代品。
蜘蛛发现 URL 的主要路径仍然是链接。Sitemap 能提交地址,但链接位置和上下文会帮助它判断哪些页面更值得抓取。

怎样检查 JS 里的链接是否被看到

最直接的方法是查看页面源代码,而不是看开发者工具里的 Elements 面板。源码里没有的链接,就要警惕。也可以临时禁用浏览器 JS,看看页面还能不能走出主要路径。抓取日志里,如果渲染请求反复出现、原始 HTML 抓取后没有后续,通常说明入口不够明显。搜索资源平台的 URL 检查工具可以作为参考,但不同引擎表现不一致,不能只依赖单一工具。

动态渲染的取舍

动态渲染能解决“蜘蛛看不到”的问题,但也增加维护成本:需要判断哪些 User-Agent 返回渲染版,需要保持两套输出内容一致。如果站点本身可以服务端渲染,优先选择服务端渲染。如果只是少量营销页或活动页,预渲染更轻。无论哪种方案,核心目标都是让 URL 在第一次请求时就出现在 HTML 中。

小结

JS 渲染不是不能用于 URL 发现,而是不要把发现入口全部押在渲染上。把导航、分页、详情链接放回 HTML,让蜘蛛先用最低成本拿到地址清单,再谈抓取和更新。对站点运营来说,这比事后补 Sitemap 更稳。