SEO（搜索引擎优化）是每个网站开发者都需要考虑的问题。在今天的互联网时代，大多数人通过搜索引擎来找到他们需要的信息，尤其是Google搜索引擎，我们都希望能优化内容，以便让搜索引擎更好地识别和收录网站中的信息。
在 Angular 前端开发中，使用 Angular Universal 是一种实现 SEO 优化的有效方式。Angular Universal 可以使我们在服务器端渲染核心的应用程序，并生成预渲染的 HTML，以便搜索引擎蜘蛛更好地爬取和理解页面内容。
Angular Universal 是什么？
Angular Universal 是一种可以使 Angular 应用程序在服务器端呈现的技术。它可以在 Node.js 服务器上使用 Angular 代码实现 SSR（服务器端渲染），从而生成预渲染页面，这些页面可以更好地被搜索引擎蜘蛛识别和收录。
最主要的好处是在因为预渲染生成HTML，用户在第一次搜索到页面时，可以更快地获取到内容，提高访问速度和用户体验。
安装 Angular Universal
安装 Angular Universal 需要命令行中运行下面的命令。
ng add @nguniversal/express-engine
这个命令将在项目中自动添加和安装所需的包。
使用 Angular Universal
在 Angular 中使用 Angular Universal 简单地说就是要使用 Angular 应用程序的渲染器，并将其渲染到服务器端，并生成预渲染的 HTML。
创建服务端应用
通过下列命令可以创建服务端应用：
ng generate universal {name}这里的 {name} 是你希望创建服务端应用程序时创建的名称。
长尾词优化
使用服务端渲染的优势之一是可以针对长尾关键词进行优化。这些关键词是搜索引擎上数据量较小但有一定数量的搜索流量。这些长尾关键词可能是搜索引擎算法所忽略的，但对于用户可能非常重要。
对于这些关键词，可以通过将它们包含在 HTML 中并对其进行优化，从而更好地识别和收录它们。在 Angular Universal 中可以通过以下方式生成这些预渲染的 HTML 页面：
ng build --prod --output-hashing=none && ng run {project-name}:server:{production-name} && cp {project-name}-server/{production-name}/main.js {project-name}-server/{production-name}/main.prod.js && node {project-name}-server/{production-name}/main.prod.js > {project-name}-server/{production-name}/index.html这将生成针对生产环境的预渲染 HTML。其中 {production-name} 表示生产环境的名称。
预渲染页面
预渲染页面是指在服务器上以静态 HTML 形式预渲染的动态页面，这个 URL 需要在搜索引擎上进行收录。
我们可以在 app.server.module.ts 中引入 renderModuleFactory 核心方法，进行预渲染：
-- -------------------- ---- -------
-- --- ------ ------
------ --------------------- ---- ---------------------------
------ ---------------- ---- ----------------
------ -------------------------
------ ----------- ---- ----------------------------
------ -------- ---- -------------------------
------ - -- ------- ---- ----------
----- ----------- - -----------------------
----- ------ - --------------------------------
----- ---------- - -------------------
-----------------
----- --- - ----------
-----------------------
-------------- -------------------------- -
------- ----
----
-- ---------------
------------ ----- ----- ---- -- -
------------------------------ -------- ----------------
----------------------------- ----------- ----------------
----- ---- - ----- --------------------------- -
---- --------
--------- ------------------------
--------------- -
------------
-
---
----------------------------------- ----------- ------ ---------------------------------- -------------------- ----- --------------- --------
---在这个示例中，我们使用 renderModuleFactory 方法对路由进行预渲染。其中 PROVIDERS 包含了需要使用的服务。
总结
在开发 Angular 应用时，使用 Angular Universal 可以更好地进行 SEO 优化。通过在服务器端渲染应用程序，并生成预渲染的 HTML，我们可以提高应用程序的搜索引擎可访问性，进一步提高用户的使用体验。
在本文中，我们已经详细介绍了在 Angular 中使用 Angular Universal 实现 SEO 优化的具体步骤，并包含了示例代码。希望这篇文章能够帮助到各位 Angular 前端开发者，更好地进行 SEO 优化。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64742e13968c7c53b01978b5