Angular SEO 友好的编码实践

如果您正在使用 Angular 开发网站或应用程序，您很可能希望它在搜索引擎中排名靠前。正如您可能已经读到的，这会带来一些挑战。Angular 是一个著名的前端框架，广泛用于构建单页面应用程序，即 SPA。它们以其流畅、即时的页面转换和出色的用户体验而闻名。但也存在一些缺点，尤其是在 SEO 性能方面。

1. Angular SEO 挑战

当使用 Angular 构建 SEO 友好的应用程序时，您会遇到一些挑战。这些挑战是由于（默认情况下）您正在使用 Angular 构建 SPA 应用程序这一事实而产生的。当您构建 SPA 应用程序时，它将生成一些 CSS 文件、JS 包和一个 HTML 页面(index.html)。在这个 HTML 页面上，我们几乎没有发现任何内容，只有一些用于加载 CSS 和 JS 文件的脚本。然后，浏览器将处理 JS 文件以呈现应用程序的页面。这对于某些目的来说非常有用，但如果来自搜索引擎和社交媒体网站的爬虫只收到一页和一些 JavaScript 代码，它们可能会在索引您的页面时遇到困难。

有一些好消息，Google 的爬虫在对 JavaScript 内容进行索引方面已经相当出色，但它仍然无法与对结构良好的 HTML 文件及其中包含的所有内容进行索引相比。

SPA 应用程序给 SEO 带来的另一个缺点是它们的初始页面加载速度很慢。使用 SPA 应用程序，您可以预先加载完整的 JavaScript 模块，然后无缝地浏览应用程序页面的其余部分。但加载此 JavaScript 模块比加载 HTML 页面花费更多时间，导致初始页面加载缓慢。在优化 SEO 时，初始页面加载是一个重要因素，因此在构建 SEO 友好的 Angular 应用程序时，这也是一个注意点。如果您对 SPA 应用程序犹豫不决，您可以尝试通过创建轻量级应用程序模块并在重定向后延迟加载所有其他模块来使初始包尽可能小。

2. Angular SEO 友好的编码实践

现在您已经更好地了解了构建 SEO 友好的 Angular 应用程序时面临的问题，让我们看看如何解决这些问题！简要概述可以采取哪些措施来改进 Angular 应用程序的 SEO：

1. Angular Universal 和服务器端渲染：通过使用 Angular Universal 和服务器端渲染，我们可以大幅提高 Angular 应用程序的 SEO 性能

2. 预渲染 Angular 应用程序：预渲染 Angular 应用程序是改进 Angular 应用程序 SEO 的另一种好方法

3. 动态添加标题和元标记：在每个 HTML 页面上添加标题和元标记是页面 SEO 的关键部分。使用 Angular 的 Meta 和 Title 服务，您可以动态添加这些标签，以便每个页面都有自己的标签

4. 添加站点地图：站点地图是一个 XML 文件，其中列出了您网站的所有 URL。这有助于搜索引擎了解您网站的结构，并使其更轻松地为您的页面建立索引

5. Robots.txt：Robots.txt 是一个文件，告诉搜索引擎您网站的哪些页面或部分不应编制索引

3. 使用 SSR 改进 Angular SEO

当您谈论 SEO 友好的 Angular 应用程序时，首先要考虑的事情之一就是呈现内容的方式。正如前面通过 SPA 应用程序所解释的，内容通过浏览器中的 JavaScript 代码呈现在单个 HTML 文档中。出于 SEO 目的，如果应用程序的每个页面都有一个完整呈现的 HTML 页面，其中页面的所有内容都在 HTML 文档中，那就更好了。这样我们就可以将此 HTML 页面而不是一些 javascript 代码发送到浏览器，从而使搜索引擎更容易对页面建立索引。这不仅可以让搜索引擎更轻松地为您的页面建立索引，而且还可以再次提高您的初始页面加载量，从而提高您的 SEO 性能。

3.1. 那么您问这一切是如何实现的呢？

为了实现这一点，您需要启用服务器端渲染，这意味着您有一个服务器将侦听页面 URL 上的请求，当它收到请求时，服务器将在服务器上渲染 HTML 页面并将 HTML 页面发送到浏览器。如果这一切听起来非常复杂，别担心，Angular 已经帮您解决了！Angular 附带了一个名为 Angular Universal 的软件包，它是您构建 SEO 友好的 Angular 应用程序时最好的朋友。

借助 Angular Universal，您只需运行一个命令即可将应用程序转换为服务器端渲染的应用程序：

ng add @nguniversal/express-engine

此命令将为您生成一个 express.js 服务器，并向您的 Angular 应用程序添加一些配置和 Node js 脚本，以便可以在服务器上呈现它。如果您想要有关 Angular Universal 和服务器端渲染的完整操作方法，您可以阅读这些文章： Angular universal 服务器端渲染与预渲染 ， 使用 Angular Universal 时的重要注意事项

使用 Angular Universal 启用 SSR 后，您的页面将在服务器上呈现，使您的页面易于搜索引擎索引，并且它将改善您的初始页面加载，为您带来另一个 SEO 提升。Angular Universal 的另一个很酷的事情是它为您提供了两全其美的优势。页面在服务器上呈现，但页面加载后，它会将网站交换为 SPA 应用程序，为您提供 SPA 的即时导航功能。

4. 通过预渲染改进 Angular SEO

改善 Angular SEO 的另一种方法是预渲染页面。在前面的示例 (SSR) 中，每次请求页面时，页面都会在服务器上呈现。通过预渲染，您可以在构建过程中渲染 HTML 页面。这仅适用于静态内容，但可以进一步改善页面加载以及对呈现的 HTML 页面的控制。它还可以帮助降低您的托管成本，因为预渲染的应用程序可以作为静态网站托管，而 SSR 应用程序需要托管您的服务器。

预渲染 Angular 应用程序也可以使用 Angular Universal 来完成，或者另一种流行的替代方案是使用Scully预渲染 Angular 应用程序的库。如果您想了解有关 Angular Universal 预渲染的完整操作方法，您可以阅读这篇文章：

Angular 静态站点生成 - 完整指南

5. 为 Angular SEO 添加元标签

当您使用 Angular 构建网站并希望确保其针对搜索引擎进行优化时，最重要的事情之一就是正确使用元标记。无论您正在构建 SPA、SSR 或 SSG Angular 应用程序，正确的元标记对于页面 SEO 至关重要。

首先，什么是元标签？

简而言之，元标记是向搜索引擎提供有关网页的信息的代码片段。它们被放置在 HTML 代码的头部，对网站访问者来说是不可见的。元标记的一些示例包括关键字元标记，它告诉搜索引擎页面的关键字，以及描述标记，它给出页面内容的简短摘要。页面的标题添加了一个 title 标签，与 meta 标签类似，这个标签也需要动态添加到每个页面。

元标记在搜索引擎如何理解和排名您的网站方面发挥着至关重要的作用。当搜索引擎抓取您的网站时，它们使用元标记中的信息来确定您的页面的内容以及它们与用户搜索查询的相关程度。如果您有编写良好的元标记，您的网站更有可能在搜索引擎结果中显示得更高，这意味着您的可见度和流量更高。

在组件的 HTML 模板中添加元标记不起作用。在所有页面之间共享的元标记可以添加到 Angular 项目根目录下的 index.html 中。共享元标记的一些示例可能是：

<metaname="viewport" content="width=device-width, initial-scale=1">

<metaname="google-site-verification" content="some-verification-key">

<metaname="robots" content="index, follow">

<metaproperty="og:image:width" content="300">

<metaproperty="og:image:height" content="300">

可以使用元和标题服务添加其他特定于页面的元标记和标题标记。首先让我们看看如何使用@angular/platform-b​​rowser 中的 Meta 服务将元标记添加到 Angular 应用程序的页面中：

import { Component } from "@angular/core";
import { Meta } from "@angular/platform-browser";

@Component({
  selector: "app-root",
  template: `<h1>My Angular App</h1>`,
})
export class AppComponent {
  constructor(private meta: Meta) {
    this.meta.addTag({ name: "description", content: "My page description" });
  }
}

正如您在示例中看到的，您从母鸡导入服务，并在组件类的构造函数中使用依赖项注入来注入它。现在您可以使用该方法将元标记添加到 HTML 文档的头部。如果将 addTag 方法放在 ngOnInit 中，它将适用于 SPA 和 SSR，但不适用于预渲染应用程序，因此最好只在构造函数中声明它们。Meta @angular/platform-browsers; taddTag()

将标题标签添加到页面非常相似。您还可以从@angular/platform-b​​rowsers 导入 Title 服务，并再次使用依赖项注入来注入它，并在构造函数中使用它，如下所示：

import { Component } from "@angular/core";
import { Title } from "@angular/platform-browser";

@Component({
  selector: "app-root",
  template: `<h1>My Angular App</h1>`,
})
export class AppComponent {
  constructor(private titleService: Title) {
    this.titleService.setTitle("Angular Tutorials");
  }
}

以下是一些有用的元标记的列表，可以添加这些元标记以实现更好的 SEO 和社交媒体索引和可共享性。

<meta name="twitter:description" content="">

<meta name="twitter:title" content="">

<meta name="twitter:image" content="">

<meta name="og:type" content="">

<meta name="og:description" content="">

<meta name="og:title" content="">

<meta name="og:image:secure_url" content="">

<meta name="og:image" content="">

<meta name="keywords" content="">

<meta name="description" content="">

6. 添加用于 SEO 的 sitemap.xml 和 robots.txt

您已经快完成了，只需进行一些最后的润色即可改进您的 Angular SEO。我们在这篇博文中要做的最后一件事是添加 robots.txt 和 sitemap.xml。Robots.txt 是一个文件，它告诉搜索引擎您网站的哪些页面或部分不应编制索引。站点地图是一个 XML 文件，其中列出了您网站的所有 URL。这有助于搜索引擎了解您网站的结构，并使其更轻松地为您的页面建立索引。

这两个文件都可以添加到 Angular 项目的 src 中。

User-agent: Googlebot

Disallow: /nogooglebot/

User-agent: *

Allow: /

Sitemap: https://example.com/sitemap.xml

站点地图的内容应如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com</loc>
  </url>
  <url>
    <loc>https://www.example.com/folder1/test1</loc>
  </url>
  <url>
    <loc>https://www.example.com/folder2/test2</loc>
  </url>
  <url>
    <loc>https://www.example.com/folder3/test3</loc>
  </url>
</urlset>

7. Angular 系列文章

最新更新以及更多 Angular 相关文章请访问 Angular 合集 | 鹏叔的技术博客

8. 总结

您的 Angular 应用程序可能不会从一开始就进行 SEO 优化，但通过 Angular Universal 以及元和标题服务，您可以制作 SEO 友好的 Angular 应用程序！无需太多努力，您就可以将 Angular 应用程序转换为服务器端渲染或预渲染的应用程序，其中包含 HTML 页面供搜索引擎索引。通过元标题服务，您可以向页面添加动态元和标题标签，以便搜索引擎可以轻松为您的页面建立索引。

9. 参考文档

Angular SEO friendly coding practices