网站收录

JS 渲染页面的收录核对:抓取版本与渲染版本差在哪

不少站点内容靠 JavaScript 生成,收录慢或收录的版本不对,问题往往出在服务器返回的原始 HTML 里。这篇按顺序讲清楚:先关掉 JS 看源码还剩什么,再用工具比对抓取版与渲染版,接着检查内链、robots 拦截和接口可达性,最后列出懒加载、无限滚动、前端路由这几类常见哑火情形。

网站收录

JS 渲染页面的收录核对:抓取版本与渲染版本差在哪

先弄清蜘蛛拿到的是哪个版本

搜索引擎抓取页面时,第一步拿到的是服务器返回的 HTML 源码,而不是浏览器渲染之后的画面。如果标题、正文、链接全靠 JavaScript 在浏览器里生成,源码里可能只有一个空的容器。抓取到的版本和用户看到的版本不一致,收录判断就会跟着出问题。

核对方式很直接:用查看网页源代码或 curl 拉一次页面,再关掉 JavaScript 打开一次,看看还剩多少内容。如果关掉 JS 后页面接近空白,那这套内容对抓取意味着什么,就需要重新评估。

三种渲染方式的差别

服务端渲染与静态生成

这两种方式下,服务器返回的 HTML 里就带着标题、正文和内链,抓取和收录相对省事,后续排查也简单。

客户端渲染

源码几乎是空壳,内容在浏览器里才拼出来。搜索引擎会排队等待渲染,渲染本身有成本也有延迟,收录慢、收录不全、收录的版本偏旧都可能出现。

比对抓取版本与渲染版本

在站点工具里用 URL 检查类的功能,一般能看到「已抓取的 HTML」和「渲染后的结果」两种输出。重点看三处:

  • title、H1、正文首段是否出现在已抓取的 HTML 里;
  • canonical、robots meta 是否在源码里就写好,而不是等 JS 注入;
  • 内链是否以 a href 的形式存在于源码中。
如果 canonical 或 robots meta 靠 JavaScript 写入,抓取时可能还没生成,指令就等于没写。

内链常被漏掉

JS 渲染站点里,导航和列表链接经常是事件绑定或异步插入。抓取阶段未必能点开,也未必等到数据返回。把关键导航、列表、面包屑做成源码里就有的 a href,通常是成本最低的改善动作。

资源与接口是否可达

渲染页面需要 JS 文件和接口数据。如果 robots.txt 屏蔽了 JS、CSS 或接口路径,渲染就会失败,抓取到的还是那个空壳。可以核对这几项:

  • robots.txt 是否误拦 /js、/api 等路径;
  • 渲染所需接口是否需要登录态或 token;
  • 接口返回是否稳定,有没有频繁的 403、429;
  • CDN 或 WAF 是否把渲染请求当成异常流量拦下。

几种常见的哑火情形

懒加载与首屏之外

图片、正文后段、评论区如果必须滚动才加载,渲染阶段可能拿不到。关键内容尽量放在首屏,或直接输出在源码里。

无限滚动

没有分页 URL 的无限滚动,等于把后面所有内容藏在一次交互里。给每一屏一个可访问的地址,收录才有入口。

整站只有一个前端路由

History API 路由如果没做服务端对应输出,每个地址返回的都是同一份空壳,收录结果可能只有一条。

处理顺序小结

  1. 关掉 JS 看源码,判断内容是不是接近零;
  2. 用站点工具比对抓取版与渲染版;
  3. 把 title、canonical、robots 指令放回源码输出;
  4. 把导航与列表链接改成源码里的 a href;
  5. 检查 robots.txt 与接口的可达性;
  6. 拆掉懒加载和无限滚动对关键内容的遮挡。

这些调整不会立刻改变收录结果,改动之后仍要观察一段时间的抓取频次与索引状态,再判断下一步。