SEO 百科

Angular

本页目录

Angular 是一套前端框架，由 Google 维护，用来搭建大型网页应用，默认把页面放在浏览器里渲染^[1]。做 SEO 的人会碰到它，因为不少企业站和后台系统用它开发，而客户端渲染的默认行为对抓取不友好。Angular 后来补上了服务端渲染和预渲染，用不用得上，要看站点性质。

框架定位与生态

Angular 是一套完整的框架，不是单纯的界面库。路由、表单、依赖注入和构建工具都自带，官方还提供了命令行工具 ng。

它由 Google 维护，在大型企业应用里用得多，生态里有 Angular Material 这类组件库。它的写法基于 TypeScript，类型检查比较严。

Angular 默认把应用作为客户端渲染交付^[1]。官方也把这种做法的代价写明了：首屏加载更慢，性能指标更差，因为大部分计算落在用户设备上^[1]。

和别的框架一样，服务器返回的 HTML 里只有挂载点，正文要等 JavaScript 执行之后才出现。

Angular 官方直接点出了抓取问题：“如果页面需要被搜索爬虫索引，客户端渲染可能对搜索引擎优化产生负面影响”^[1]。原因是搜索爬虫执行 JavaScript 有上限^[1]。

Google 处理 JavaScript 网页分三个阶段：抓取、呈现、编入索引^[3]。第二步要用无头浏览器跑一遍脚本，等它完成，正文才可能进索引。

这一点不只是 Google。Bing 的站长博客也讨论过类似问题，动态渲染和 JavaScript 处理都需要额外安排^[2]。

Angular 提供了三种渲染模式，可以按路由分别设置^[1]：

新建项目时带上服务端渲染的开关，现有项目可以加装模块：

ng new my-app --ssr

官方说明，服务端渲染通常有很好的搜索引擎优化效果，因为搜索爬虫收到的是渲染完整的 HTML 文档^[1]。预渲染的效果类似，代价是构建时间更长^[1]。

一个误用是以为 Angular 自带服务端渲染。它默认是客户端渲染，要另装模块并配好服务器。

另一个误用是给后台也开着服务端渲染，白白增加服务器开销。

还有一种是把只在浏览器可用的代码写进共用组件，这类代码在服务端会报错，页面可能整页渲染失败。

无。