如何在Angular网站中添加Canonical标签？

Canonical标签对SEO至关重要，它能帮助搜索引擎识别网页的主版本，避免重复内容问题。你可以借助Angular的Meta服务，将其动态插入到<head>部分，具体操作如下：

1. 导入必要依赖 #

在需要处理Canonical标签的组件或服务中，导入相关模块：

import { Meta } from '@angular/platform-browser';
import { DOCUMENT } from '@angular/common';
import { Inject } from '@angular/core';

2. 注入服务与文档对象 #

在组件构造函数中注入Meta服务和DOCUMENT：

constructor(
  private meta: Meta,
  @Inject(DOCUMENT) private document: Document
) { }

3. 动态设置Canonical标签 #

在组件初始化钩子（如ngOnInit）中添加或更新标签：

ngOnInit(): void {
  // 使用当前页面URL作为Canonical地址
  const canonicalUrl = this.document.URL;
  this.meta.updateTag(
    { rel: 'canonical', href: canonicalUrl },
    'rel="canonical"'
  );
}

自定义固定URL场景 #

如果需要指定固定的主版本URL，直接替换canonicalUrl的值即可：

const canonicalUrl = 'https://your-domain.com/preferred-page-url';
this.meta.updateTag(
  { rel: 'canonical', href: canonicalUrl },
  'rel="canonical"'
);

4. 路由切换时自动更新（可选） #

若要在路由跳转后自动更新Canonical标签，可创建全局SEO服务实现：

import { Injectable } from '@angular/core';
import { Meta } from '@angular/platform-browser';
import { DOCUMENT } from '@angular/common';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class SeoService {
  constructor(
    private meta: Meta,
    @Inject(DOCUMENT) private document: Document,
    private router: Router
  ) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.updateCanonicalUrl();
    });
  }

  updateCanonicalUrl(): void {
    const canonicalUrl = this.document.URL;
    this.meta.updateTag(
      { rel: 'canonical', href: canonicalUrl },
      'rel="canonical"'
    );
  }
}

在根组件中注入该服务，即可实现路由切换时自动更新Canonical标签。

内容的提问来源于stack exchange，提问作者Jaya Smith