はじめに
この記事はLinkbal (リンクバル) Advent Calendar 2019の11日目の記事です。Vueの初心者のタンです。
今回は、弊社のプロダクションWebサイトにVueが導入されていますので。Vueに関する見識を最初から学んでいます。
ECサイトプロダクトを提供する弊社はSEO対策に特に気にしないといけないですから、今日は、SEO対策のためにVueのWebアプリケーションにNuxt.jsが必要になることを話したいと思います。
Vue.jsのWebアプリケーションでSEO対策が必要になる理由は？
普通のVue.jsでは、シングルページアプリケーション（Single Page Application : SPA）を簡単に作成しています。これは、もともと空のIndex.htmlというファイルが一つしかなくて、純粋にJavaScriptで生成されたアプリケーションです。
Webのコンテンツは JavaScriptが最初にロードされた後、サーバサイドから取り出されて、Index.htmlに書き込まれす。Webのルートの切り替えもJavaScriptもが処理します。
ほとんど、Webサイトランキングを失う理由はJavaScriptの不適切な処理のせいです。 実際に、SEOに関してフロントエンドフレームワークのようなVue.jsフレームワークには多くの問題があります。いくつかの以下問題です。
- 単一ページアプリケーション（SPA）フレームワークです。
- ページのロードスピードが遅い
- メタ、カノニカル、およびサイトマップを更新するのが難しい。
Nuxt.jsとは何でしょうか？
Nuxtは、最新のWebアプリケーションを作成するためのVue.jsに基づくプログレッシブフレームワークです。
Vue.js 2.0に加え、Vue-Router、Vue-Meta、Vuex（ストアオプションを使うときのみ）というライブラリをNuxt.jsにインクルードしています。Nuxt.jsの主なメリットはWebアプリケーションの非同期データ、ミドルウェア、ルーティングなどを管理することです。詳しくように https://nuxtjs.org/ を参考できます。
SEO対策になんでNuxt.jsは必要なのか??
###Nuxt.jsを採用すると、ユニバーサルアプリケーションを簡単に作成できます。
ユニバーサルアプリケーションは、Webサーバーにサイトコンテンツのデータをプリロードし、レンダリングされたHTMLをレスポンスとしてブラウザーにを返しすということです。
なので、SEOを改善し、ロードを高速化できるし、他の様々な利点を提供されます。
ユニバーサルアプリケーションでは、JavaScriptが読み込まれる前に、<head>や<title>、<meta>、<h1>、などのようなHTMLタグが事前にロードされて、コンテンツがページに表示されます。
これらのタグにより、クローラー(Googlebotなど)が正しくページの内容を評価できているよになります。
##VueのWebアプリケーションのすべてページをハンドルするNuxt.jsの方法
Nuxt.jsのVue-metaというライブラリは、Webアプリケーションの各ページの<head>要素を処理します。 ページはルートを表すNuxtの用語であり、各ページはページフォルダー内にあります。
####Nuxtでは、アプリケーションのページ内で<head>プロパティを定義する3つの方法を提供しています。
#####1. Vueファイルの全てページにデフォルトのメタを定義できます。
nuxt.config.js ファイル内にメタ情報を定義することは欠かせないです。
export default {
head: {
titleTemplate: '%s - Nuxt.js',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
{ hid: 'description', name: 'description', content: 'Meta description' }
]
}
}
<head> に設定できるオプション一覧は vue-meta のドキュメント を参照できます。
#####2. Vueファイルの静的ページにもメタ情報を定義できます。
現在のページの HTMLの<head> タグを定義するために head()メソッドを使う必要です。
ページのデータを使って独自のメタタグを定義することもできます。head()メソッド内で this変数を使ってデータを取り出すことができます。
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data () {
return {
title: 'Hello World!'
}
},
head () {
return {
title: this.title,
meta: [
{ hid: 'description', name: 'description', content: 'My custom description' }
]
}
}
}
</script>
####3. 動的ページのメタタグの設定
動的ページ（アクセスした時の状況に応じて異なる内容が表示されるWebページ）のメタタグを適当にカスタマイズできます。 ユーザープロファイルページはの一つの例です。
パラメータを使って動的なルーティングを定義するには .vue ファイル名またはディレクトリ名に アンダースコアのプレフィックス を付ける必要があります。
pages/
--| users/
-----| _id.vue
自動的に以下が生成されます:
router: {
routes: [{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
}]
}
静的ページのように動的ページで、head()メソッド内で this変数を使ってデータを取り出して、ページのメタタグを定義することもできます。
そのユーザープロフィールページのメタタグを以下のように定義します。
<script>
head () {
let user = this.user;
return {
title: `${user.fullName} @(${user.userName}) - Nuxt.js`,
meta: [{
hid: `iOSUrl`,
property: 'al:ios:url',
content: `myapp://user?screen_name=${user.userName}`
},
{
hid: `description`,
name: 'description',
content: `${user.fullName}'s public profile at Nuxt.js`
}]
}
}
</script>
####小さい注意点は hidのプロパティです：
Vue-metaを使用すると、元のタグを置き換えるのではなく、重複するタグが作成されます。 ただし、Webサイトをクロールするときにタグが重複しているとSEOルールに違反する可能性があるため、各メタタグに一意のhidプロパティを常に設定して、一意に識別することをお勧めします。 hidプロパティがあると、vue-metaがタグを複製する代わりにタグを置き換えるようにわかります。
hidプロパティやメタタグが重複などについてもっと詳しくように、こちらで参考できます。
終わりに
Nuxtでは、ユニバーサルアプリケーションでhead要素をレンダリングする方法を多く制御できます。これはSEO対策にに役立ちます。 nuxt.config.jsファイル内にグローバルデフォルトを定義するための多くのオプションがあり、さらに各ページのheadメソッドにアクセスして、カスタマイズすることができます。
上記はSEO対策にNuxt.jsのいくつかの利点を学んだ知識です。私のVueの初心者のような方を助けると望みます。
###参考した内容