網站收錄

蜘蛛拿到的初始 HTML:JS 渲染頁面在收錄上的常见坑

蜘蛛抓取頁面时,第一轮通常只拿到服務器返回的初始 HTML,JS 渲染出来的内容要等後續處理。正文、内鏈、列表如果都靠 JS 生成,蜘蛛第一眼看到的可能只是空壳。本文说清抓取與渲染的区別、常见的踩坑寫法、几種可選的處理思路,以及用源碼、渲染對比和日誌自查的顺序。

網站收錄

蜘蛛拿到的初始 HTML:JS 渲染頁面在收錄上的常见坑

不少站点把内容放在前端渲染,用戶看到的是完整頁面,但搜尋引擎蜘蛛第一次抓取时拿到的,可能只是一份空壳 HTML。理解這一点,比反复纠结「為什么還不收錄」更有用。

抓取和渲染是两個阶段

搜尋引擎處理一個 URL,大致會经過發現 URL、抓取 HTML、解析内容、渲染頁面、判断是否值得進索引這几步。第一轮抓取通常只拿到服務器直接返回的 HTML,JavaScript 执行往往發生在後續,而且有額度和延迟。如果首屏文字、站内連結、图片地址都要等 JS 跑完才出現,蜘蛛在第一轮就可能認為這個頁面没什么可讀内容。

哪些寫法容易掉進盲区

  • 正文由前端請求接口後拼進 DOM,初始 HTML 里只有「加载中」的占位符;
  • 站内連結寫在点击事件里,不用 a 标簽的 href 属性;
  • 列表頁依赖滚動加载,首屏之外的内容不在初始 HTML 中;
  • 用單頁應用路由,多個「頁面」其實共享同一份极简 HTML。

這些寫法對用戶体驗不一定有错,但會让蜘蛛第一眼看到的頁面和你看到的不是同一個東西。

常见的三種處理思路

一種是服務端渲染或静態生成,让初始 HTML 就带正文和連結,改動成本取决于技術栈。一種是预渲染或動態渲染,對蜘蛛返回渲染好的版本,要注意與用戶看到的版本保持一致,避免被判断為内容不一致。還有一種最省事:把關键正文、标题、主要内鏈直接寫進初始 HTML,交互功能再用 JS 增强。三種方式没有高低,選团队能長期维護的那種。

自查可以按這個顺序

  1. 浏览器禁用 JavaScript,或看頁面的「查看源代碼」,確認首屏是否還有正文和連結;
  2. 用搜尋平台提供的 URL 检查類工具,對比原始 HTML 與渲染後的结果;
  3. 翻訪問日誌,看蜘蛛抓取是否频繁停在只有框架的 URL 上;
  4. 抽查几個核心頁面,核對渲染前後的标题、正文、内鏈是否一致。

几個容易誤判的地方

渲染後能看到内容,不等于搜尋引擎一定渲染了,更不等于一定收錄。抓取成功、渲染成功、進入索引是三件事。

另外,動態渲染通常只對部分爬虫生效,長期依赖它需要持續维護识別規則;頁面渲染慢也不等于不收錄,但會拉長從抓取到被判断内容的時間。還有人把索引里的舊快照当成渲染問题,其實那更可能是抓取更新节奏的問题,两件事要分開排查。

把重点放在初始 HTML

對大多數做内容的站点,最稳的做法是让核心信息在初始 HTML 里就完整可讀:标题、正文主体、主要導航和分頁連結。JS 用来做增强,而不是承载唯一内容。這样做不會直接带来收錄,但能减少蜘蛛讀不懂頁面的概率,让後續判断建立在真實内容上。真正需要長期盯的,是每次改版後首屏 HTML 有没有變得比上一版更空。