Angular Universal：SEO需要了解的内容

如果您使用Angular为您的网站提供动力，那么在SEO方面您还需要克服一个额外的障碍。 幸运的是，Angular Universal使其易于跨越。

请记住，“简单”是此处的相对术语。 其中涉及很多技术向导。

您几乎肯定需要使开发团队参与其中。

但是，一旦完成产品交付，您的站点将提供经过优化的页面，搜索引擎可以轻松地对其进行定位和编制索引。

在本指南中，我将解释Angular Universal及其对营销人员的重要性。

SEO问题

Angular是一个出色的框架，用于交付模块化，用户友好的Web应用程序。 不幸的是，它对SEO有点敌意。

这有两个原因。

首先，Angular严重依赖脚本来传递内容。 结果，一些搜索机器人没有“看到”用户看到的内容。

看看Angular Universal文档。 毫不奇怪，该页面是使用Angular渲染的。

向下滚动时，您会看到很多内容。 您会认为它们都是可索引的。

不必要。 右键单击页面，然后从出现的上下文菜单中选择“查看页面源”。

源代码只有100行。 正常查看页面时，您看不到那里的内容。

简而言之，这就是Angular的问题。 访客会看到内容，但搜索机器人会看到源。

而且来源没有内容！

SEO还有另一个问题：速度。 Angular应用程序通常无法快速加载。

在显示主页之前，某些站点将显示空白屏幕几秒钟。 这可能会导致游客在急躁时保释。

网站速度是移动设备排名的因素，因此如果您的网站无法在移动平台上快速加载，那么您的排名就会受到影响。

但是谷歌说...

谷歌声称其机器人可以索引脚本驱动的网站。 有足够的证据支持这一点，但这并不意味着您在优化Angular网站时可以避免加倍努力。

对于初学者来说，Google并不是镇上唯一的搜索引擎。 如果您希望Angular应用程序在Bing和DuckDuckGo上排名，则必须采取步骤以实现这一目标。

接下来，谷歌可以索引某些Angular网站，但不能索引您的网站。 并非所有的Angular应用程序都是一样的。 您可能是Google索引算法的例外。

以我的经验，从HTML迁移到Angular的网站大部分时间会释放来自搜索引擎的大量流量。 实际上，去年我有3个客户，由于Angular下降，我们不得不修复网站。

有解决方案

幸运的是，有一些方法可以使您的Angular网站SEO友好。

较流行的选项之一是使用动态渲染。 那就是当您使用诸如Puppeteer之类的工具来生成静态HTML文件时，网络爬网程序可以更轻松地使用它们。

然后，配置您的Web服务器，以便在人类访客围绕正常的Angular应用程序导航的同时，将搜索漫游器定向到预渲染的页面。

这是一个不错的解决方案，但仍然不能解决速度问题。 为此，您可能需要使用Angular Universal。

什么是Angular Universal？

Angular Universal在服务器上运行您的Web应用程序，而不是在浏览器中运行它。

这是一个重要的区别。 通常，Angular应用程序是客户端应用程序。

搜索机器人的问题在于，它们无法像浏览器为您提供网页一样总是“处理”客户端代码。 这就是为什么您看到Angular Universal文档页面与其源代码之间存在差异的原因。

Angular Universal处理服务器端渲染（SSR）。 它会预先渲染显示给用户的HTML和CSS内容。

这意味着用户将加载静态HTML页面而不是客户端代码。 结果，页面将加载得更快。

另外，由于它是静态HTML，因此搜索引擎可以将内容编入索引。

每个人都赢。

为什么重要

如果您从事数字营销，那么您已经知道很多战斗都涉及在线获得曝光率。 这就是为什么您要与有影响力的人接触，在社交媒体上发布更新并优化您的网站以使其排名良好的原因。

简而言之：如果您的网站无法建立索引，则无法对其进行排名。 如果Angular为您的网站提供动力，则需要采取额外的步骤来确保其内容出现在搜索引擎中。

这就是为什么您需要Angular Universal解决方案的原因。

不利的一面当然是要花钱。 您需要聘请合格的开发团队将SSR添加到您的网站。

如果您的网站在与您的利基相关的关键搜索字词中排名很高，那么这笔费用应该是随着时间的推移而付出的回报。

如何在Angular Universal上运行Angular应用

如果您是喜欢使用代码的人，或者只是想节省开发成本，则可以自行部署服务器端应用程序。

在此之前，最好是对Angular，命令行界面（CLI），TypeScript和Web服务器有基本的了解。 否则，您可能会挣扎。

部署Angular Universal应用的步骤如下：

• 安装必要的依赖项
• 更新Angular应用
• 使用CLI构建通用捆绑包
• 设置服务器以运行通用捆绑包
• 在服务器上运行应用

这五个步骤中有很多工作要做，因此我将在以下各节中依次介绍每个步骤。

安装依赖项

如果您有使用Angular的经验，那么您已经了解Node.js。 那是将TypeScript代码转换为JavaScript应用程序的运行时。

Node.js附带了一个程序包管理器，它的名字太虚构了，即Node Package Manager或简称npm。 您将使用它来安装依赖项。

启动命令行窗口并运行以下代码：

npm install –保存@ angular / platform-server @ nguniversal / module-map- ngfactory -loader ts-loader

花费一些时间（或很多时间）来安装所有内容。

更新您的Angular应用

接下来，您需要为通用部署准备Angular应用。 这涉及四个步骤：

• 添加通用支持。 打开您的根模块（通常是AppModule），然后将应用程序ID添加到BrowserModule导入中。 您将在@NgModule声明下方的“导入”部分中执行此操作。
• 创建服务器根模块。接下来，您需要创建一个名为AppServerModule的新模块。 确保它从您在上一步中添加的平台服务器依赖项中导入ServerModule。
• 创建主文件。 您将需要通用文件包的主文件。 在根目录（在src文件夹中）中创建该目录，然后从该文件中导出AppServerModule类。
• 创建一个配置文件。 AppServerModule类需要一个配置文件。 以JSON格式创建一个。 它看起来应该像这样：

创建一个新的构建目标

您的Angular源目录应包含一个名为angular.json的文件。 您需要在“建筑师”部分中更新该文件。

它看起来像这样：

“建筑师”：{
“构建”：{…}
“服务器”：{
“ builder”：“ @ angular-devkit / build-angular：server”，
“选项”：{
“ outputPath”：“ dist / my-project-server”，
“ main”：“ src / main.server.ts”，
“ tsConfig”：“ src / tsconfig.server.json”
}
}
}

注意“ builder”属性向下四行。 冒号（“服务器”）之后的值是服务器的名称。 如果要命名其他名称，则可以更新。

现在，您可以构建您的应用程序。 假设您保留名为“ server”的服务器，只需转到命令行并键入以下内容：

ng运行my-project：server

您应该看到如下所示的输出：

日期：2018-12-12T12：42：09.601Z
哈希：1caced0e9434007fd7ac
时间：4122ms
块{0} main.js（主要）9.49 kB [entry] [rendered]
块{1} styles.css（样式）0字节[输入] [呈现]

设置服务器

接下来，您需要设置通用服务器来运行捆绑软件。 这就是您序列化应用程序并将其返回到浏览器的方式。

为此，请创建一个名为server.ts的新文件。 在该文件中，您将定义您的应用引擎。

该代码的详细信息超出了本教程的范围。 随时查看Angular Universal文档中的示例。

在服务器上运行应用

毕竟，您终于可以在服务器上运行该应用程序了。

为此，请设置一个处理您在上一步中创建的server.ts文件的webpack。

将配置文件命名为webpack.server.config.js。 再次检查Angular Universal文档，以获取文件中确切的代码类型。 您可能需要使该代码适应您自己的命名约定。

处理完文件后，在dist文件夹下将有两个文件夹：浏览器和服务器。

要运行服务器代码，只需在命令行中键入以下内容：

节点dist / server.js

恭喜你！ 您现在正在运行服务器端代码。

包起来

尽管Angular使开发人员可以快速生成高质量的应用程序，但它并不总是可以与搜索引擎机器人很好地配合使用。

幸运的是，Angular Universal可以将Angular应用程序页面预渲染为静态HTML，以便它们可发现和可索引。 他们还将更快地加载。

始终建议我拥有HTML基础并使用Angular在页面上提供其他元素。 自2010年以来，我一直在就与JavaScript相关的所有内容提出此建议。Angular Universal的此过程是相同的原理。 我不能告诉您有许多站点Angular和JavaScript重新设计已被破坏。 在发布前，请务必小心，并始终由SEO公司对其进行审查。

本文中表达的观点是来宾作者的观点，不一定是Search Engine Land。 工作人员作者在此处列出。