网站收录

正文靠 JS 渲染:抓取、渲染与收录之间可能差在哪一步

页面在浏览器里显示正常,搜索结果中却只有标题或内容残缺,常见原因是正文不在服务器返回的初始 HTML 里,而依赖 JavaScript 渲染。本文从抓取、渲染与索引的区别讲起,给出初始 HTML 的自查方式、容易让正文看不见的常见写法,以及可执行的处理顺序。

网站收录

正文靠 JS 渲染:抓取、渲染与收录之间可能差在哪一步

有些页面用浏览器打开一切正常,但在搜索结果里标题、摘要、正文都不完整,甚至迟迟不被收录。排查时先别急着改 robots 或 canonical,一个常见原因是:正文并不在服务器返回的初始 HTML 里,而是靠 JavaScript 在浏览器中渲染出来的。

抓取、渲染、索引不是同一件事

搜索引擎拿到一个 URL 后,大致会经历获取初始 HTML、进入渲染队列、执行 JavaScript 得到完整 DOM、再从渲染结果中提取内容这几个环节。初始 HTML 和渲染后的 DOM 是两个不同的视图:前者决定第一眼能看到什么,后者才接近用户看到的样子。

问题在于渲染是有成本的。渲染队列可能被延后,也可能因为页面太重、脚本报错、接口被拦截而拿不到内容。这时抓取记录里显示“已抓取”,索引里却可能只有标题和少量文字,甚至被判定为内容不足。

先确认初始 HTML 里到底有什么

这一步的目标很朴素:不看浏览器渲染后的样子,只看服务器原始返回。

  • 用查看网页源代码(view-source)或关闭 JavaScript 后打开页面,看正文是否还在;
  • 用 curl 或抓取工具直接请求 URL,把返回内容存下来搜索关键词;
  • 在搜索平台的网址检查里查看“已抓取的 HTML”和渲染后的截图,两者对照;
  • 对比日志中该 URL 的抓取时间与索引内容,判断是没抓到,还是抓到了没更新。

哪些写法最容易让正文“看不见”

  • 整页由前端框架客户端渲染,HTML 里只有一个挂载节点;
  • 正文通过接口异步获取,而接口需要登录态、特定 UA 或 Referer 才返回数据;
  • 内容懒加载,只有滚动到可见区域才注入 DOM;
  • 需要点击“展开全文”“加载更多”才能看到主体内容;
  • 关键文本写在图片里,或依赖 Canvas 绘制。

这些写法对真实用户未必是问题,但它们把内容的可见性押在了渲染环节上。

处理顺序建议

  1. 把核心内容放回初始 HTML。标题、正文主体、主要内链、结构化数据,尽量由服务端直接输出。
  2. 关键页面优先服务端渲染或预渲染。详情页、商品页、文章页的正文,通常比交互组件更值得优先保障。
  3. 懒加载可以保留,但别用在首屏核心内容上。次要模块、评论区、推荐位后置可以接受,主体内容不建议。
  4. 动态渲染作为过渡而不是终点。如果短期无法改造前端,可以针对爬虫返回渲染后的 HTML,但要保证与用户看到的内容一致,并设定退出计划。
  5. 改完之后分开核对。先确认初始 HTML 已含正文,再看抓取是否更新,最后看索引中的内容是否同步。

核对时别只看一个视图

站内搜索、网址检查、抓取日志、缓存快照给出的信息各不相同,单一来源容易误判。比较稳妥的做法是:同一批页面取几个样本,记录改造前后的初始 HTML 内容、抓取时间和索引中的正文片段,用同一口径对比。

如果正文必须依赖渲染才会出现,那么收录速度、索引完整度和后续更新都会多一层不确定性。能提前写进初始 HTML 的内容,尽量不要留到最后。

最后提醒一点:渲染资源是有限的,把所有内容都交给 JavaScript 并不会让页面更“现代”,只会多给搜索引擎一次取舍的机会。先把最重要的正文稳定输出出来,其余问题往往就好谈得多。