搜尋抓取

懒加载、無限滚動與折叠内容:蜘蛛實际能拿到多少 URL

图片懒加载、無限滚動列表、点击展開的折叠面板,都會把内容推迟到交互之後才出現。本文從抓取角度拆解這几類交互對 URL 發現的影响,给出禁用 JS 检查、保留分頁地址、保留兜底連結等可执行做法,帮助蜘蛛在首屏 HTML 里就能看到该看的連結。

搜尋抓取

懒加载、無限滚動與折叠内容:蜘蛛實际能拿到多少 URL

現在很多頁面的正文不是一次性吐出来的:图片滚到位置才加载,列表往下拉才續上,评论区点開才出現。對用戶来说這是体驗優化,對蜘蛛来说,如果這些交互没有對應的 HTML 兜底,就等于把一部分 URL 藏在了一條需要执行脚本才能走通的路径後面。抓取本身不判断内容好不好,它先要能看见連結。

懒加载:图片和連結的處理並不一样

图片懒加载通常把真實地址放在 data-src 一類自定义属性里,等進入视口再寫回 src。图片能不能被抓到,主要影响的是图片搜尋和頁面完整性,對 URL 發現的冲击相對有限。真正需要注意的是正文里的連結:如果列表項、卡片、相關阅讀都是脚本注入的 a 标簽,那么在未渲染的抓取下,頁面可能只是一個空容器。

判断方法很直接:把浏览器 JS 關掉,重新打開這個頁面,看看還剩多少文字、多少可点的連結。如果導航、列表、正文連結都還在,說明你的 HTML 结构本身是完整的;如果只剩一個加载動画,那就要考虑服務端渲染或预渲染這條路。

無限滚動:滚動條後面的 URL 有没有出口

無限滚動最常见的問题不是内容抓不到,而是後續批次的 URL 没有稳定入口。用戶滚一下,脚本請求下一批資料並插入 DOM,地址栏不變,也没有可点击的分頁連結。蜘蛛不會一直滚動,它更依赖頁面里已经存在的 href。

比較稳妥的做法是保留可訪問的分頁地址,比如 /list/?page=2 這样的形式,同时在首屏的“查看更多”上给出真實連結;用 history API 更新地址栏也可以,但那更多是给用戶和分享用的,不能替代 HTML 里的連結。

折叠、選項卡和彈窗

用 CSS 隐藏的内容,比如 display:none 的折叠面板,文字通常仍在 HTML 源碼里,抓取时一般能讀到。麻烦的是“点击後才請求”的那類:選項卡切換时用 Ajax 拉一段 HTML 插進来,彈窗里的詳情連結只在点击後生成。這部分内容對蜘蛛来说,取决于它是否渲染以及渲染的程度。

如果這些内容本身對應獨立 URL,尽量让每個面板有可直接訪問的地址,或者至少在初始 HTML 中保留關键連結和摘要文字。把重要連結只放在点击事件里,等于给 URL 發現加了一道不必要的關卡。

渲染、压缩與缓存各管一段

服務端渲染、预渲染和客戶端渲染的差別,最终体現在首屏 HTML 里有什么。压缩、缓存、CDN 解决的是传輸快慢,不會改變内容是否寫在源碼里——文件传得再快,連結不在里面也讀不到。反過来说,HTML 结构清晰、連結齐全的頁面,即使传輸层普通一些,抓取路径通常也不會有大問题。

可以照着做的几項检查

  • 禁用 JS 打開頁面,看導航、列表和正文連結是否仍然存在
  • 给無限滚動列表保留可訪問的分頁地址,而不是只留滚動加载
  • 懒加载图片保留 noscript 或真實 src 兜底,避免整块内容為空
  • 折叠面板、選項卡里的關键連結不要只存在于点击後的請求结果中
  • 翻抓取日誌,確認蜘蛛确實訪問到了這些分頁和面板地址
  • 對改造過的栏目頁,隔一段時間复查一次,別让新模板悄悄改回纯脚本加载
能被抓到的前提是先被看到。交互可以让体驗更好,但不要让它成為 URL 發現的唯一入口。

這類調整不需要一次性推翻現有前端方案,多數情况下只要在關键位置补一條静態連結、保留一個分頁入口,就能让抓取路径重新變得连贯。做完之後用日誌核對一遍實际訪問情况,比單看頁面效果更可靠。