かとのぼのマイコード・マイライフ

プログラミング初心者とアプリの個人開発者向けのブログ。たまに銭湯

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

この記事をシェアする

基礎から学ぶ Vue.js

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

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>

 

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

 

あわせて読みたい:

www.katonobo.com

 

 

 

これからはじめるVue.js実践入門