Vue.jsでSPAサイトを作成するチュートリアル【7. メタ編】

Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。
今回はコーポレートサイトを想定して作成していきます。
※記事が長くなったのでチュートリアルを分割しました。

目次

前提

  • タスクはnpm scriptsで一限管理
  • コマンドはyarnを使用
  • vue-cliwebpack-simpleを使用

バージョン

  • "vue": "^2.5.11"
  • "webpack": "^3.6.0"

はじめに

メタは画面には表示されないので、うっかり忘れがちです。
SEO対策をしたいのであれば、しっかりと記述しましょう。

head内に記述するメタはいろいろありますが、全ページ共通と個別で扱うものに分かれます。
以下にまとめられているので参考にしながら、全ページ共通はindex.htmlへ、個別で扱うものはVue.js側に記述していきましょう。

参考:サイトに埋め込まれたHTMLのmetaタグ(メタタグ)のまとめ
参考:もうmeta要素を迷わない!最低限入れるべきmeta要素のまとめ

全ページ共通

  • charset
  • viewport
  • format-detection
  • robots

全ページ共通は上記を設定しておくと良いと思います。
index.htmlに記述しましょう。

/src/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <title>vue-skeleton</title>
    <meta name="robots" content="noindex,nofollow">
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/bundle.js"></script>
  </body>
</html>

ページ固有

  • title
  • description
  • og:title
  • og:description
  • og:type
  • og:url
  • og:image
  • twitter:card

上記をページごとに設定するためにvue-headを使います。
vue-headを追加します。

$ yarn add vue-head

続いてmain.jsに追記します。

/src/main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Routes from './router.js'
import VueHead from 'vue-head' // ← 追記
import BodyClass from 'vue-body-class'
import VueMatchHeights from 'vue-match-heights'
import VueSmoothscroll from 'vue-smoothscroll'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: Routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

// ↓ 追記
Vue.use(VueHead, {
  separator: ' | '
})
// ↑ 追記
Vue.use(BodyClass, router)

Vue.use(VueMatchHeights)
Vue.use(VueSmoothscroll)

const app = new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
console.log(app)

separatorで区切り文字を設定できます。

indexに設定しましょう。

/src/pages/Index/Index.js
import IndexSwiper from '../../components/IndexSwiper/IndexSwiper.vue'

export default {
  components: {
    IndexSwiper
  },
  data: function () {
    return {
      text: 'index'
    }
  },
  head: {
    meta: [
      { name: 'description', content: 'ここにトップページの説明文が入ります。' },
      { property: 'og:title', content: 'トップページ' },
      { property: 'og:description', content: 'ここにトップページの説明文が入ります。' },
      { property: 'og:type', content: 'website' },
      { property: 'og:url', content: 'https://example.com' },
      { property: 'og:image', content: 'https://example.com/img/og.png' },
      { name: 'twitter:card', content: 'summary' }
    ]
  }
}

indexはindex.htmlのtitleに記述しているものをそのまま出すようにしています。
その他のページは区切り文字を出したいので以下のように記述します。
2つの違いは、indexにはtitleの記述をせず、その他のページはtitleを記述してそのページタイトルを追加するようになっています。

/src/pages/About/About.js
export default {
  data: function () {
    return {
      title: '会社概要',
      text: 'about'
    }
  },
  head: {
    title: function () {
      return {
        inner: this.title
      }
    },
    meta: [
      { name: 'description', content: 'ここに会社概要の説明文が入ります。' },
      { property: 'og:title', content: '会社概要' },
      { property: 'og:description', content: 'ここに会社概要の説明文が入ります。' },
      { property: 'og:type', content: 'website' },
      { property: 'og:url', content: 'https://example.com/about/' },
      { property: 'og:image', content: 'https://example.com/img/og.png' },
      { name: 'twitter:card', content: 'summary' }
    ]
  }
}

indexが「vue-skeleton」
aboutが「会社概要 | vue-skeleton」
になっていれば成功です。
他のページもaboutと同じように記述しましょう。

Google Analytics

Google Analyticsは以下で動作するようです。

※最終確認していないので自己責任で導入してください。

$ yarn add vue-analytics
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Routes from './router.js'
import VueHead from 'vue-head'
import VueAnalytics from 'vue-analytics' // ← 追加
import BodyClass from 'vue-body-class'
import VueMatchHeights from 'vue-match-heights'
import VueSmoothscroll from 'vue-smoothscroll'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: Routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

Vue.use(VueHead, {
  separator: ' | '
})
// ↓ 追加
Vue.use(VueAnalytics, {
  id: 'UA-70413829-1',
  router
})
// ↑ 追加
Vue.use(BodyClass, router)

// 省略

参考:Vue-SPAでもGoogle Analyticsしたい!
参考:vue-analytics
参考:Page tracking

まとめ

以上で設定は終わりですが、忘れてはいけないのは今回はVue.js(JavaScript)で設定しています。
GoogleはJavaScriptの中も読んでいると宣言していますが、どこまで正確に読まれているかの判断は難しいところです。
きちんと読み込まれている事例もいくつか見かけましたが、不安な方はご自身でいろいろ調べてみると良いでしょう。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.