网站收录

内容靠 JavaScript 渲染:从抓取到收录之间还隔着渲染这一步

页面内容全靠 JavaScript 渲染时,抓取、渲染、索引是三件不同的事。本文说明渲染延迟为什么拖慢收录,哪些常见写法会让正文在爬虫眼里消失,以及如何自查并用服务端渲染等办法降低影响。

网站收录

内容靠 JavaScript 渲染:从抓取到收录之间还隔着渲染这一步

如果页面的标题、正文、内链都依赖浏览器执行 JavaScript 才会出现,那么“被抓取”和“被收录”之间就多了一道工序——渲染。抓取只是把服务器返回的文件取回去,渲染才是把它变成肉眼可见的页面。少了后者,索引里可能只剩一个空壳。

爬虫第一次拿到的,往往不是用户看到的

大部分前端框架返回的初始 HTML 只有一个挂载点和一堆脚本标签,真正的文字要等接口数据回来再插入 DOM。搜索引擎的第一遍抓取看到的就是这份初始 HTML;能不能补上后面的内容,取决于它是否愿意为这个页面排队做一次渲染。

主流搜索引擎都有渲染能力,但渲染是有成本的:需要排队、需要执行脚本、需要重新请求接口和静态资源。所以渲染后的版本通常比原始 HTML 晚出现,短则几秒,长则几天。页面越多、脚本越重,这个延迟越明显。

渲染阶段最容易出问题的几种写法

  • 点击才加载的内容:标签页、折叠面板、“展开更多”里的正文,只有交互后才渲染,爬虫一般不会去点。
  • 依赖视口的懒加载:图片和文字要滚动到可见区域才请求,渲染时不一定滚动,结果就是缺图缺字。
  • 渲染所需的脚本被屏蔽:robots.txt 拦掉了 JS 或 CSS 文件,渲染直接失败,页面变成空白。
  • 接口校验来源或登录态:接口要求特定 Referer、Cookie 或 token,爬虫请求不到数据,页面自然没内容。
  • 内容随环境变化:按地理位置、UA、随机数渲染出不同结果,同一 URL 每次看到的都不一样,收录也就不稳定。

判断自己的页面有没有卡在渲染这一步

  1. 查看第一份 HTML:用 curl 或禁用 JS 的浏览器打开页面,看标题和正文是否还在。如果只剩一个空壳,说明内容全靠脚本生成。
  2. 对比渲染前后:搜索平台的“网址检查”一般会同时给出原始 HTML 和渲染后的 HTML,重点看渲染后有没有正文文字和内链。
  3. 检查资源可访问性:确认关键 JS、CSS、接口路径没有被 robots.txt 或防火墙拦截,返回码是 200 而不是 403。
  4. 确认接口能否无状态请求:用不带 Cookie、不带登录态的方式单独请求一次数据接口,看返回是否正常。
  5. 看收录结果的摘要与标题:如果索引里的摘要常常为空,或者抓到的只是页脚与导航文字,往往就是正文没被渲染出来。

几种务实的处理方式

最稳妥的是让关键内容出现在服务端返回的 HTML 里:标题、正文、主要内链、结构化数据都不依赖脚本。常见做法包括服务端渲染、静态生成、构建期预渲染,或者对爬虫和用户返回同一套预渲染结果。

如果短期改不了架构,可以先做几件小事:把首屏正文写成静态 HTML,把“展开更多”改成默认展开或分页可达,把懒加载改成首屏直接加载,给内容接口放开无状态访问。noscript 里的兜底内容可以加,但不能当作主要方案。

不要针对爬虫单独返回一份不同的内容。渲染成本高不是给两边看不同页面的理由,一旦差异超出合理范围,风险由站点承担。

什么时候可以不必太在意

如果站点的核心内容本来就是静态的,只是评论、推荐位、统计脚本用 JS 加载,那渲染问题的影响有限。真正需要紧张的是:正文、价格、库存、商品详情、文章主体这类决定页面价值的文字全在脚本里,同时站点规模又大。先把这类模板挑出来改,比全站推倒重来划算得多。

把这一层理顺之后,收录仍然受很多因素影响,但至少你排除了一个很常见、也很容易被忽略的原因。