Edited at

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

More than 1 year has passed since last update.

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の中も読んでいると宣言していますが、どこまで正確に読まれているかの判断は難しいところです。

きちんと読み込まれている事例もいくつか見かけましたが、不安な方はご自身でいろいろ調べてみると良いでしょう。