序章

AngularのMetaサービスを使用すると、アプリで現在アクティブなルートに応じて、さまざまなmetaタグを取得または設定できます。

注:AngularMetaサービスはAngular4以降で利用できます。

その使用法と利用可能な方法を見ていきましょう。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

このチュートリアルは、ノードv16.2.0、npm v7.15.1、およびangularv12.0.3で検証されました。

addTagおよびaddTagsを使用する

メタサービスを使用するには、@angular/platform-browserからインポートし、コンポーネントまたはサービスに挿入する必要があります。

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

複数のmetaタグを使用すると、代わりにaddTagsメソッドを使用して、それらすべてを同じ呼び出しに設定できます。

コンポーネントがロードされたときにTwitterカードにmetaタグを追加する例を次に示します。

constructor(private meta: Meta) {
  this.meta.addTags([
    { name: 'twitter:card', content: 'summary_large_image' },
    { name: 'twitter:site', content: '@alligatorio' },
    // ...
  ]);
}

このコードは、ページに次の結果を生成します。

Output
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@alligatorio">

addTagaddTagsはどちらも、タグがすでに存在する場合でも、タグを作成する必要があるかどうかを示す2番目のブール引数を取ることができることに注意してください。

たとえば、タグは2回追加されます。

constructor(private meta: Meta) {
    this.meta.addTags([
      { name: 'twitter:site', content: '@alligatorio' },
      { name: 'twitter:site', content: '@alligatorio' }
    ], true);
  }
}

このコードは、ページに次の結果を生成します。

Output
<meta name="twitter:site" content="@alligatorio"> <meta name="twitter:site" content="@alligatorio">

addTagおよびaddTagsを使用すると、新しいmetaタグを追加できます。

getTagおよびgetTagsを使用する

addTagおよびaddTagsメソッドと同様に、getTagおよびgetTagsメソッドもあります。

次のmetaタグを持つアプリケーションについて考えてみます。

<meta name="viewport" content="width=device-width, initial-scale=1">

getTagの使用例を次に示します。

constructor(private meta: Meta) {
  const viewport = this.meta.getTag('name=viewport');
  if (viewport) console.log(viewport.content);
}

コンテンツはコンソールに出力されます。

Output
width=device-width, initial-scale=1

getTagは、属性セレクター文字列を受け取り、HTMLMetaElementを返します。 getTagsも属性セレクターを取りますが、セレクターに一致する可能性のある複数のHTMLMetaElementsを持つ配列を返します。

updateTagを使用する

新しいmetaタグ定義とセレクターを指定すると、updateTagメソッドはセレクターに一致するすべてのタグを更新します。

以下のやや工夫された例では、最初にmetaタグにsummary_large_imagecontentを設定し、次にそれをsummaryだけに更新します。

constructor(private meta: Meta) {
  this.meta.addTag(
    { name: 'twitter:card', content: 'summary_large_image' }
  );

  this.meta.updateTag(
    { name: 'twitter:card', content: 'summary' },
    `name='twitter:card'`
  );
}

実際のアプリでは、代わりにアプリにグローバルに存在するmetaタグを更新する必要がありますが、アクティブなルートに応じて異なる値をとる必要があります。

removeTagおよびremoveTagElementを使用する

removeTagメソッドは、属性セレクターの文字列を受け取り、タグを削除します。

次のmetaタグを持つアプリケーションについて考えてみます。

<meta charset="utf-8">

これを実行したいというわけではありませんが、charsetmetaタグを削除する方法は次のとおりです。

constructor(private meta: Meta) {
  this.meta.removeTag('charset');
}

removeTagElementも同様ですが、文字列セレクターの代わりにHTMLTagElementを直接使用します。

これは同じ例ですが、ここでは最初にcharsetmetaタグ要素を取得します。

constructor(private meta: Meta) {
  const charsetTag = this.meta.getTag('charset');
  if (charsetTag) this.meta.removeTagElement(charsetTag);
}

どちらのアプローチでも、meta要素が削除されます。

結論

この記事では、AngularのMetaサービスを使用して、metaタグを取得、追加、更新、および削除する方法を学習しました。

ngrxを使用して宣言的に