蜘蛛池知识

蜘蛛池入口頁的 JS 渲染:連結藏在脚本里,蜘蛛可能讀不到

入口頁用前端框架搭时,連結常被藏在脚本里,蜘蛛只拿到空壳 HTML 就無從繼續。本文讲清蜘蛛看到的是原始 HTML 還是渲染後的頁面,列出三種最常见的連結隐藏方式,並给出服務端渲染、预渲染、静態兜底等可行做法與自检清單。

蜘蛛池知识

蜘蛛池入口頁的 JS 渲染:連結藏在脚本里,蜘蛛可能讀不到

蜘蛛池入口頁的核心任務很單一:让搜尋引擎蜘蛛顺着頁面里的連結繼續往下走。連結能不能被發現,取决于蜘蛛實际拿到的那份 HTML 里有没有它們。現在不少入口頁用前端框架搭建,連結要等浏览器跑完脚本才生成,蜘蛛如果只讀原始 HTML,等于看到一張空頁。

蜘蛛拿到的是原始 HTML,還是渲染後的頁面

主流搜尋引擎的渲染能力都在提升,但渲染是有成本的:它需要排队、需要額外资源,通常只在頁面被認為值得渲染时才执行。對蜘蛛池這類以量取胜的入口頁来说,指望每一個頁面都被完整渲染並不現實。更稳的思路是:把關键連結直接寫在服務端輸出的 HTML 里,让蜘蛛第一眼就能看到,而不是赌它愿不愿意多跑一步。

三種最常见的連結藏在脚本里

点击後才插入的連結

有些入口頁為了看起来干净,把正文折叠起来,用戶点一下才通過脚本插入連結。人看得见,蜘蛛看不见。這類设計在入口頁上几乎没有收益,反而把唯一有價值的輸出挡住了。

無限滚動與加载更多按钮

列表頁用滚動加载,或者放一個按钮异步取下一頁。蜘蛛一般不會去点按钮,也不會主動滚動到底部。结果就是只有第一屏的几條連結能被發現,後面的都被截断。

接口返回 JSON,前端再拼列表

頁面本身是空壳,資料由接口返回,連結在浏览器里才被拼成 a 标簽。這種结构對用戶友好,對蜘蛛不友好。要么把列表在服務端渲染好,要么在 HTML 里保留一份静態的連結列表。

让連結回到 HTML 里的几條路

  • 服務端渲染:把連結在服務端拼好再輸出,最直接,也最省事。
  • 预渲染或静態化:构建时生成好静態 HTML,内容更新频率不高时很划算。
  • 静態兜底頁:主頁面用脚本没問题,但額外给一份纯 HTML 的連結清單頁,作為补充入口。
  • HTML 里保留基础導航:即使脚本挂了、渲染失敗,也還有一批連結能被讀到。

不需要全部用上,選一條和現有技術栈匹配的即可。關键是保證服務端輸出的源碼里,能看到指向下一层的 a 标簽。

几個容易判断错的地方

  1. 用浏览器工具看頁面没問题,就以為蜘蛛也没問题。 開發者工具里看到的是渲染後的 DOM,不是蜘蛛最初拿到的响應体,要看的是查看網頁源代碼。
  2. 在 noscript 里塞連結。 它的作用有限,很多抓取流程並不會把它当成正常連結来源,当成唯一的兜底手段很危險。
  3. 連結用 JS 跳轉代替 a 标簽。 無论是 onclick 跳轉還是 window.location,對連結發現都没有帮助。
  4. 渲染服務開了就萬事大吉。 渲染失敗、超时、返回空壳的情况並不少见,缺少日誌时很难發現。

自检清單

  • 關掉 JS,或用抓取工具看原始响應体,頁面上還能看到几條連結?
  • 入口頁指向下一层的連結,是否都在源碼里,並且是标准的 a 标簽?
  • 加载更多里的内容,有没有一個静態的、可直達的列表頁版本?
  • 日誌里蜘蛛請求的是入口頁 HTML,還是大量請求接口地址?
判断标准可以很简單:把浏览器的 JS 關掉,如果入口頁几乎不剩什么連結,那蜘蛛大概率也只能看到這些。渲染能帮忙,但不该是唯一的指望。