網站收錄

蜘蛛先看到的是一張空壳:JS 渲染頁面對收錄的影响

不少站点把正文放在 JavaScript 里渲染,源碼里只剩一個空容器。蜘蛛第一轮抓到的就是這張空壳,能不能進入後續渲染、渲染是否成功,都存在不确定性。本文整理確認蜘蛛所见内容的自查方法、几個常见坑,以及從确定性最高的改動做起的取舍思路。

網站收錄

蜘蛛先看到的是一張空壳:JS 渲染頁面對收錄的影响

抓取和渲染是两步,第二步不一定發生

用前端框架搭建的站点,经常出現這種情况:浏览器里打開一切正常,查看網頁源代碼却只有一個空的容器元素和一堆脚本。搜尋引擎蜘蛛第一次抓取时拿到的就是這份源碼。多數主流搜尋引擎具备执行 JavaScript 的能力,但這個执行發生在抓取之後的渲染环节,属于第二步。第一步和第二步之間,存在時間差、资源限制和失敗的可能。

也就是说,能被抓取,不等于能被渲染;能被渲染,也不等于渲染结果和你看到的一致。把頁面当成“反正搜尋引擎會渲染”来處理,風險在于你無法確認第二步是否真的跑成功了。

先確認蜘蛛到底看到了什么

排查這類問题,第一步不是改代碼,而是確認現状。几個成本很低的办法:

  • 關閉浏览器 JavaScript,或者直接查看網頁源代碼,看首屏正文是否出現在 HTML 里。如果源碼里找不到正文文字,那蜘蛛第一轮看到的大概率也是没有正文的版本。
  • 用抓取工具或命令行拉取頁面,確認返回的 HTML 與源碼一致,排除本地缓存造成的错觉。
  • 在搜尋引擎站長平台里使用 URL 检查類工具,查看“已抓取的 HTML”與渲染後的截图。這一項能直接回答渲染有没有成功。
  • 翻服務器日誌,看蜘蛛是否請求了 JS 和 CSS 文件。如果日誌里只有 HTML 請求、完全没有静態资源請求,渲染基本不可能顺利完成。

這几步做完,問题通常能定位在發現、抓取還是渲染中的某一环,而不是笼统地归因為不被收錄。

几種典型的空壳情形

首屏内容全靠接口拉取

HTML 只负责挂载,标题、正文、價格、列表全部由接口返回後填充。接口一旦需要登入態、簽名、特定来源校驗,或者對高频請求做了限制,渲染就可能中断,頁面在索引侧呈現為一個没有實质内容的頁面。

關键的 JS 和 CSS 被 robots.txt 屏蔽

有的站点為了节省抓取资源,把脚本目錄、样式目錄甚至接口路径一起屏蔽掉。這個動作的本意通常是好的,但结果是渲染环节拿不到必要的资源,頁面结构無法成型。除非確認這些资源對頁面呈現没有影响,否則不建议屏蔽。

内容藏在交互之後

正文要点击“展開全文”、切換标簽頁、滚動到底部才加载。渲染工具不會主動去点按钮,這類内容在渲染结果里往往缺失。

渲染超时或报错

第三方脚本過多、接口响應慢、某個 JS 报错中断了後續执行,都會让渲染停在半路。這類問题在本地開發环境不容易复現,但在蜘蛛訪問的鏈路上很常见。

改動的優先級:從确定性最高的做起

  1. 把首屏關键内容放進 HTML。标题、主正文、核心參數這類决定頁面主题的内容,優先由服務端輸出。這一步收益最直接,也最不依赖外部條件。
  2. 保證渲染必需的资源可被抓取。核對 robots.txt,確認 JS、CSS 以及渲染时需要調用的接口没有被誤伤。
  3. 给關键内容加兜底。如果确實無法服務端渲染,至少用预渲染或静態化的方式,為内容頁生成一份带正文的 HTML 版本。
  4. 减少首屏對外部脚本的依赖。統計、客服、营销脚本尽量异步加载,不要阻塞主内容的渲染。
  5. 用無 JS 环境定期自查。把這一步放進上线前的检查清單,比事後從索引里倒推問题要省事。

不是所有頁面都值得投入渲染改造

服務端渲染、预渲染都會增加開發和维護成本,没有必要全站铺開。内容頁、商品頁、文章詳情頁這類承担索引任務的頁面,優先級最高;登入後的個人中心、後台管理、一次性的活動頁,通常不需要為索引做額外處理。取舍的标准很简單:這個頁面是否希望出現在搜尋结果里,且它的主要内容是否依赖客戶端执行。

渲染能力是搜尋引擎提供的一種便利,不是一份可以無限依赖的保證。頁面越少依赖 JavaScript 才能呈現,抓取與索引之間的不确定性就越小。

如果你在日誌里看到蜘蛛频繁訪問 HTML 却几乎不請求静態资源,或者 URL 检查工具里渲染後依然空白,可以先從空壳這個方向查起,而不是急着調整別的東西。