随着单页应用（SPA）的流行，越来越多的网站已经采用了 AngularJS 这样的前端框架来构建其 SPA。然而，SPA 对搜索引擎优化（SEO）方面的支持存在挑战，因为搜索引擎爬虫通常只能获取静态 HTML 内容。本篇文章将介绍 AngularJS 单页应用 SEO 优化的实践方法。
为什么 AngularJS 单页应用需要 SEO 优化？
当搜索引擎爬虫访问一个网站时，它们通常只能获取到静态的 HTML 内容。而对于 SPA 应用，页面的 HTML 内容由 JavaScript 动态渲染生成，而爬虫无法理解这些 JavaScript 渲染出的内容。
如果您的 AngularJS 单页应用没有进行 SEO 优化，则大概率无法被搜索引擎收录，也就无法获得流量和排名。
1. 使用预渲染技术
预渲染技术指的是预先生成静态 HTML，使得搜索引擎爬虫可以直接获取到静态 HTML 内容，从而优化 SEO。
为了实现预渲染，需要用到 Prerender 这样的工具。Prerender 是一个中间件，可以将构建好的 AngularJS 应用 HTML 渲染到一个 headless 浏览器中，然后生成静态 HTML 并提供给搜索引擎爬虫。
-- -------------------- ---- ------- --- --------- - --------------------- --- ------ - ------------ ----------------------------------------- ------------------------------------ ---------------------------------- ---------------------------------- ---------------
2. 添加 meta 标签
在 AngularJS 单页应用中，由于没有静态 HTML，需要添加一些特殊的 meta 标签来告知搜索引擎。以下两个 meta 标签非常重要：
2.1. meta name="fragment"
当搜索引擎爬虫发现这个 meta 标签时，会发送一个 escaped_fragment 的 GET 请求，服务器会根据 escaped_fragment 的值渲染出静态 HTML 并返回给搜索引擎。
<meta name="fragment" content="!">
2.2. meta name="description"
每个页面都应该添加一个描述标签，描述该页面的内容。这样可以让搜索引擎很容易地了解页面的主题。
<meta name="description" content="写一段简单的描述，不超过 160 个字符">
3. 使用 hashbang 模式
AngularJS 应用默认采用的是 HTML5 模式，但是这种模式对 SEO 支持很差。因此，我们应该采用 hashbang 模式来使我们的 AngularJS 应用对 SEO 更加友好。
$locationProvider.html5Mode(false).hashPrefix('!');4. 链接处理
我们需要确保所有的链接都被搜索引擎索引。在 AngularJS 应用中，我们可以通过配置 $routeProvider 来确保所有链接都被正确处理。
$routeProvider.when('/about', {
templateUrl: 'partials/about.html',
controller: 'AboutCtrl',
activetab: 'about'
})
$locationProvider.html5Mode(false).hashPrefix('!');总结
本篇文章介绍了 AngularJS 单页应用 SEO 优化的实践方法，包括使用预渲染技术、添加 meta 标签、使用 hashbang 模式和链接处理等。通过这些方法，我们可以使得我们的 AngularJS 单页应用更加友好的被搜索引擎收录，从而获得流量和排名。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e484a48841e9894ad095f