网站收录

内容靠前端渲染的页面:原始 HTML、渲染结果与索引状态的核对顺序

页面在浏览器里显示正常,索引里却只有空壳,常见原因是正文只在前端渲染后出现。本文按顺序说明如何对照原始 HTML、渲染结果与索引状态,判断内容缺在哪一层,再决定是改服务端输出、检查渲染链路,还是调整入口与内链。

网站收录

内容靠前端渲染的页面:原始 HTML、渲染结果与索引状态的核对顺序

有些页面在浏览器里打开一切正常,标题、正文、列表都在,但在收录里,这个地址要么不出现,要么抓到的只是一层空壳:导航、页脚,再加一句“加载中”。这类问题往往不是内容质量不够,而是内容压根没在抓取环节暴露出来。排查时,顺序比工具重要。

先分清:人看到的版本和抓取看到的版本

在动手改任何代码之前,先确认问题出在哪一层。同一个 URL 通常存在三种“样子”:浏览器渲染完成后的 DOM、服务器直接返回的原始 HTML、以及索引侧实际抓取并处理后的结果。三者不一致时,才谈得上修复。

常用的核对方式有三种:查看网页源代码(不是开发者工具里的 Elements 面板,那个显示的是渲染后的结果);用命令行请求一次,看返回体里有没有正文文字;以及在开发者工具里禁用 JavaScript 后刷新页面。三者对照,很快就能判断正文是存在于原始 HTML 中,还是必须靠脚本执行才出现。

原始 HTML 里没有正文,要分清是哪一种“没有”

  • 纯空壳:HTML 里只有一个根容器和一堆脚本引用,正文完全由前端请求接口后拼出来。这是最典型的情况。
  • 半渲染:模板层已经输出了标题、面包屑、相关推荐,但主体内容仍由脚本填充。这时索引里可能保留一个“有框架没内容”的页面。
  • 内容在但被隐藏:文字确实写在 HTML 里,只是被折叠在选项卡、手风琴或懒加载容器中,需要交互才可见。这类内容能否被使用,取决于它是被样式隐藏,还是压根没输出。

渲染结果要核对的不只是文字

确认服务器返回的内容之后,还要看渲染这一层是否稳定。渲染不是万能补丁,它有自己的失败方式:

  • 接口需要登录态或有频率限制,抓取时请求被拒绝,渲染结果为空;
  • 渲染依赖地理位置、时区或本地存储,不同环境得到不同内容;
  • 渲染超时,脚本没跑完就被放弃,页面上只剩骨架屏;
  • 渲染后的正文与原始 HTML 差异过大,比如多了原始 HTML 里没有的推荐模块,容易让人误判哪一份才是“页面内容”。

处理的顺序:先给正文,再谈美化

不是所有站点都要改造成服务端渲染,但可以按下面的顺序收敛:

  1. 先把核心正文、主标题、关键信息以服务端输出的形式放进 HTML,哪怕样式朴素。
  2. 再检查首屏之外的内容是否必要。分页、折叠内容若对用户有价值,尽量保留在 HTML 中。
  3. 如果确实无法服务端输出,确认渲染链路对匿名访问、无 Cookie 的请求是稳定的。
  4. 最后才是补充结构化数据、调整 URL 与内链,让这些已经可见的内容有清晰入口。

几个容易忽略的细节

判断内容能不能被抓到,看的不是页面在你自己浏览器里的样子,而是匿名、无缓存、不登录的一次请求返回了什么。
  • 同一套前端代码,列表页可能返回了正文数据,详情页却是空白,要逐个模板核对,不要用一个页面的结果推断全站。
  • 接口返回的内容如果同时被多个地址使用,可能带来重复内容问题,正文入口和 URL 规范要一起考虑。
  • 改动上线后,重新抓取不等于立即生效,索引里的旧版本会按自己的节奏更新,观察期要留够。
  • 不要依赖 robots 或 noindex 去“解决”空壳页面,先解决内容可见性,再决定哪些地址本就不该被收录。

这类问题很少是搜索引擎“没兴趣”,更多是页面对匿名抓取请求没有交出内容。把原始 HTML、渲染结果、索引状态三份对照着看,先确认缺的是哪一层,再决定改前端、改接口还是改入口,改动范围会小很多。