AngularJS 是目前比较热门的前端框架之一，因其能快速构建 SPA（单页应用程序）而备受关注。然而，由于 SPA 页面的特殊性，搜索引擎优化（SEO）一直是个难题。本文将从 AngularJS SPA 页面的特点入手，介绍一些 SEO 优化实践，以及如何让搜索引擎更好地理解 SPA 页面。
AngularJS SPA 页面特点
最显著的特点是单页应用程序，即只有一个 HTML 页面，其他的页面内容都是通过 Ajax 获取并动态加载的。这样做的好处是能提高用户体验，但也带来了 SEO 上的一些挑战：
- 搜索引擎爬虫只能看到页面源代码的静态部分，而无法理解动态加载的部分。
- 由于只有一个 HTML 页面，无法为各个子页面设置不同的标题、关键词和描述等 meta 标签。
- 页面内容的加载速度可能较慢，这对 SEO 也有一定影响。
基于以上特点，我们需要采取一些特殊的措施来解决这些问题。
SEO 优化实践
1. 采用服务器渲染
采用服务器渲染可以让搜索引擎爬虫更容易理解页面内容。服务器渲染的方式将动态内容预先渲染成静态 HTML，然后返回给客户端。这样可以大大提高页面的渲染速度，并且也方便搜索引擎爬虫进行抓取。
在 AngularJS 中，可以使用 Prerender.io 等第三方服务来实现服务器渲染。
2. 设置 meta 标签
虽然无法设置不同的 meta 标签，但我们可以在 SPA 页面中动态更新 meta 标签。例如，当用户访问不同的子页面时，可以根据该页面的内容和关键词更新对应的 meta 标签。在 AngularJS 中，可以使用 ng-meta 等第三方模块来实现动态更新 meta 标签。
3. 优化页面加载速度
SPA 页面往往需要加载大量的 JavaScript 和 CSS 文件，这对页面加载速度有很大影响。为此，我们可以采取以下措施：
- 合并和压缩 JavaScript 和 CSS 文件，减少文件大小。
- 采用 CDN 加速，减少服务器负担和客户端请求时间。
- 使用图片懒加载等技术，延迟加载部分内容。
- 优化页面缓存，减少重复下载。
让搜索引擎爬虫更好地理解 SPA 页面
为了让搜索引擎更好地理解 SPA 页面，我们可以采用以下措施：
1. 使用 AJAX Crawling Scheme
对于 AJAX 加载的内容，搜索引擎无法很好地理解。为此，Google 提出了 AJAX Crawling Scheme，即使用特殊的 URL 形式让搜索引擎爬虫能够访问到 AJAX 加载的内容。在 AngularJS 中，可以使用 HTML5 mode 并配置 $locationProvider 来实现 AJAX Crawling Scheme。
2. 使用 Fragment Identifier（#）来标识页面状态
Fragment Identifier（#）后面的内容不会被发送到服务器端，因此可以用来标识页面状态。例如，我们可以将当前选择的导航项加在 Fragment Identifier 后面。这样可以让用户通过修改 Fragment Identifier 来访问不同的页面状态，同时也可以让搜索引擎更好地理解页面内容。
示例代码
以下是一个简单的例子，演示了如何通过 ng-meta 模块来动态更新 meta 标签：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- --------- ---------------
------
----- ----------------
----- --------------- ---------------------------- ---------------- -----------------
----- ------------------ --------------------------
------ ------------------------
-------
----- -----------------------
-----
-- ------------------
-- ------------------------
-- ----------------------------
------
---- --------------
------- ------------------------------
------- ------------------------------------
------- -----------------------------
------- ----------------------
-------
--------- -------------------- ---- -------
-- ------
----------------------- ----------- ----------
-------------------------------- ------------------ -
--------------
---------- -
------------ ------------
----------- ----------
--
--------------- -
------------ -------------
----------- -----------
--
----------------- -
------------ ---------------
----------- -------------
--
------------
----------- ---
---
-- -- ----- ---- --- -----------------
-----------------------------
-------- -----
------------ ------
------------- -----
---
--
----------------------- ---------------- ------- -
------------ - -------
---------------------- - ----- -- --- ---- -------
-- -- ---- --
------------------------------
---------------------------- ------------------------
--
------------------------ ---------------- ------- -
------------ - --------
---------------------- - ----- -- --- ----- -------
-- -- ---- --
------------------------------
---------------------------- ------------------------
--
-------------------------- ---------------- ------- -
------------ - ----------
---------------------- - ----- -- --- ------- -------
-- -- ---- --
------------------------------
---------------------------- ------------------------
---总结
针对 AngularJS SPA 页面的 SEO 优化需要采取一些特殊的措施。我们可以通过服务器渲染、设置 meta 标签、优化页面加载速度等来提高页面的可索引性和用户体验。此外，还可以通过采用 AJAX Crawling Scheme 和使用 Fragment Identifier（#）来标识页面状态来让搜索引擎更好地理解 SPA 页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ac3ee48841e98948e9cc0