Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。
今回はコーポレートサイトを想定して作成していきます。
※記事が長くなったのでチュートリアルを分割しました。
目次
前提
- タスクは
npm scriptsで一限管理 - コマンドは
yarnを使用 -
vue-cliのwebpack-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に記述しましょう。
<!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に追記します。
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に設定しましょう。
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に記述しているものをそのまま出すようにしています。
その他のページは区切り文字を出したいので以下のように記述します。
２つの違いは、indexにはtitleの記述をせず、その他のページはtitleを記述してそのページタイトルを追加するようになっています。
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
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の中も読んでいると宣言していますが、どこまで正確に読まれているかの判断は難しいところです。
きちんと読み込まれている事例もいくつか見かけましたが、不安な方はご自身でいろいろ調べてみると良いでしょう。