網站收錄

依赖 JavaScript 渲染的頁面:抓取和收錄时會遇到什么

不少頁面在浏览器里内容完整,搜尋引擎拿到的初始 HTML 里却可能只有空壳。這篇文章梳理客戶端渲染影响抓取、URL 發現和收錄的常见情形,並给出 meta 声明、内鏈、正文和懒加载的處理顺序,帮助你把關键信息放回服務端可讀的位置。

網站收錄

依赖 JavaScript 渲染的頁面:抓取和收錄时會遇到什么

很多人遇到過這種情况:在浏览器里打開頁面,正文、图片、連結都正常顯示,但用查看源代碼或者 curl 拉一遍,返回的 HTML 里几乎什么都没有,只有一個空容器和一段脚本。而搜尋引擎對抓取和收錄的判断,往往就是從這份初始 HTML 開始的。

抓取到的第一份 HTML 决定了什么

爬虫訪問一個 URL 时,第一步拿到的是服務器直接返回的 HTML。如果标题、正文、内鏈都不在這份 HTML 里,就需要依赖後續的渲染环节来补全。渲染要額外消耗资源、時間和計算,並不是每個 URL 都會在第一時間被完整渲染,尤其在新站、權重不高、頁面數量又多的站点上更明顯。

還要分清抓取和收錄:抓取成功只說明拿到了内容,能不能進索引,還要看渲染之後的頁面质量、重复程度以及整体的索引策略。所以日誌里抓取變多,並不等于頁面就一定被收錄。

常见的三種情况

服務端渲染或预渲染

服務器返回的 HTML 本身就包含正文和連結,渲染环节只做补充。這類頁面的 URL 發現和收錄通常最稳定,也是排查其他問题时最省心的基准。

纯客戶端渲染

HTML 接近空壳,正文靠接口返回資料後拼出来。風險主要有三点:抓取时可能只看到一個容器;渲染失敗或超时,索引里留下的就是空頁面;由脚本生成的連結不一定被当作可發現路径。

混合渲染

一部分内容寫在 HTML 里,另一部分靠 JS 补。常见的問题是關键信息,比如價格、更新時間、正文後半段,刚好落在 JS 那部分,收錄表現就會时好时坏。

容易被忽略的几個点

  • 由 JS 生成的站内連結:如果栏目頁、列表頁的連結都是脚本渲染出来的,爬虫可能顺着 HTML 找不到下一层 URL,URL 發現會卡在中間。
  • 寫在 JS 里的 meta robots 和 canonical:這两類声明最好由服務端輸出,靠脚本寫入时,可能在渲染之前就已经被判断過了。
  • 懒加载:图片和長正文异步加载本身没問题,但如果首屏之外的内容要滚動很久才出現,抓取时可能只拿到前面一部分。
  • 資料接口被單獨抓取:日誌里看到接口請求變多,只說明渲染過程在發生,它本身不是頁面被收錄的信号。

自查方法

  1. 用 curl 或查看源代碼,確認初始 HTML 里有没有正文和主要連結。
  2. 在浏览器里禁用 JavaScript 再打開頁面,看看還剩多少可讀内容。
  3. 用平台提供的渲染查看工具或抓取測試,對比渲染前後的差异。
  4. 检查正文里的重要内鏈是不是真實的 a 标簽,而不是 onclick 跳轉。
  5. 對照抓取日誌,確認爬虫訪問的是頁面 URL,還是只有接口地址。

處理顺序建议

  1. 先把 title、description、canonical、robots 這些声明放回服務端輸出。
  2. 把正文主体和主要内鏈改成服務端渲染或预渲染,這是收益最直接的一步。
  3. 列表頁、栏目頁的分頁入口尽量用真實連結,避免纯脚本跳轉。
  4. 懒加载设一個合理的触發阈值,首屏内容不要依赖額外交互才出現。
  5. 關键入口 URL 用 sitemap 和站内導航双重保障,减少對單一發現路径的依赖。
渲染方式的調整只能提高内容被正确抓取和理解的概率。至于多久收錄、收錄多少,還取决于頁面本身的價值和站点整体情况,没有哪種改法能保證结果。

如果你的頁面在浏览器里一切正常,但初始 HTML 是空的,先別急着找各種收錄捷径。把正文、标题和連結放回服務端就能讀到的位置,通常比任何提交手段都更有用。