NUXT.JS 入門 #7 – NUXT.JS と SEO 設定

Nuxt.js を利用したWebアプリケーション開発の手法を紹介していきます。
第七回目は Nuxt.js のアプリケーションにおける SEOの設定手法を紹介していきます。

Nuxt.js では 静的吐き出しのコマンドを用いて、 SPA アプリケーションの各ページを静的に吐き出すことが出来ます。

$ npm run generate

通常SPAのページ構成では、SPA 内ページそれぞれにHTMLの実態を持たないため、サーバ側で単一の index.html に転送するなどしてアプリケーションを動作させる必要があり、SEO 的にもデメリットが大きくなります。

Nuxt の 静的吐き出しコマンドで全てのページのHTML書き出しを行えば、各ページごとに SEO 向けの head 要素を定義できるほか、 SPA のページ遷移状態を途中から復元することもでき、ユーザ

グローバルのSEO 設定

nuxt.config.js 内の head エントリで、head 内で使用するメタ情報を定義することが出来ます。

module.exports = {
  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' }
    ]
  }
}

メタ情報の設定には、vue-meta が使用されており、詳細な使用方法については以下のドキュメントを参照する事が出来ます。

GitHub – declandewet/vue-meta: Manage page meta info in Vue 2.0 components. SSR + Streaming supported.

head.title は title要素で使用する文字列を、
head.meta は配列形式で、 meta 要素の情報を指定する事ができます。

titleTemplate は title要素で使用する文字列テンプレートを指定します。
titleTemplate を使用する事で、head.title にて指定した文字列を利用して、title 要素の表現をカスタマイズすることが出来ます。
titleTemplate 内では、 %s を使用して、タイトル文字列の プレースホルダを指定できる他、関数を利用して複雑な表現を用いることも出来ます。

titleTemplate: (titleChunk) => {
  // If undefined or blank then we don't need the hyphen
  return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}

ページ単位

ページコンポーネント内でも head エントリを用いて、ページ固有のメタ情報を指定する事も出来ます。

<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>

ページコンポーネント内では、ページ固有のメタ情報を指定できる他、ページコンポーネント内の変数にthis を用いてアクセスすることも出来ます。

title の値は ページコンポーネント内で指定することにより上書きする事が可能ですが、
配列形式で指定するmeta 情報は、自動的にグローバル設定を上書きすることが出来ません。

このため、hid プロパティを用いてユニーク識別子を指定し、メタ情報の重複を避ける必要があります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です