站点运营

站点运营:JavaScript 渲染自查,别让动态内容在蜘蛛面前变成空白

浏览器里显示正常的页面,源码里可能只有空壳。本文从查看源代码、命令行抓取入手,讲清服务端渲染、预渲染和客户端渲染的差别,并给出一份可执行的自查清单,帮助站点运营者确认正文、内链和 meta 信息是否真的能被蜘蛛读到。

站点运营

站点运营:JavaScript 渲染自查,别让动态内容在蜘蛛面前变成空白

很多站点在浏览器里看一切正常,但蜘蛛拿到的 HTML 里只有一句“请开启 JavaScript”。原因通常是内容靠前端框架在客户端渲染。对站点运营来说,这不是纯前端细节,而是抓取链路上的一道关卡:内容进不了初始 HTML,后面所有优化都无从谈起。

先确认:你的页面是不是空壳

最直接的办法是查看页面源代码,注意是“查看源代码”,不是右键“检查”。在源码里搜索正文中一段独有的句子,比如文章第二段的一个词组。如果搜不到,说明内容是在页面加载后由脚本注入的。

也可以用命令行抓一次,请求页面地址,看返回内容里有没有正文文字。两种方法都找不到,基本可以确定这个页面依赖客户端渲染。

三种常见处理方式

服务端渲染

服务器返回的就是带内容的 HTML,蜘蛛和访客拿到的东西一致。改动量和成本相对大,但维护起来最省心,重要页面优先考虑。

预渲染

对不常变化的页面,在构建阶段或请求时生成静态 HTML。适合内容页、活动页这类结构固定的地址,改造成本通常低于全面重构。

客户端渲染

HTML 先到、内容后到。搜索引擎能执行 JavaScript,但执行需要排队、也可能超时,并不保证每个页面都被完整渲染。重要页面尽量不要只依赖这一种方式。

一份可执行的自查清单

  1. 首页和主要栏目页,源码里是否有可读的核心内容;
  2. 指向内页的链接是否写在 HTML 里,而不是等点击时才生成;
  3. 分页、筛选、加载更多,是否存在可被抓取的静态地址;
  4. 标题、描述、canonical 是否在初始 HTML 中输出,而不是由脚本写入;
  5. 结构化数据是否出现在初始 HTML 里,而不是靠脚本插入;
  6. 首屏图片地址和懒加载逻辑,会不会影响正文被抓取;
  7. 页面依赖的接口是否对爬虫开放,有没有鉴权或地域限制;
  8. 是否有规则挡住了 JS、CSS 或接口路径,导致页面渲染不出来。

两个容易被忽略的细节

链接的可抓取性

用 a 标签的 href 写链接最稳。用 onclick 跳转、用 div 配合样式模拟按钮,蜘蛛未必会跟过去。导航和列表页尤其要注意。

资源被误挡

有的站点为了省流量,在 robots.txt 里屏蔽脚本、样式甚至接口路径,结果页面在渲染时缺胳膊少腿。要么放行这些资源,要么干脆改成服务端渲染。

修复的排序思路

先把流量最大、转化最关键的页面改成服务端渲染或预渲染,再处理列表页和筛选页,最后才是长尾内容页。改完别急着下结论,用抓取工具模拟一次,看渲染后的 DOM 里有没有正文和链接,再对比改动前后的抓取记录。

渲染自查不是一次性任务。前端框架升级、模板改版、接口调整之后,都值得用同样的方法再跑一遍。