網站收錄

内容靠 JS 渲染出来:蜘蛛抓到的頁面長什么样

頁面正文靠 JavaScript 渲染时,浏览器里看着一切正常,抓取阶段拿到的却可能只是一具空壳。本文先把抓取和渲染這两步拆開,再说清楚怎么確認蜘蛛實际看到了什么,最後整理服務端渲染、連結寫法、獨立分頁 URL 等几種可落地的處理思路。

網站收錄

内容靠 JS 渲染出来:蜘蛛抓到的頁面長什么样

先分清抓取和渲染是两件事

搜尋引擎處理一個頁面,大致會经歷两個阶段:抓取时先拿到服務器返回的 HTML 源碼,渲染时再执行頁面上的 JavaScript,把内容补全成用戶看到的样子。這两步不是同时完成的,中間可能隔一段時間,也可能有些頁面抓取之後並没有走到完整的渲染流程。如果正文完全依赖 JS 生成,抓取阶段拿到的就可能只是一個空壳。

這也是很多人遇到的情况:浏览器里打開頁面一切正常,但查看源代碼,或者在工具里看“蜘蛛视角”的頁面,正文位置是空的。

哪些寫法容易出問题

  • 正文由前端框架在客戶端請求接口後渲染,HTML 里只有一個挂载节点;
  • 列表、推荐位、相關阅讀都靠脚本插入,連結不是可点击的 a 标簽;
  • 分頁用点击事件加载,第二頁没有獨立 URL;
  • 關键信息只寫在 JSON 接口里,頁面本身没有任何輸出。

這些問题不一定马上表現為收錄異常,但會让頁面在抓取阶段顯得内容稀薄,進而影响後續的判断。

怎么確認蜘蛛實际拿到了什么

  1. 直接查看頁面源代碼(不是開發者工具里的元素面板),看正文是否出現在 HTML 里;
  2. 關掉 JavaScript 再打開頁面,观察還剩下多少内容;
  3. 用抓取測試類工具請求该 URL,對比返回的原始 HTML 與渲染後的内容;
  4. 翻蜘蛛日誌,看是否有渲染相關资源的請求,比如脚本文件、接口調用。如果日誌里只有 HTML 請求,後面没有跟着脚本請求,這個頁面很可能只走到了抓取這一步。
日誌里出現脚本請求,只說明渲染有可能發生,並不等于内容一定被完整讀到,還需要结合源碼一起看。

能做的几件事

1. 让正文出現在首屏 HTML 里

最直接的做法是服務端渲染或预渲染,让服務器返回的 HTML 里就带着标题、正文和主要内鏈。不需要一上来就全站改造,優先處理那些你希望被收錄的内容頁即可。

2. 内鏈用真實的 a 标簽

用 onclick 或前端路由代替 a href,用戶点得動,但連結關系不會自然体現在 HTML 里。列表頁、面包屑、上下篇導航這些位置,尽量輸出标准連結。

3. 分頁和篩選给獨立 URL

如果第二頁只能靠点击加载,發現路径就断掉了。哪怕内容仍然用脚本加载,URL 本身也應该可以被單獨請求。

4. 別把所有内容都留在接口里

纯接口返回的資料,如果頁面里没有任何對應輸出,抓取阶段基本看不到。可以把關键字段同时寫進頁面。

按優先級處理,不必一步到位

全站改成服務端渲染成本不低,更實际的做法是先看哪些頁面本身值得收錄,把资源集中在這些頁面上。詳情頁、栏目頁通常優先,一些交互型頁面即使渲染不完整,影响也有限。

另外,渲染慢、脚本阻塞嚴重,也會拖長單個頁面的處理時間。在解决渲染問题的同时顺手看一下加载性能,往往能一起改善。