2019-08-31に更新

Vue.js(SPA)でhead要素のtitleとdescriptionはページ別に設定しないとグーグル検索になかなか載らないから対策しよう

Vue

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

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

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

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

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

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

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

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

Vue.jsで、head要素を変更する方法としては「vue-head」というのを使うのが一般的のようです。
vue.jsでheadの要素を設定する時はvue-headが便利!

ライブラリを使わずに実現することもでき、mountedやrouterを使う方法があるようです。
【Vue.js】titleタグやmetaタグ(description)を書き換える方法【vue-router】

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

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

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

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

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

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

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)
  }
}

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

宣伝
ブログ書いています!ブログ
Vue初心者向けのサンプルコード集作っています サイト

Originally published at www.katonobo.com

かとのぼ

webサービス開発者/IT/バックパッカー/ 運営サービス→Ameneko Diary(あめねこダイアリー)/あめねこサンプルコード集

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント