在设计和开发现代 Web 应用时，前端框架（例如 Angular、React、Vue 等）变得越来越受欢迎。这些框架可以用来构建单页应用程序或其他交互式应用程序，但是它们在 SEO 中的表现不太友好。
在本文中，我将提供一些 Angular 应用的 SEO 最佳实践，以帮助你优化 Angular 应用程序的搜索引擎可见性。
为什么 Angular 应用需要 SEO？
Angular 应用的一个主要问题是，搜索引擎无法像普通网站那样爬取和索引你的网页内容。这是因为 Angular 应用常常不是在服务端渲染的，而是在客户端渲染的。
这意味着搜索引擎看到的只是原始的 HTML 代码，其中很少有可读的内容和关键字。而 Angular 应用的主要内容和关键字通常是通过 JavaScript 呈现的。搜索引擎爬虫不会执行 JavaScript 代码，所以这些关键字和内容无法被收录。
为了让搜索引擎能够更好地识别和收录 Angular 应用程序，我们需要进行 SEO 优化。
Angular 应用的 SEO 优化技巧
下面是一些 Angular 应用的 SEO 优化技巧。
1. 服务端渲染
服务端渲染是解决 Angular 应用 SEO 问题的最佳实践之一。在服务端渲染中，页面的 HTML 会在服务器上生成，而不是在客户端上生成。这意味着搜索引擎可以看到完整的 HTML 内容，而不仅仅是原始的 HTML 代码。
Angular 支持使用 Angular Universal 进行服务端渲染，这是一个可用于构建服务端渲染的库和工具集。Angular Universal 可以将 Angular 应用程序渲染成静态 HTML，并将其传递给浏览器。
以下是 Angular 中执行服务端渲染的基本步骤：
- 安装 Angular Universal：
npm i -g @angular/cli @nguniversal/schematics && ng add @nguniversal/express-engine - 生成内有服务器的应用程序：
ng generate universal my-app - 构建应用程序：
npm run build:ssr - 运行服务器：
npm run serve:ssr
2. 应用程序结构
Angular 应用程序的结构也可以影响 SEO。以下是一些准则：
- 使用语义化的 HTML 标记
- 给重要的页面添加标题和描述元素
- 尽量减少深层嵌套和使用无效的 HTML 标记
- 避免使用 Ajax 调用和 JavaScript 事件绑定以改变地址栏的 URL
3. 链接策略
链接策略对于搜索引擎优化非常重要。以下是一些建议：
- 使用语义化的 URL（例如 /products/123 而不是 /item?id=123）
- 非必需的 URL 分隔符（例如： /products vs /products/）可以减少 URL 中的混淆
- 使用符合 HTTP 和 HTTPS 协议标准的链接
4. 关键字和描述
为页面添加标题和描述标签，以便搜索引擎能够正确索引并描述页面内容。描述元素应该是吸引人的，带有关键字，描述属性值应该匹配页面内容。一个不错的元描述理想情况下应该有 150-160 个字符。为了进一步提高发现性和可读性，添加Head，Keywords和canonical 的标签，例如：
------ ----------- - ------------ ----- ------------------ ---------------- ----- --------------- -------------- ----- ------ ----- --------------- -------------------------------------------- -------
5. 预渲染内容
对于 JavaScript-生成的内容，使用预渲染的内容 （prerendering）或静态生成的 HTML 对象降低页面加载时间，并允许搜索引擎蜘蛛检索虚拟DOM中的内容。
结论
优化 Angular 应用的 SEO 最佳实践包括：使用服务端渲染，创建好的应用程序的结构，正确的链接策略，为网站添加关键字和描述标记，以及预渲染内容。如果你使用这些技巧，你的 Angular 应用程序将更容易被搜索引擎和其他搜索引擎发现，并获得更高的排名。
参考示例代码，查看如何在服务端渲染的Angular应用程序中使用meta元素：
------ - --------- - ---- ----------------
------ - ---- - ---- ----------------------------
------------
--------- -----------
------------ ------------------------
--
------ ----- ------------- -
------------------- ----- ----- -
----------------------- --------- -------- ------- -------- --------------- ------
----------------------- -------------- -------- ----- -- --- ---- ------- --------------- ------
-
-来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6713247dad1e889fe20ac517