Vue.jsでページごとにhead,meta,titleを変える方法

皆さん、すべてのページでタイトルを同じにすると検索に引っかかりにくいってご存じですか？

他にも、サイトを作る際にパンくずリストを作っておくと、Googleロボットが認識しやすいだとか。

あまりSEOには詳しくないのですが、ここらへんの基礎知識には対応させた方が良いと考えているので、今回はタイトルの通り、ページごとにhead,meta,titleを変えていくパッケージをご紹介したいと思います。

その名もvue-headです！

説明はこの辺にしておいて、解説していきます。

#パッケージのインストール#

まずはvue-headをインストールします。

npm i vue-head --save

#パッケージをインポート#

次に、main.jsにて以下のように記述します。

main.js

import Vue from 'vue'
import VueHead from 'vue-head'

Vue.use(VueHead)

そしたら、後はコンポーネントにて好きなように設定していくだけ！

App.vue

<script>
export default{
  head: {
    title: {
      inner: 'グーグル',
      separater: ' | ',
      complement: '会員登録'
    },
    // グーグルリキャプチャのAPI取得
    script: [
      {
        type: 'text/javascript',
        src: 'https://www.google.com/recaptcha/api.js?render=' + process.env.VUE_APP_SITE_KEY,
        async: true
      }
    ]
  },
}
</script>

ただし、ここで注意してほしいのがscriptタグはnuxt.jsやvue-routerでページ遷移する際にここで読み込まれたスクリプトファイルがそのまま残ってしまいます。

画面自体に影響がなければ良いのですが、例えば「Google reCAPTCHA」では画面右下にロゴマークが出てしまうなど邪魔になる場合があります。

その時は、window.location.hrefなどを設定することで、この問題を解消することができます。

以下にその例を挙げます。

App.vue

<script>
export default{
  beforeRouteLeave(to, from, next) {
      window.location.href = to.path
  }
}
</script>

このようにすることで、スクリプトタグを次のページに持ち込まないようにしました。

ただ、このやり方はいかがなものかなと思います。

恐らくやり方としては適切な形ではないので、悪魔で参考程度に知っておいてください。

他のやり方を知っている方は、ぜひコメント欄にてご教示お願いします。

以上、「Vue.jsでページごとにhead,meta,titleを変える方法」でした！

良かったら、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading