Vue.js(SPA)でhead要素のtitleとdescriptionはページ別に設定しよう【SEO対策】

Vue.js(SPA)でサイトを作るときは、head要素をページごとにちゃんと設定しないと、グーグルの検索画面になかなか載らないため、対策が必要です。

SPAでサイトを作るとhead要素がページごと変化しない問題
Vue.jsでhead要素titleとdescriptionの変更する方法
規模が小さいサイトなら、各ページmounted

SPAでサイトを作るとhead要素がページごと変化しない問題

SPA（シングル・ページ・アプリケーション）は、その名前の通り、一つのHTMLのページで、まるで色々なページに切り替わっているように見せる技術です。ページの遷移も早く、作りやすいです。

しかし、実際はページが切り替わっていないため、別のページに移動しても、何も設定をしないとhead要素は変わらないままです。

これがとても問題で、ページごとにhead要素が変わるように対策をしないとグーグルの検索になかなか載ってくれません。

（かく言う私も、過去はこの対策を甘く見ていたため、検索での流入がほぼゼロで、おかしいなぁと呑気に不思議がっていました。）

つまり、SPAでグーグルなどの検索エンジンに載るためには、各ページごとにちゃんとheadのtitleとdescriptionを設定する必要があるのです。

Vue.jsでhead要素titleとdescriptionの変更する方法

head要素を変更する方法としては、ライブラリでは、vue-headを使うのが一般的のようです。

vue.jsでheadの要素を設定する時はvue-headが便利！ - 親バカエンジニアのナレッジ帳

ライブラリを使わずに実現することもでき、mountedやrouterを使う方法があるようです。

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

ある程度Vueの知識があればどれも実装はそこまで難しくありません。

ですが、結局、Vue.jsはJavascriptのフレームワークですから、Javascritpを使ってうまくやれると楽です。

規模が小さいサイトなら、各ページmounted

個人開発レベルなら、各ページでmountedを使って設定してしまうのが楽です。

上記のリンクで紹介されているJavascriptで上書きする方法を、Vue.jsのmounted内で書くことで、強引に書き換えてしまいます。

元のindex.htmlにはあらかじめ元となるタイトルと説明文を書いておいて、各ページは以下のようにhead要素のtitleとdescriptionを上書きします。

<script>
export default {
  mounted(){
    const title = "head要素のタイトル"
    const description = "説明文"
    document.title = title
    document.querySelector("meta[property='og:title']")
    　.setAttribute('content', title)
    document.querySelector("meta[name='description']")
    　.setAttribute('content', description)
    document.querySelector("meta[property='og:description']")
    　.setAttribute('content', description)
  }
}
</script>

これで各ページでタイトルと説明文を変更できました。