站点运营

站点运营:CSS、JS 与图片资源,别让蜘蛛只看到页面骨架

不少站点为了省抓取量,把 JS、CSS 和图片目录一起写进 robots.txt,结果蜘蛛渲染页面时缺样式、缺内容。本文说明资源文件对抓取与渲染的影响,并给出 robots.txt、CDN、日志和懒加载的自查思路,帮你在省配额与保住渲染之间找到平衡。

站点运营

站点运营:CSS、JS 与图片资源,别让蜘蛛只看到页面骨架

不少站点在做抓取管理时,第一反应是“少让蜘蛛抓点东西”,于是顺手把 /js/、/css/、/static/ 这些目录写进 robots.txt。抓取量也许省下了一点,但页面在蜘蛛眼里可能只剩几行没有结构的文字。

蜘蛛看到的不只是 HTML

现在大多数页面靠 CSS 排版、靠 JS 输出正文和列表,图片和字体也分散在独立目录里。蜘蛛抓取 HTML 之后还要请求这些资源,才能还原出接近真实用户看到的页面。如果资源被挡在门外,渲染结果就会出现缺块:导航没了、正文空白、图片全是占位符,判断相关性时自然吃亏。

更麻烦的是,这种问题在浏览器里完全看不出来。你自己访问一切正常,只有蜘蛛那边的渲染结果与真实页面不一致。

几种常见的误伤写法

  • 整目录屏蔽:Disallow: /js/、/css/、/assets/,把渲染必需的文件一起挡掉。
  • 按后缀屏蔽:用 *.js、*.css 之类的通配规则,往往连带把页面级的脚本一起排除。
  • 屏蔽图片目录:为了省流量禁止抓取 /uploads/,图片搜索和图文页的展示都会受影响。
  • 规则写得过宽:为了挡住采集,把 UA 规则设得很宽,误伤正常蜘蛛的情况并不少见。

这些规则通常来自“抓取配额有限,能省就省”的想法。但资源文件体积小、请求快,真正吃掉配额的是参数组合和无限翻页,优先处理的应该是后者。

自查可以按这个顺序走

  1. 打开 robots.txt,逐条看被屏蔽的路径里有没有 /js/、/css/、/static/、图片目录。
  2. 翻一遍服务器日志,看蜘蛛对静态资源的请求是 200 还是 403、404。大量 403 通常意味着 CDN 或 WAF 在拦。
  3. 用抓取工具的“查看渲染后页面”功能,和浏览器里看到的做一次对照。
  4. 临时放开资源目录,观察一段时间日志再决定是否保留规则。

资源放在 CDN 或独立域名上要注意什么

静态资源常常放在 cdn.example.com 这类子域名下。robots.txt 是按域名生效的,主站的放行规则管不到子域名,需要在子域名根目录单独放一份,或者干脆不做屏蔽。另外,防盗链、Referer 校验、短时间内的频率限制,都可能让蜘蛛拿到 403,这些策略上线前最好确认一下对爬虫的影响。

图片与懒加载的坑

出于性能考虑,很多站点把图片改成懒加载:先放一个空的 img,等滚动到可视区域再用 JS 填真实地址。这种做法对用户友好,但如果页面上没有任何可直接读取的图片地址,图片抓取就会落空。常见的补救方式是把首屏图片写成正常的 img 标签,其余图片同时在 HTML 中保留地址,或者补一个 noscript 兜底。

省抓取配额要从参数页、重复列表、无限翻页入手,而不是从渲染所需的资源文件入手。资源被屏蔽,省下的是小头,损失的是蜘蛛对整个页面的理解。

上线前可以过一遍的清单

  • robots.txt 里没有屏蔽 /js/、/css/、/assets/、/static/ 等资源目录。
  • CDN 与子域名的 robots.txt 已单独确认。
  • 日志中蜘蛛请求静态资源以 200 为主,403、404 占比可接受。
  • 抓取工具的渲染结果与浏览器基本一致。
  • 关键图片有真实可读的 img 地址,不只依赖 JS 注入。

这些检查门槛不高,但能保证蜘蛛和用户看到的是同一个页面。对站点运营来说,这比纠结多抓几个参数页更值得先做。