我正在开发一个包含多条路由的Angular应用（例如 /、/about、/contact），并希望为每条路由设置一个动态的canonical标签以提升SEO。

目前，我尝试按如下方式使用Angular更新canonical标签：

updateCanonical(url: string) {
  let link: HTMLLinkElement = this.document.querySelector("link[rel='canonical']");

  if (!link) {
    link = this.document.createElement('link');
    link.setAttribute('rel', 'canonical');
    this.document.head.appendChild(link);
  }

  link.setAttribute('href', url);
}

我会在路由变化时调用这个方法。

问题

这在浏览器中（开发者工具）可行，但当我查看页面源代码时，canonical标签并未更新——仍然显示来自 index.html 的静态值。

限制条件

• 我并未使用Angular Universal（SSR）
• 我需要一个对SEO有效的解决方案（不仅仅是运行时DOM更新）
• 我更倾向于不对项目结构进行大幅修改

提出的问题

1. 在不使用SSR的情况下，是否有可能在Angular中动态更新canonical标签，并让它在「页面源代码」中体现？
2. 如果不能，处理Angular中各路由的canonical标签的最佳替代方案是什么？
3. 对于这个用例，我应该使用预渲染（prerendering）还是静态HTML生成？

我尝试过的

• 通过 DOCUMENT 更新canonical标签
• 使用Angular Meta服务
• 直接操作DOM

但以上方法都未在「页面源代码」中体现。

期望结果

每个路由在页面源代码中都应可见到属于自己的canonical标签，便于SEO爬虫抓取。

如能提供任何指导或最佳实践，将不胜感激。

解决方案

由于你没有使用服务端渲染，无法直接修改源代码。只有在渲染完成后，才会在DOM中体现。

为了获得更好的SEO效果，请使用 SSR。CSR不被推荐用于SEO。