站点运营

站点运营:頁面渲染方式自查,別让正文只藏在 JavaScript 里

用浏览器打開一切正常,查看源代碼却找不到正文,這類頁面在抓取阶段往往只交出一個空壳。本文给出一套不改代碼也能做的渲染方式自查方法,帮助你判断正文與連結是否出現在首次返回的 HTML 中,以及该從哪一步開始調整。

站点运营

站点运营:頁面渲染方式自查,別让正文只藏在 JavaScript 里

有些頁面用浏览器打開一切正常,右键查看源代碼却只看到一段空容器。對訪客来说没有区別,對抓取来说区別很大:首次返回的 HTML 里既没有正文,也没有連結,後面能不能补上,取决于對方愿不愿意為一個頁面执行脚本。

渲染方式為什么會影响抓取

搜尋引擎确實具备执行 JavaScript 的能力,但這件事有几個前提:脚本要能顺利加载、渲染有獨立队列、渲染结果未必與真實浏览器完全一致。更重要的是渲染是有額度的,站点規模越大,越不可能每個頁面都排队等着渲染完成。

如果你的内容發現也依赖頁面里的連結,比如栏目頁、列表頁、聚合頁,那么連結没有出現在首次 HTML 中,就會直接影响下一层 URL 的發現效率。入口頁的正文如果也是空的,情况會更麻烦。

三步判断頁面到底交出了什么

  1. 查看源代碼,而不是审查元素。在頁面上右键選“查看網頁源代碼”,搜尋頁面里一句正文文字。搜不到,說明正文不在首次返回的 HTML 里;如果连導航連結也搜不到,問题更明顯。
  2. 临时關閉 JavaScript。在浏览器設定里禁用脚本後刷新頁面,看還剩多少内容。這不是模拟搜尋引擎,只是快速判断内容的兜底能力。
  3. 用命令行抓一次。命令行工具拿到的就是原始响應,不带任何渲染。對照一下标题、正文首段、主要連結是否齐全。

另外可以借助搜尋平台提供的網址检查工具,看“已抓取的 HTML”與實际頁面的差別。如果抓取版本里正文是空的,說明問题真實存在,而不是工具誤差。

常见的几種渲染方式

  • 服務端渲染(SSR):服務器把 HTML 拼好再返回,正文和連結都在里面,對抓取最友好,代價是服務器压力相對高一些。
  • 静態生成(SSG):构建时生成 HTML,适合更新不频繁的栏目頁、帮助文档、案例頁。
  • 客戶端渲染(CSR):首次返回接近空壳,正文和連結靠脚本补。内容型頁面尽量別用這種方式,後台、個人中心之類不需要被抓取的頁面則影响不大。
  • 预渲染與動態渲染:给抓取方返回渲染好的版本、给訪客返回正常版本。属于過渡方案,規則要维護好,避免两套内容不一致。

自查清單

  • 列表頁、栏目頁里的文章連結,是否出現在首次 HTML 中。
  • 正文首段、小标题是否能在源代碼里搜到。
  • 分頁與“下一頁”是真實連結,還是脚本点击事件。
  • 面包屑、站点導航是否依赖脚本生成。
  • 頁面标题、描述是否由脚本寫入,這類内容通常滞後。
  • 首屏图片是否有真實的图片地址,而不是等脚本唤醒。
  • 關閉 JavaScript 後,頁面是否至少保留可讀的正文和可点的連結。
  • 同一批模板頁面抽查两三個,確認不是個別問题。

從哪一步開始改

不必一上来就重寫前端。可以先按影响面排序:

  1. 先處理列表頁和栏目頁的連結輸出,让下一层 URL 能被正常發現。
  2. 再處理内容頁的正文,至少保證首屏内容在服務端輸出。
  3. 标题、描述、面包屑這類结构化信息,優先放在服務端模板里。
  4. 确因架构原因無法改造的,再考虑预渲染方案,並定期對比两套版本是否一致。

改動之後不要只看浏览器。用同样的三步再驗證一遍:源代碼、關閉脚本、命令行抓取,確認正文和連結真的回到了 HTML 里。這個過程不需要一次做完,先把最影响發現的頁面處理掉,比全站铺開更實际。

渲染方式的調整通常不會立刻带来可见變化,它的價值在于把内容放回可被發現的位置。先把入口修好,再谈其他優化。