在 Angular 应用程序中实现 Canonical 标签

Question

我有一个 Angular 应用程序，我希望动态更改规范标签值。

我有一个名为article.component.ts的组件，它负责显示各个博客页面。 现在，规范 URL 的值在文章组件的 ngOnit 方法中可用，并且在页面完全加载后正确呈现该值，但由于规范标签更改是为了 SEO 更改，因此它应该反映在浏览器的“查看源代码”选项中，以便这反映在搜索引擎对网页的抓取中。

我在 Angular 应用程序中使用了服务器端渲染 (SSR) 来反映 SEO 标签（如元标签、标题和规范标签）的正确值。

以下是我的代码更改。

index.html

提到的初始规范标签

<link rel="canonical" href="https://example.com">

文章组件中更新规范标签的方法

updateCanonicalLink(newCanonicalUrl: string) {
    const canonicalLink =  this.elementRef.nativeElement.querySelector('link[rel="canonical"]');
    const metaDes =  this.elementRef.nativeElement.querySelector('meta[name="description"]');
    console.log('canonical link',canonicalLink);
    if (canonicalLink) {
      console.log("Canonical tag updated",canonicalLink);
      this.renderer.setAttribute(canonicalLink, 'href', newCanonicalUrl);
    }
  }

在Article组件的ngOnit方法中调用上述方法

ngOnInit(): void {
    this.subscriptions.push(this.router.params.subscribe(routeParams => {
      this.getArticle(routeParams.id, routeParams.path);
      this.pageId = `blog/${routeParams.id}`;       
       let canonicalURl = `https://example.com/blog/${routeParams.id}/${routeParams.path}`;
       this.updateCanonicalLink(canonicalURl);
    }));
  }

不知何故，当我点击 URL 时，规范标签值不会反映在查看源代码以及 console.log('canonical link',canonicalLink); 中。在控制台中打印 null。

如果我使用 document.querySelector('link[rel="canonical"]');然后我还在应用程序中收到以下错误，并且没有反映在查看源代码中 但 console.log 打印了正确的值，并且也在元素部分中进行了更新。

除非它没有在查看源代码中更新，否则它不能解决我的目的。

ERROR ReferenceError: document is not defined
    at article_component_ArticleComponent.updateCanonicalLink (C:\code\blogui\BlogApp\dist\BlogApp\serverless\modules-article-article-module.js:1:3670)
    at article_component_ArticleComponent.setDocTitle (C:\code\blogui\BlogApp\dist\BlogApp\serverless\modules-article-article-module.js:1:8635)
    at SafeSubscriber.subscriptions.push.blogService.getBlog.subscribe.isShowArticle [as _next] (C:\code\blogui\BlogApp\dist\BlogApp\serverless\modules-article-article-module.js:1:6413)
    at SafeSubscriber.__tryOrUnsub (C:\code\blogui\BlogApp\dist\BlogApp\serverless\main.js:1:456358)
    at SafeSubscriber.next (C:\code\blogui\BlogApp\dist\BlogApp\serverless\main.js:1:455057)
    at Subscriber._next (C:\code\blogui\BlogApp\dist\BlogApp\serverless\main.js:1:453716)
    at Subscriber.next (C:\code\blogui\BlogApp\dist\BlogApp\serverless\main.js:1:453478)
    at MapSubscriber._next (C:\code\blogui\BlogApp\dist\BlogApp\serverless\main.js:1:2369981)
    at MapSubscriber.next (C:\code\blogui\BlogApp\dist\BlogApp\serverless\main.js:1:453478)
    at FilterSubscriber._next (C:\code\blogui\BlogApp\dist\BlogApp\serverless\main.js:1:2519565)

Answer 1

您需要注入对

document

的 Angular 引用

import { DOCUMENT } from '@angular/common';

constructor(private readonly document: DOCUMENT){}

updateCanonicalLink(newCanonicalUrl: string) {
    const canonicalLink = this.document.querySelector('link[rel="canonical"]');
    const metaDes = this.document.querySelector('meta[name="description"]');
    console.log('canonical link',canonicalLink);
    if (canonicalLink) {
      console.log("Canonical tag updated",canonicalLink);
      this.renderer.setAttribute(canonicalLink, 'href', newCanonicalUrl);
    }
  }

Answer 2

你可以将元服务注入到你的组件中

import { Meta } from '@angular/platform-browser';

// ...

constructor(private meta: Meta) { }

然后

updateCanonicalLink(newCanonicalUrl: string) {
  const canonicalTag = this.meta.getTag('rel="canonical"');
  if (canonicalTag) {
    this.meta.updateTag({ rel: 'canonical', href: newCanonicalUrl });
  } else {
    this.meta.addTag({ rel: 'canonical', href: newCanonicalUrl });
  }
}