SEO 百科

框架对 SEO 的影响

本页目录

框架对 SEO 的影响，指的是前端框架把页面内容放在哪一步生成，这决定了抓取工具第一次请求能不能读到正文。三种生成方式分别叫客户端渲染、服务端渲染和预渲染，它们对抓取、收录和首屏速度的影响差别很大。选框架之前先想清楚这一点，比事后补脚本省力。

三种渲染路子

三者的区别在第一份响应里。服务器返回的 HTML 里有没有正文，是第一件要确认的事。

用表格对照更清楚：

方式	服务器返回的 HTML	抓取工具第一次看到	适合的页面
客户端渲染	只有挂载点	没有正文	后台、登录后界面
服务端渲染	带正文的完整页面	正文	需要实时数据的页面
预渲染	构建时生成的文件	正文	内容固定的页面

这三种方式里，麻烦出在客户端渲染。抓取工具要先执行 JavaScript，才能看到正文。

各家能力不一样。Google 用常青版 Chromium 执行脚本，把 JavaScript 网页分抓取、呈现、编入索引三个阶段处理^[4]。Bing 也讨论过 JavaScript 和动态渲染，说明这类页面需要额外处理^[3]。百度把搜索对网页的处理概括为抓取、建立索引和展现三步^[5]。

能力更弱的是另一批程序。相当一部分搜索引擎、社交平台的预览程序，以及不少 AI 爬虫，都不执行脚本。它们请求一次，读完返回的 HTML 就走。对它们来说，客户端渲染的页面是空的。

即便抓取工具能执行脚本，也要排队。对状态码为 200 的页面，Googlebot 会把它们放进渲染队列，等资源允许时再用无头浏览器渲染^[4]。官方对等待时长没有承诺，原话是：“页面可能在队列里停留几秒钟，但也可能更久”^[4]。

这段等待有一个直接后果：新页面从发布到能被收录，中间隔着一段不确定的时间。内容更新频繁的站点，这段时间里新的内容始终没进索引。

要让第一次请求就带上正文，有两条路。

一条是服务端渲染。服务器按请求现算页面，抓取工具拿到的就是完整 HTML。代价是要有运行环境，按请求计算的服务器压力更大；而且服务器和浏览器提供的接口不一样，代码要两边都能跑^[1]。

另一条是预渲染，也叫静态生成。页面在构建阶段生成好，之后只发文件。它比服务端渲染更省资源，也更容易部署，因为产物是静态 HTML^[1]。条件是数据在构建时就已知，之后不再变，每次更新要重新部署^[1]。

内容不常变时，官方直接建议选预渲染，例如文档站和博客^[1]。

整站只选一种方式，往往不合适。营销页适合预渲染，后台适合客户端渲染，商品页要取实时数据。

主流框架都提供了按路由配置的做法。可以在同一套代码里，给不同路径指定不同的渲染方式，还能给页面配上后台重新生成的缓存策略^[2]。

增量更新处在两端之间。页面先按静态方式生成并缓存，到期之后在后台重新生成，用户拿到的仍是缓存好的 HTML。这样既保留了静态页面的速度，又不必每次改内容都重新部署。

按站点性质来选：

框架这一层，优先选自带渲染方案的：Vue 配 Nuxt，React 配 Next.js，Svelte 配 SvelteKit，Angular 用官方模块。自己从零搭建服务端渲染，成本高，能出问题的地方也多。

一个误用是以为换一套框架，收录就自动变好。抓取结果取决于服务器返回的 HTML 里有没有正文，框架只是决定了这件事好不好办。

另一个误用是把所有页面都交给客户端渲染。首页和内容页是最该被抓到的，把它们放在最后一步生成，等于把最重要的一部分藏起来。

还有一种是把动态渲染当成长期方案。它是给客户端渲染页面临时兜底的做法，Bing 的站长博客讨论过它的用法和边界^[3]。

无。