【Vue.js】titleタグやmetaタグ(description)を書き換える方法【vue-router】

【Vue.js】titleタグやmetaタグ(description)を書き換える方法【vue-rouetr】

ここではVue.jsを使ったアプリケーションで、ページタイトルやmetaタグのdescriptionを動的に変更する方法を解説します。
titleタグやdescriptionはSEOで最も基本かつ重要なポイントの一つで、ページごとに変えることによってより検索結果にも引っかかりやすくなるという利点がありますし、SNSシェアの際に必要不可欠な「og:title」などの書き換えも同様の方法で可能ですので、ぜひ実装してみて下さい。

目次

2つの方法
titleとdescriptionの書き換え方法
その1 コンポーネントで書き換える方法
その2 vue-routerを使って書き換える方法

2つの方法

Vue.jsを使ったアプリケーションの場合、ページタイトルやmetaタグのdescriptionを動的に変更する方法は大きく2つあります。
一つ目は各コンポーネントのmounted(ライフサイクルの一つ)で書き換える方法です。
もう一つはvue-routerのメタフィールドを使って書き換える方法です。

各コンポーネントのmountedで書き換える方法がある

vue-routerのメタフィールドを使って書き換える方法がある

titleとdescriptionの書き換え方法

それぞれ2つの方法を見る前に、javascriptでどのようにしてtitleタグやmetaタグを書き換えるのかを見ていきましょう。

titleタグの書き換え方法

titleタグにjavascriptでアクセスするにはdocument.titleを使います。
これを上書きしてあげればいいので、「document.title = "変化後のタイトル"」としましょう。

// 上書き
document.title = "書き換えたいタイトル"

metaタグの書き換え方法

metaタグのdescriptionをjavascriptで書き換えるには以下のようにします。

document.querySelector("meta[property='description']").setAttribute('content', "書き換えたい説明")

metaタグにアクセスするためにはdocument.querySelector()を使います。
ただmetaタグはdescription以外のいくつかあるので、descriptionを指定するためにproperty='description'としてあげましょう。
最後に、setAttribute('content', "書き換えたい説明")で内容を書き換えます。

もともとmetaタグのdescriptionが存在しない場合は、上記の実装をしたとしても新しく作成されることはないので、あらかじめ用意しておく必要があることに注意しましょう。

あらかじめmetaタグのdescriptionを用意しておく必要がある

その1 コンポーネントで書き換える方法

では本題のtitleタグやmetaタグ(description)を書き換える実装を見ていきましょう。
まずはコンポーネントごとに書き換える方法です。

メリット・デメリット

各コンポーネントで書き換える方法は、コンポーネント内での実装のため、titleタグとコンポーネントとの結びつきが分かりやすくなります。
あるページのtitleを修正したいと思った時には、そのページを動かしているコンポーネントを探せばいいので、修正も楽になります。
一方で、必要なコンポーネント全てに記述しなければならないため、実装量も多くなり、全体的な見直しが入った時には一苦労するかもしれません。

コンポーネントとの結びつきが分かりやすくなる

実装量も多くなるので注意が必要

実装方法

実際の実装を見ていきましょう。
例として、TODOアプリを開発した場合を挙げます。
このTODOアプリには一覧画面と登録画面と詳細画面の3つがあったとします。
(例なのでテンプレートなどは必要最小限の記述に留めています。)

各コンポーネントは以下のようになり、それぞれのコンポーネントのmounted中でtitleタグやmetaタグを変更しています。

Vue.component('list',{
	template: '<div>一覧画面</div>',
	mounted: function(){
		document.title = "TODOアプリ 一覧画面";
		document.querySelector("meta[property='description']").setAttribute('content', "TODOアプリの一覧画面です。TODOのリストを確認できます。")
	}
})

Vue.component('regist',{
	template: '<div>登録画面</div>',
	mounted: function(){
		document.title = "TODOアプリ 登録画面";
		document.querySelector("meta[property='description']").setAttribute('content', "TODOアプリの登録画面です。TODOのリストを登録できます。")
	}
});

Vue.component('detail',{
	template: '<div>詳細画面</div>',
	mounted: function(){
		document.title = "TODOアプリ 詳細画面";
		document.querySelector("meta[property='description']").setAttribute('content', "TODOアプリの詳細画面です。TODOの詳細を確認できます。")
	}
});

こうすることで、一覧画面を表示した時は、一覧画面用のタイトルと説明が反映されます。

各コンポーネントのmountedに実装する

その2 vue-routerを使って書き換える方法

最後にvue-routerのメタフィールドを使って書き換える方法を解説します。

メリット・デメリット

vue-routerのメタフィールドを使うことで実装は一箇所にまとめることができます。

ナビゲーションガード | Vue Router

デメリットは、そもそもvue-routerの導入が必要であることに加えて、routesオブジェクトのメタフィールドにタイトルやdescriptionの定義を記述する必要がある点です。
routesオブジェクトのメタフィールドについては以下のページを参照してください。

ルートメタフィールド | Vue Router

実装方法

先程同様にTODOアプリケーションを例にします。(vue-routerの導入方法については省略します。)
vue-routerの設定をしていきましょう。
まずはroutesオブジェクトの作成です。

const routes = [
  
  // 一覧画面
  { path: '/list', component: List , meta: { title: 'TODOアプリ　一覧画面', desc: 'TODOアプリの一覧画面です。TODOのリストを確認できます。' }},

  // 登録画面
  { path: '/regist', component: Regist , meta: { title: 'TODOアプリ　登録画面', desc: 'TODOアプリの登録画面です。TODOのリストを登録できます。' }},

  // 詳細画面
  { path: '/detail', component: Detail , meta: { title: 'TODOアプリ　詳細画面', desc: 'TODOアプリの一覧画面です。TODOの詳細を確認できます。' }},
]

それぞれにメタフィールドを用意しました。
続いて共通コンポーネント、例えばApp.vueコンポーネントに以下のメソッドを用意します。

  methods : {
  	createPageTitle : function(to){
		 // タイトルを設定
		if(to.meta.title){
			var setTitle = to.meta.title + ' | SourceAcademy';
			document.title = setTitle;
		} else {
			document.title = 'SourceAcademy'
		}

		// メタタグdescription設定
		if(to.meta.desc){
			var setDesc = to.meta.desc + ' | SourceAcademy';
			document.querySelector("meta[name='description']").setAttribute('content', setDesc)
		} else {
			document.querySelector("meta[name='description']").setAttribute('content', 'SourceAcademy')
		}
  	} 
  },

引数の「to」には遷移先のルートオブジェクトが入っています。
例えば、一覧画面を表示した時(正確には表示しようとした時)には以下のルートオブジェクトが「to」に入っていることになります。

{ path: '/list', component: List , meta: { title: 'TODOアプリ　一覧画面', desc: 'TODOアプリの一覧画面です。TODOのリストを確認できます。' }}

to.metaでルートオブジェクトのメタフィールドにアクセスできる

上記の実装では、このルートオブジェクトのメタフィールドにアクセスして、titleやdescが含まれていればそれを設定して、含まれていなければ特定の文字列を設定するようにしています。
続いて、共通コンポーネントでこのメソッドを呼び出します。呼び出すタイミングはmountedとルートが変更された時(watch)です。以下の内容をメソッドを定義しているコンポーネントに追加します。

  mounted : function(){
      var to = this.$route;
      this.createPageTitle(to);
  },
  watch: { 
      '$route' (to, from) {
          this.createPageTitle(to);
      }
  }

これで画面を開いたときや、ルート変更時にメタフィールドに設定されているタイトルなども同時に変更されます。
vue-routerのbeforeEachを使った実装も可能ですが、beforeEachは最初に画面を開いた時には呼ばれないので、その点の考慮が必要になります。

以上で、Vue.jsを使ったアプリケーションで、ページタイトルやmetaタグのdescriptionを動的に変更する方法の解説を終わります。