蜘蛛池知识

蜘蛛池入口頁的 JavaScript 渲染:抓取端到底看见了什么

入口頁用前端框架渲染时,抓取端拿到的初始 HTML 可能只是一個空壳。本文說明為什么會出現两份内容、常见的渲染坑、几個低成本的自查办法,以及哪些部分應该保持静態,帮助你判断入口頁是否需要服務端渲染或预渲染。

蜘蛛池知识

蜘蛛池入口頁的 JavaScript 渲染:抓取端到底看见了什么

入口頁做得好不好看,和蜘蛛能不能讀懂,是两件事。很多站点用前端框架搭入口頁,自己在浏览器里看到内容齐全、連結可点,但抓取端拿到的初始 HTML 可能只有一個空壳。蜘蛛池的入口頁承担的是“被發現”這件事,如果真正有用的連結只存在于渲染之後,效果就會明顯打折扣。

為什么同一個頁面會有两份内容

搜尋引擎抓取大致分两步:先請求 HTML,拿到原始响應;之後视情况决定是否执行頁面里的 JavaScript,再得到一份渲染後的 DOM。渲染要消耗资源,需要排队,也不是每個 URL 都會做。對于入口頁這種以連結發現為主要目的的资源,把關键内容押在第二步上,本身就是風險。

常见的几種渲染坑

  • 連結由 JavaScript 動態插入,初始 HTML 里根本没有 a 标簽;
  • 正文通過接口异步拉取,初始 HTML 只有一個空容器;
  • 前端路由用 hash,或者需要点击才生成真實 URL;
  • 關键跳轉绑在按钮上,連結地址只寫在事件里;
  • 脚本报错或第三方接口超时,頁面直接停在半成品狀態;
  • robots.txt 顺手屏蔽了 JS 和 CSS 文件,渲染自然做不出来。

几個低成本的自查動作

  1. 用 curl 或抓取工具的文本视图看初始响應,確認里面有没有連結和正文;
  2. 在浏览器里關掉 JavaScript 打開入口頁,看到的就是最保守的版本;
  3. 看服務器日誌里蜘蛛請求的返回字节數,明顯偏小的多半是空壳;
  4. 用搜尋平台的 URL 检查類工具,對比渲染前後 DOM 里 a 标簽的數量變化;
  5. 對比渲染前後的頁面文本長度,差距過大就要警惕。

哪些内容建议保持静態

入口頁不需要复杂交互,把下面這些直接寫進初始 HTML 就够了:

  • 通向下一层的核心連結和分頁入口;
  • 頁面内的導航與内鏈;
  • 說明性文字、标题、简單摘要;
  • 结构化資料标记。

而統計代碼、装饰性模块、需要用戶触發才有意义的交互,放在脚本里問题不大。判断标准很简單:這個元素對發現 URL 有没有帮助,有帮助就静態化。

要不要上服務端渲染或预渲染

如果入口頁本来就靠前端框架生成,可以考虑服務端渲染、预渲染或纯静態輸出。三者各有代價:服務端渲染增加服務器压力和维護复杂度,预渲染多一道构建流程,纯静態最省心但對動態内容不友好。入口頁通常内容變動不频繁,纯静態或者预渲染往往更划算,不必為了技術时髦把鏈路做复杂。

和整條抓取鏈路的配合

  • 控制 HTML 体积,別让一個入口頁拖到几百 KB;
  • 减少阻塞渲染的第三方脚本,尤其是广告和統計;
  • 检查 robots.txt 有没有誤伤 JS、CSS 這類静態资源;
  • 给渲染失敗留兜底,比如 noscript 里的基础連結;
  • 改動後观察日誌里蜘蛛請求的變化,別只看自己浏览器。
渲染不是不能用,而是要知道蜘蛛到底拿到了什么。入口頁的首要任務是让 URL 被發現,把這件事交给最稳的那一层去做。

说到底,入口頁不需要像产品頁那样追求体驗,稳定、可解析、連結清楚,比炫技重要得多。