🔥 Angular Universal SEO - 设置自定义页面标题和Meta标签

目录 📚

1. 引言
2. 自定义页面标题和描述
   1. 在 index.html 中设置通用标题和描述
   2. 为每个页面创建自定义标题和描述
3. 更改页面标题和描述
   1. 在特定页面设置自定义标题
   2. 使用 Angular 服务设置页面标题
   3. 搜索引擎的影响
4. 服务器端渲染与搜索引擎优化
   1. 理解服务器端渲染
   2. 对比客户端和服务器端渲染页面
   3. 页面标题的服务器端渲染
5. 结论

自定义页面标题和描述 📝

在开发网站时，使用 Angular 可以让我们为每个页面创建自定义的标题和描述。这样，在运行时不再使用 index.html 中的通用标题和描述，而是使用各页面特定的标题和描述。这对于没有特定标题的页面来说，可以作为备用标题。

在 index.html 中设置通用标题和描述

当我们打开网页时，浏览器会从 index.html 中的 <title> 和 <meta> 标签中获取标题和描述信息。为了提供更好的用户体验，我们可以根据页面的内容来自定义这些信息。

例如，我们可以将标题改为 "Angular Universal 应用程序"，将描述改为 "Angular Universal 示例应用程序"。这样，即使我们的应用程序中的某个页面没有特定的标题或描述，至少可以使用 index.html 中的通用标题和描述。

在 index.html 文件中，我们可以删除现有内容，并添加新的标题和描述信息。保存文件后，重新加载页面，我们会发现浏览器选项卡上显示了正确的标题和描述信息。

为每个页面创建自定义标题和描述

当用户浏览到特定页面时，我们希望为该页面设置自定义的标题。我们可以使用 Angular 的 Title 服务来实现这一点。

首先，在页面的构造函数中注入 Title 服务。然后，我们可以在 ngOnInit 生命周期钩子中使用该服务来设置页面的标题。

例如，对于首页（Home）组件，我们可以将页面标题设置为 "Angular Universal - 所有课程"。这样，在加载首页组件时，会自动更新页面的标题。您可以在浏览器选项卡上检查是否已显示新标题。

值得注意的是，从搜索引擎的角度来看，页面标题是如何设置的以及我们从后端接收到的标题是什么。如果我们查看页面源代码，会发现最初的 HTML 负荷只包含了 index.html 文件的内容。当 Angular 接管页面并生成所有内容后，页面的标题也会相应更新。

对于搜索引擎而言，它会采取哪个标题呢？它会采用由服务器呈现的初始标题，还是动态生成的运行时标题呢？实际上，这取决于搜索引擎的算法。

几年前，大多数搜索引擎只会使用从 HTML 负荷中获取的初始标题。这意味着，只有在服务器端呈现的标题才会被搜索引擎纳入考虑范围，而使用 Angular 等通过 JavaScript 运行时生成的标题则会被忽略。然而，谷歌搜索引擎则会考虑运行时 JavaScript 对标题和 meta 标签的更新。而如今，大多数常用的搜索引擎也都考虑 JavaScript 在运行时所做的更改。

尽管如此，仍然有一些重要的搜索引擎不会处理运行时生成的标题和描述标签。因此，如果我们想要针对这些特定的搜索引擎进行搜索引擎优化，就需要在服务器端进行标题渲染。但对于大多数情况，包括谷歌搜索引擎在内，这已经不再必要了。

更改页面标题和描述 🔧

在 Angular 中，我们可以轻松地更改页面的标题和描述。让我们看看如何为页面设置自定义标题，并了解搜索引擎的影响。

在特定页面设置自定义标题

为了为特定页面设置自定义标题，我们需要在相关组件中更改页面的标题。通过在构造函数中注入 Angular 的 Title 服务，我们可以轻松访问并更改页面的标题。

例如，让我们在首页组件中设置页面标题为 "Angular Universal - 所有课程"。通过调用 Title 服务的 setTitle 方法，我们可以在 ngOnInit 生命周期函数中设置标题。

在刷新页面后，我们将看到浏览器选项卡上显示了我们指定的新标题。这样，用户在浏览网站时，会看到与特定页面相关的标题，从而提供更好的用户体验。

使用 Angular 服务设置页面标题

在 Angular 中，我们有一个内置的 Title 服务，可以让我们更轻松地设置页面的标题。通过在组件中注入 Title 服务，并调用其 setTitle 方法，我们可以动态地更改页面的标题。

例如，让我们使用 Title 服务在首页组件中设置页面的标题为 "Angular Universal - 所有课程"。这样，无论用户浏览到哪个页面，页面的标题都会相应更新。

要使用 Title 服务，我们首先需要在构造函数中注入它。然后，在 ngOnInit 生命周期钩子中，我们可以调用 setTitle 方法并传递新的标题值。

需要注意的是，这种方式只会在客户端上动态更改页面的标题。因此，如果搜索引擎爬虫在加载页面时检索页面的标题，它仍可能获取到初始的 index.html 中的通用标题。只有在用户通过浏览器访问页面并 Angular 运行时生成页面后，页面的标题才会更新。

搜索引擎的影响

当涉及到搜索引擎优化时，我们需要了解搜索引擎是如何处理页面标题的。

事实上，不同的搜索引擎有不同的算法来确定页面的标题。一些搜索引擎只考虑从服务器传递的初始标题，而不会注意运行时生成的标题。但如今，大多数主流搜索引擎都会考虑运行时生成的 JavaScript 内容。

因此，大多数搜索引擎都会采用运行时生成的标题，而不仅仅是服务器端呈现的标题。这意味着，只要用户通过浏览器访问网站并加载了 Angular 应用程序，搜索引擎就会能够看到并采用运行时生成的标题。

然而，仍有一些搜索引擎不考虑运行时生成的标题和描述标签。因此，如果我们希望针对这些搜索引擎进行优化，我们可以通过服务器端渲染页面来生成标题。这样，我们可以确保在搜索引擎收录网页时，正确的标题能够呈现给用户。

尽管如此，对于大多数情况，使用 Angular 的运行时生成标题即可满足需求，并为用户提供良好的体验。

服务器端渲染与搜索引擎优化 🌐

使用服务器端渲染（Server-Side Rendering，SSR）可以提升网站的搜索引擎优化效果。让我们进一步了解服务器端渲染，并与客户端渲染进行对比。

理解服务器端渲染

传统的客户端渲染方式是在浏览器中以 JavaScript 为基础进行渲染。而服务器端渲染则是在服务器上生成完整的 HTML 页面，并将其发送到浏览器。

使用服务器端渲染可以改善搜索引擎对网站的索引。由于搜索引擎的爬虫主要处理 HTML 内容，服务器端渲染可以确保搜索引擎能够正确索引页面的内容。

此外，服务器端渲染还可以提供更好的首次加载性能，因为浏览器不再需要等待 JavaScript 文件下载和执行，而是直接渲染服务器返回的完整 HTML 页面。

对比客户端和服务器端渲染页面

让我们比较一下客户端渲染和服务器端渲染页面，以了解它们之间的区别。

客户端渲染页面由 JavaScript 代码在浏览器中运行并生成内容。这意味着在页面加载期间，浏览器首先下载 JavaScript 文件，然后执行该文件以生成页面。

然而，服务器端渲染页面是在服务器上先生成的，然后作为完整的 HTML 页面发送到浏览器。这样，浏览器只需渲染页面而无需等待 JavaScript 文件下载和执行。

由于服务器端渲染页面是在服务器生成的，搜索引擎爬虫可以直接从初始化的 HTML 页面中获取到页面的完整内容和标签信息。与客户端渲染页面相比，服务器端渲染页面更有利于搜索引擎优化。这意味着，通过服务器端渲染生成的页面将更容易被搜索引擎正确索引。

页面标题的服务器端渲染

在我们的应用程序中，我们可以通过服务器端渲染确保页面的标题可以在搜索引擎中正确显示。

当我们采用服务器端渲染时，搜索引擎会从服务器返回的完整 HTML 页面中获取页面的标题和描述。这样，即使搜索引擎的爬虫在加载页面时获取不到 JavaScript 生成的标题，也能正确索引页面的内容。

使用服务器端渲染的优点是，它能够确保搜索引擎在爬取页面时能够获得完整的 HTML 内容，从而使网站更容易被搜索引擎正确索引。这对于优化网站的搜索引擎排名非常重要。

结论 📝

通过使用 Angular，我们可以轻松地为每个页面创建自定义的标题和描述。在 index.html 中设置通用标题和描述，然后在每个页面中更改标题，我们可以为用户提供更好的体验。

使用 Angular 的 Title 服务，我们可以动态地更改页面的标题。尽管搜索引擎现在大多数都考虑到运行时生成的标题，但仍有一些搜索引擎需要服务器端渲染才能正确处理标题。

通过服务器端渲染，我们可以确保搜索引擎能够正确处理页面的标题和描述，并将页面正确定位到搜索结果中。

总之，结合使用客户端渲染和服务器端渲染可以最大程度地优化我们的网站，提供更好的用户体验和搜索引擎优化效果。

资源

• Angular 官方网站
• Angular Universal GitHub 仓库
• 谷歌搜索引擎