網站收錄

頁面内容靠 JavaScript 渲染:蜘蛛關掉脚本後能看到什么

浏览器里顯示正常的頁面,蜘蛛拿到原始 HTML 时可能只有一個空容器。本文說明原始 HTML 與渲染後 DOM 的区別,列出容易让正文、内鏈變得不可见的几種寫法,並给出用禁用脚本、查看源碼、核對日誌来自查的顺序和處理優先級。

網站收錄

頁面内容靠 JavaScript 渲染:蜘蛛關掉脚本後能看到什么

很多人遇到過這種情况:浏览器里打開頁面一切正常,标题、正文、图片都在,可是在搜尋结果里搜自己的文章,要么搜不到,要么索引里的摘要是一段没有意义的占位文字。原因往往不在内容本身,而在于這段内容是浏览器执行脚本之後才出現的,蜘蛛第一次拿到的文件里並没有這些文字。

蜘蛛看到的其實是两個版本

抓取和收錄是两個阶段。蜘蛛来取頁面时,先拿到服務器直接返回的原始 HTML;是否再执行頁面里的脚本、等頁面渲染完成,属于後續的渲染环节,有單獨的排队和资源限制。所以同一個地址可能有两個样子:

  • 原始 HTML:服務器一次性返回的内容,蜘蛛一進门就能讀到。
  • 渲染後的頁面结构:脚本跑完、資料拉回来之後拼出来的内容,需要額外一步。

如果正文、内鏈、價格、文章列表都只存在于第二個版本里,那么能不能被收錄,就取决于渲染這一步有没有顺利發生。

哪几種寫法最容易让内容變得不可见

  • 正文由前端框架在客戶端請求接口後渲染,原始 HTML 里只有一個空的容器标簽。
  • 重要内鏈寫在脚本生成的菜單里,返回的 HTML 中並不存在這些連結。
  • 大量使用懒加载,图片和列表項要滚動或触發事件才插入。
  • 渲染时依赖額外的接口請求,而這些接口恰好被 robots.txt 挡住,或者需要登入態。
  • 渲染阶段超时,脚本還没跑完,抓取窗口就結束了。

這些寫法本身不算错誤,浏览器体驗通常也没問题,但對能不能被稳定索引来说,多了一层不确定性。

怎么自查:把脚本關掉看一眼

  1. 用浏览器開發者工具禁用 JavaScript,刷新頁面,看正文、标题、主要内鏈還剩多少。
  2. 查看網頁源代碼(不是审查元素),確認關键文字是否出現在服務器返回的 HTML 里。
  3. 用搜尋资源平台提供的抓取測試工具,對比原始返回和渲染後内容的差异。
  4. 翻服務器日誌,看渲染相關的請求是否成功、是否有大量超时。
  5. 在搜尋框里用 site:你的域名 加上文章标题里的關鍵詞,观察索引里的摘要取自哪一段文字。
判断标准可以简單一点:關掉脚本之後頁面還剩下什么,那就是蜘蛛最省力能拿到的部分。這部分至少要能说清這是什么頁面。

處理顺序的建议

不必把所有頁面都改成纯静態,先分優先級:

  • 内容頁、分類頁這類靠自然搜尋带流量的地址,優先保證核心正文和主要内鏈在原始 HTML 中可见。
  • 交互密集、登入後才使用的功能頁,不必强求。
  • 如果短期内改不動架构,至少让标题、描述、主要正文段落做到服務端渲染或预渲染。
  • 渲染依赖的接口不要屏蔽蜘蛛,同时留意接口的响應速度。

還有两点容易忽略。第一,渲染成功不等于會被收錄,索引阶段還要看頁面质量和重复情况,渲染只是把内容交出去這一步。第二,如果同一份内容既有能直接讀到的舊地址,又有只有渲染後才顯示的地址,记得把地址收敛到其中一個,避免两個版本互相分散。

做站的人容易把注意力放在提交和抓取上,但真正影响收錄的是蜘蛛在你的頁面上讀到了什么。每隔一段時間用關脚本的方式抽查几類模板,往往比反复提交更有效。