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

Question

我有一个关于 Angular 标题和元的小问题。我已将库导入到我的 angular 中。我在这样的 .ts 文件的构造函数中设置了我的标题和元描述(当然，每个页面的标题和描述都不同)；

//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">

如上所述，我无法从源代码中看到我的页面标题或页面描述(但我可以从谷歌搜索和谷歌浏览器标签中看到它)。我目前正在尝试设置搜索引擎优化。这里有什么问题吗？我的意思是我看过的所有教程都可以从该部分看到他们的页面标题，也可以看到元。
我做错了什么，或者我需要做些什么才能使网站通过某些关键字搜索在 google 中可见？

Answer 1

默认情况下，Angular 是一个客户端应用程序。当您提供应用程序并查看 HTML 源代码时，您实际上获得了 index.html 的源代码。这是 src 的根目录.
对于 SEO，您需要在服务器上呈现页面。这样，当浏览器接收到 HTML 时，它会预先呈现某些数据元素，包括与 SEO 相关的标签/内容。
这是关于如何将服务器端渲染(Angular Universal)添加到您的应用程序的官方指南:https://angular.io/guide/universal
关键部分是，要进行服务器端渲染，您需要使用专用命令(例如默认情况下 npm run dev:ssr)启动您的应用程序。这将启动节点，它将在服务器端处理请求。