SEOのためにNuxt.jsのVue-metaを導入方法について。

##  はじめに
この記事は[Linkbal (リンクバル) Advent Calendar 2019](https://qiita.com/advent-calendar/2019/linkbal)の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/](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` ファイル内にメタ情報を定義することは欠かせないです。


```javascript: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 のドキュメント](https://vue-meta.nuxtjs.org/api/#metainfo-properties) を参照できます。

#####2. Vueファイルの静的ページにもメタ情報を定義できます。
現在のページの HTMLの`<head>` タグを定義するために `head()`メソッドを使う必要です。
ページのデータを使って独自のメタタグを定義することもできます。`head()`メソッド内で `this`変数を使ってデータを取り出すことができます。

```pages/index.vue
<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 ファイル名またはディレクトリ名に アンダースコアのプレフィックス を付ける必要があります。


```javascript
pages/
--| users/
-----| _id.vue
```

自動的に以下が生成されます:

```javascript:router.js
router: {
  routes: [{
    name: 'users-id',
    path: '/users/:id?',
    component: 'pages/users/_id.vue'
  }]
}
```
静的ページのように動的ページで、`head()`メソッド内で `this`変数を使ってデータを取り出して、ページのメタタグを定義することもできます。
そのユーザープロフィールページのメタタグを以下のように定義します。

```pages/users/_id.vue

<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`プロパティや`メタタグが重複`などについてもっと詳しくように、[こちらで](https://nuxtjs.org/faq/duplicated-meta-tags/)参考できます。


### 終わりに
Nuxtでは、ユニバーサルアプリケーションで`head`要素をレンダリングする方法を多く制御できます。これはSEO対策にに役立ちます。 nuxt.config.jsファイル内にグローバルデフォルトを定義するための多くのオプションがあり、さらに各ページのheadメソッドにアクセスして、カスタマイズすることができます。 

上記はSEO対策にNuxt.jsのいくつかの利点を学んだ知識です。私のVueの初心者のような方を助けると望みます。


###参考した内容
- [https://nuxtjs.org/](https://nuxtjs.org/)
- [https://medium.com/vue-mastery/best-practices-for-nuxt-js-seo](https://medium.com/vue-mastery/best-practices-for-nuxt-js-seo-32399c49b2e5)
- [https://www.webprofessional.jp/nuxt-js-universal-vue-js/](https://www.webprofessional.jp/nuxt-js-universal-vue-js/)
- [https://www.google.co.jp/amp/s/mtame.jp/marketing_foundation/seo_merits_and_effects](https://www.google.co.jp/amp/s/mtame.jp/marketing_foundation/seo_merits_and_effects%3fmode=amp)