搜尋抓取

懒加载與折叠内容:蜘蛛打開頁面时到底看到了什么

頁面在浏览器里看着完整,蜘蛛拿到的却可能是缺了几块的 HTML。本文讲清懒加载、加载更多、折叠区與标簽頁為什么會让内容變得不可见,並给出把關键内容和分頁連結留在原始 HTML 里的具体做法,让抓取路径不再断在列表第一頁。

搜尋抓取

懒加载與折叠内容:蜘蛛打開頁面时到底看到了什么

很多站点在浏览器里看着完整,蜘蛛抓到的却是一份缺了几块的 HTML。原因通常不是蜘蛛能力差,而是頁面把關键内容交给了脚本,或者藏在需要滚動、点击之後才出現的位置。理解蜘蛛打開頁面那一刻看到的東西,能省掉很多無效排查。

蜘蛛先拿到的是原始 HTML,不是渲染後的画面

多數蜘蛛會先取一次原始 HTML,再决定是否投入资源去渲染。渲染要消耗算力,通常有時間预算和排队,頁面越重、依赖越多,被跳過的概率就越高。所以判断一個連結能不能被走到、一段文字能不能被讀到,最先要看的不是浏览器里的效果,而是查看網頁源代碼里有没有。

方法很简單:用「查看網頁源代碼」而不是「检查元素」,在里面搜尋關鍵詞。搜得到,說明它在原始 HTML 里;搜不到,它大概率只存在于渲染後的 DOM 中。

三類最常见的「蜘蛛看不见」

图片與延迟加载的模块

常见的懒加载寫法把真實地址放在 data-src 一類属性里,src 留空或放占位图。图片本身對抓取影响有限,但如果整個模块的内容也是滚動到视口才通過接口拉取,蜘蛛拿到的就是一個空容器。

滚動到底才出現的列表

「加载更多」如果只是按钮加接口,蜘蛛顺着走一遍往往只拿到第一屏。列表頁被截断之後,後面的條目就失去了唯一的内鏈入口,URL 發現也随之断掉。可用的做法是:保留一组可爬的分頁連結,哪怕样式上弱化;或者让後續頁面拥有獨立的静態地址。

折叠区、标簽頁與彈窗里的内容

用 CSS 或 display:none 藏起来的内容,多數时候仍會出現在 HTML 里,可以被讀到;但如果是点击後才發請求、再把结果插進 DOM,那部分通常讀不到。标簽頁同理,非激活标簽若靠接口填充,對蜘蛛来说就只剩一個空壳。

让關键内容留在原始 HTML 里

  • 正文和主導航尽量服務端渲染,或在首次返回时就寫進 HTML。
  • 重要連結用标准 a 标簽寫出 href,不要只绑 onclick。
  • 分頁、上一頁/下一頁保留可爬地址,不用纯按钮替代。
  • 懒加载图片保留 src,或提供 noscript 回退。
  • 需要渲染的頁面,別把唯一入口也放在需要渲染的脚本里。

和抓取路径、内鏈结构放在一起看

這件事最终影响的是路径。一個 URL 如果只存在于「点击加载更多」之後,它就没有内鏈指向,蜘蛛只能靠外鏈或 Sitemap 偶遇。相反,把列表分頁寫成静態地址,等于给每一頁都開了一條稳定的路,抓取路径清楚了,回訪也更容易覆盖到更深一层的頁面。

日常检查可以按這個顺序走:先用查看源代碼確認關键内容在不在;再看列表頁的分頁連結是不是真實地址;然後翻服務器日誌,看蜘蛛是不是只抓了列表第一頁;最後核對 Sitemap 里的 URL 是否和頁面上可点的連結對得上。對不上的那部分,往往就是需要补連結的地方。

服務器压力大时也不一定要靠渲染来換体驗。很多时候把首屏内容做轻、把入口寫成連結,反而让蜘蛛和用戶都更快到達目标頁。