Angular SEO如何正确实现动态title和meta？

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 搜索和 google chrome 选项卡中看到）。我目前正在尝试设置搜索引擎优化。这里有什么问题吗？我的意思是我看到的所有教程都可以从部分看到他们的页面标题，也可以看到元。

我做错了什么或者我需要做些什么才能通过某些关键字搜索在 google 中显示该网站？

Answer 1

Angular 默认情况下是客户端应用程序。当您为应用程序提供服务并查看 HTML 源代码时，您实际上会获得 index.html 的源代码，它位于 src.

的根目录中

为了 SEO，您需要在服务器上呈现页面。这样，当浏览器收到 HTML 时，它会使用某些数据元素进行预呈现，包括与 SEO 相关的 tags/content.

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

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

Angular SEO如何正确实现动态title和meta？

Angular SEO how to correctly implement dynamic title and meta?

angular

typescript

seo