Angular SEO 如何正确实现动态标题和元数据？答案

【问题标题】：Angular SEO how to correctly implement dynamic title and meta?Angular SEO 如何正确实现动态标题和元数据？
【发布时间】：2021-04-03 13:32:56
【问题描述】：

我有一个关于 Angular 标题和元数据的小问题。我已将库导入我的角度。我在 .ts 文件的构造函数中设置了 meta 的标题和描述（当然，每个页面都有不同的标题和描述）；

//To set the title
this.titleServ.setTitle("SOME TITLE HERE")
//To set the meta
this.meta.addTag({name: "description", content: "SOME DESCRIPTION HERE"})

当我通过 IIS 运行我的网站并从浏览器中检查时，我仍然看到类似的内容；

  <title></title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">

如前所述，我无法从源代码中看到我的页面标题或页面描述（但我可以从谷歌搜索和谷歌浏览器标签中看到）。我目前正在尝试设置搜索引擎优化。这里有什么问题吗？我的意思是我看到的所有教程都可以从该部分看到他们的页面标题，也可以看到元数据。

我做错了什么，或者我需要做些什么才能让网站在谷歌中通过一些关键字搜索可见？

【问题讨论】：

我认为任何 Angular SEO 功能都需要服务器端渲染（使用 Angular Universal）
@AlekseySolovey 我已经运行了命令“npm i @ng-toolkit/universal”来进行服务器端渲染，但是除了运行这个命令之外，我还需要什么吗？
尝试至少做一点研究。 angular.io/guide/universal

标签： angular typescript seo

【解决方案1】：

Angular 默认是一个客户端应用程序。当您提供应用程序并查看 HTML 源代码时，您实际上会获得位于 src 根目录中的 index.html 源代码。

对于 SEO，您需要在服务器上渲染页面。这样，当浏览器接收到 HTML 时，会使用某些数据元素进行预渲染，包括与 SEO 相关的标签/内容。

这是有关如何将服务器端渲染（Angular Universal）添加到您的应用程序的官方指南：https://angular.io/guide/universal

关键部分是，要进行服务器端渲染，您需要使用专用命令（例如默认为 npm run dev:ssr）启动您的应用程序。这将启动节点，该节点将处理服务器端的请求。

【讨论】：