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

はじめに

この記事は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 ファイル内にメタ情報を定義することは欠かせないです。

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変数を使ってデータを取り出すことができます。

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

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

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

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プロパティやメタタグが重複などについてもっと詳しくように、こちらで参考できます。

終わりに

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

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

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