【Angular】ページごとにTwitterのリンクカードの内容を切り替える

結論から行くとAngularのアプリでページごとにtwitterのリンクカードに表示されるmetaタグの中身を切り替えることは現状不可能です。(2020年5月現在)

twitterのリンクカードはAngularのindex.htmlにべた書きしたメタタグしか読み込まず、AngularのmetaモジュールなどのJSであとからメタタグの内容を変更するような動的な操作には対応していない、

なので、現状index.htmlにべた書きしたmetaタグの情報でしかTwitterやFacebookのリンクカードは作れない

<index.html>

cniw
<head>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://ツイッターのリンクカードに表示させる画像.jpg" />
<meta name="twitter:url" content="サイトURL" />
<meta name="twitter:title" content="サイトタイトル" />
<meta name="twitter:description" content="サイト概要" />
<meta name="twitter:domain" content="サイトのドメイン" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
</head>
<body>
~~~
<body>

ちなみにGoogle検索の方は動的なmetaタグに対応しているので、SEO対策のOGPのmetaタグの設定は動的に可能っぽい？

OGPについて→https://www.e-webseisaku.com/column/marketing/3947/

metaモジュールによるmetaタグ操作

一応Angularでのmetaタグ操作はmetaモジュールを使用して行うことが可能。(meta.addTag,meta.updateTag)↓

<app.module.ts>

import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute, NavigationEnd } from "@angular/router";
import { Title, Meta } from "@angular/platform-browser";
import { filter, map, mergeMap } from "rxjs/operators";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  constructor(
    public router: Router,
    private route: ActivatedRoute,
    private titleService: Title,
    private meta: Meta
  ) {}
  title = "myapp";

  ngOnInit() {
    //app.route.tsからmeta tagデータを引っ張り出してくるメソッド
    this.router.events
      .pipe(
        filter((event) => event instanceof NavigationEnd),
        map(() => this.route),
        map((route) => {
          while (route.firstChild) route = route.firstChild;
          return route;
        }),
        filter((route) => route.outlet === "primary"),
        mergeMap((route) => route.data)
      )
      .subscribe((event) => {
        this.updateDescription(
          event["description"],
          event["keywords"],
          event["title"],
          event["twittercard"],
          event["twittersite"],
          event["twitterimage"],
          event["url"]
        );
      });
  }

  updateDescription(
    desc: string,
    keywords: string,
    title: string,
    twittercard: string,
    twittersite: string,
    twitterimage: string,
    url: string
  ) {
    this.titleService.setTitle(title);
    this.meta.updateTag({ name: "description", content: desc });
    this.meta.updateTag({ name: "keywords", content: keywords });
    this.meta.updateTag({ property: "og:type", content: "website" });
    this.meta.updateTag({ property: "og:description", content: desc });
    this.meta.updateTag({ property: "og:title", content: title });
    this.meta.updateTag({ property: "og:url", content: url });
    this.meta.updateTag({ property: "og:image", content: twitterimage });
    this.meta.updateTag({ property: "og:site_name", content: "DBD投票サイト" });
    this.meta.updateTag({ property: "og:locale", content: "ja_JP" });
    this.meta.updateTag({ name: "twitter:card", content: twittercard });
    this.meta.updateTag({ name: "twitter:site", content: twittersite });
    this.meta.updateTag({ name: "twitter:url", content: url });
    this.meta.updateTag({ name: "twitter:title", content: title });
    this.meta.updateTag({ name: "twitter:description", content: desc });
    this.meta.updateTag({ name: "twitter:image", content: twitterimage });
    this.meta.updateTag({ name: "twitter:domain", content: "http://test.com" });
  }
}

<app-routing.module.ts>

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
~~~~
import { SampleComponent } from "./sample/sample.component";

const routes: Routes = [
  {
    path: "",
    component: SampleComponent,
    data: {
      title: "hogehoge 紹介",
      description: "hogeについてご紹介し…",
      keywords: "hoge,boyoyon,ororon",
      twittercard: "summary",
      twittersite: "@hogehoge",
      twitterimage:
        "https://〇〇.jpg",
      url: "https://〇〇",
    },
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}