搜尋抓取

折叠、懒加载與無限滚動:頁面深處的連結,蜘蛛怎么碰到

折叠面板、懒加载與無限滚動都會把連結推到頁面深處。對搜尋蜘蛛来说,判断标准不是用戶要滑几下,而是連結地址有没有出現在 HTML 里。本文区分几種常见實現方式,說明哪些寫法風險較小、哪些容易让入口消失,並给出分頁 URL、Sitemap 补充與自查的具体做法。

搜尋抓取

折叠、懒加载與無限滚動:頁面深處的連結,蜘蛛怎么碰到

頁面越做越長,内容越藏越深:折叠面板、点击加载、下滑自動追加。對用戶来说是体驗,對搜尋蜘蛛来说則是路径問题——它能不能拿到連結,能不能顺着連結繼續往下走。這篇聊的是頁面结构层面的可见性,不涉及收錄承诺,只讲怎么让入口更容易被碰到。

蜘蛛看到的是 HTML,不是你的屏幕

我們打開頁面看到的是一块块渲染好的区域,蜘蛛拿到的是服務器返回的 HTML,以及後續可能执行脚本得到的结果。所以判断某段内容會不會被發現,第一件事不是問“用戶要滑几下才看到”,而是問:這個連結地址有没有寫在 HTML 里。寫在 HTML 里、只是被 CSS 藏起来的,通常不构成障碍;靠脚本在執行时才拼出来的,就要多留個心眼。

折叠面板與選項卡:多數情况下連結還在

用 display:none、visibility:hidden、height:0 隐藏的区块,連結往往仍在源碼里,解析时一般能拿到地址。真正需要留意的是三点:

  • 内容是服務端輸出的,還是打開时才用接口拉回来的;
  • 折叠区块里的連結是否有效,別指向 404 或一串跳轉;
  • 全站導航、面包屑這類關键路径不要只放折叠菜單里,放到預設展開的位置更稳妥。

懒加载:两種實現,结果差別很大

懒加载最容易踩坑的地方,在于它有两種常见寫法:

  • 地址寫在属性里:把真實連結放在 data-src、data-href,加载时再搬到 src 或 href。地址在 HTML 中,風險較小。
  • 地址由脚本生成:HTML 里只有一個空容器,連結靠執行时拼接或請求接口获得。這種情况下能否被發現,取决于渲染环节,容易延迟甚至拿不到。

如果是列表、卡片這類承载大量内鏈的模块,建议至少让第一屏或前若干條直接輸出可点击的連結,後面的内容再通過加载补足。

無限滚動:翻頁 URL 才是關键

無限滚動把分頁變成了滚動事件,但它對抓取並不友好——蜘蛛不會真的往下滚。比較可行的做法是保留一套真實存在的分頁地址,让滚動只是它的前端表現形式:

  1. 每一批内容對應一個可訪問的 URL,例如 ?page=2 或 /list/2;
  2. 這些 URL 之間有可点击的上一頁、下一頁連結,能顺着走;
  3. 不要在滚動时才動態建立分頁連結,静態輸出更可靠;
  4. 數量大的列表,用 Sitemap 把分頁或詳情地址补充出来。

几個不太費力的稳妥做法

  • 關键路径尽量用服務端渲染或预渲染輸出,尤其是導航、分類、詳情入口;
  • 给懒加载内容留一個不依赖脚本的备用入口;
  • 分頁做成獨立 URL,並保持參數形式稳定;
  • 列表頁改版时,检查連結是不是被包進了脚本模板;
  • 把重要入口(首頁、分類、Sitemap)控制在可维護的范围内,別随版本随意改動。
一個简單的自查方式:用抓取工具抓一次,或直接查看源代碼,看連結是否還在 HTML 里。如果關掉脚本後就找不到入口,那就要考虑补一條静態路径。

別把几件事混在一起

最後提醒一点:能不能被發現、能不能被渲染、能不能被收錄,是三件事。本文只解决第一件——让連結出現在蜘蛛讀得到的位置。至于抓取之後怎么處理,需要结合日誌和狀態碼單獨观察。