Help us understand the problem. What is going on with this article?

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

 はじめに

この記事は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の初心者のような方を助けると望みます。

参考した内容

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした