【ブログサイト開発其の6】
Nuxt.jsによるSEO設定

どうも！こんにちは！

ブログサイト開発の連載で其の6になります。

前回は、Nuxtにおける下層ページの作成やエラーページの作成を書いていきました。

前回の其の5までで、トップページや下層ページは作成することができましたので、
ブログサイトに必要なページ群は出来上がっているかと思います。

今回は、ブログサイトに必要なページは出来上がっている前提となりますが、
NuxtでSEO対策をする場合の設定を書いていきたいと思います。

私はこのSEO対策は最重要だと思っており、このサイトをリリースした数週間は検索にヒットしなかったり、
クローラーに無視されたりして悲しかったです。笑

私のように悲しい思いをしないため、リリース前にSEO対策を行ってからリリースしましょう。

それではスタートです！

Nuxtでのmeta設定

Nuxtでmetaの設定をするには大きく2つのパターンがあります。

• ・nuxt.config.jsにページ全体のmeta設定を記述する
• ・ページのvueファイル内に各ページのmeta設定を記述する

ただ主に、nuxt.config.jsに全ページで共通の設定を行い、個別にVueファイル内で設定をするという形が多いと思います。

まずは全ページに共通の設定をするために、nuxt.config.jsを編集していきましょう。

nuxt.config.js

nuxt.config.jsのmeta設定は、headオブジェクトに記述する形になり初期では以下のようになっています。

// nuxt.config.js
head: {
 title: process.env.npm_package_name || '',
 meta: [
  { charset: 'utf-8' },
  { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  { hid: 'description', name: 'description', content: process.env.npm_package_description || '', },
 ],
 link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},

こちらを一つづつ見ていきたいと思います。

title

ページタイトルに当たるtitleは以下のような記述になっています。

title: process.env.npm_package_name || '',

この、process.env.npm_package_nameは、package.jsonのnameから取られてきます。

package.jsonのnameはNuxtインストール時に任意で設定したプロジェクト名です。

今回タイトルは、
「タイトル | はくもぐブログ」
という形よくある形で統一していきます。

また、タイトルは各ページ違いますので、各ページのタイトルが変更できるように動的にする必要があります。

ここで、titleTemplateを使用します。

titleTemplateは各ページで設定するtitleを受け取ることができるため、
ページごとにtitleを設定していれば、
「ここにページタイトル | はくもぐブログ」
と表示され、

titleがなかったら、
「はくもぐブログ」
だけが表示されるように実装します。

// nuxt.config.js
titleTemplate(title) {
 return (title ? `${title} | ` : '') + 'ぱくもぐブログ'
},

例えば、下層ページ「pages/about.vue」があった場合、about.vue内で以下のように設定すると、

// pages/about.vue
export default {
 head() {
  return {
   title: 'アバウトページ',
  },
 }
}

「アバウトページ | はくもぐブログ」
という風に表示されます。

もちろん、titleがなかった場合は、「はくもぐブログ」のみが表示されます。

これでタイトルの設定は終了です！

description

次にdescriptionを設定していきます。

// nuxt.config.js
head: {
 title: process.env.npm_package_name || '',
 meta: [
  { charset: 'utf-8' },
  { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  { hid: 'description', name: 'description', content: process.env.npm_package_description || '', },
 ],
 link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},

descriptionはmetaオブジェクトにある、hid内のcontentで記述されています。

hidが、'description'となっていますが、hidは各ページでdescriptionを上書きするための識別子になります。

先程の、下層ページ「pages/about.vue」で、

// pages/about.vue
export default {
 head() {
  return {
   title: 'アバウトページ',
   meta: [
    {
     hid: 'description',
     name: 'description',
     content: 'ここはアバウトページになります。',
    }
   ]
  },
 }
}

上記の記述を行うことにより、about.vueのdescriptionを個別に設定することができます。

content: process.env.npm_package_description || ''

は先程のタイトルと同じように、package.jsonのdescriptionから取られてきます。

他のmetaも同じように設定することができますので、これを応用して設定していきましょう。

他のmeta設定

先に私が記述している内容を記載します。

// nuxt.config.js
head: {
 titleTemplate(title) {
  return (title ? `${title} | ` : '') + 'ここにサイトタイトル'
 },
 meta: [
  { charset: 'utf-8' },
  { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  { hid: 'description', name: 'description', content: 'ここにディスクリプション。', },
  { hid: 'og:site_name', property: 'og:site_name', content: 'ここにサイトタイトル', },
  { hid: 'og:type', property: 'og:type', content: 'article' },
  { hid: 'og:url', property: 'og:url', content: 'https://ここにサイトアドレス' },
  { hid: 'og:title', property: 'og:title', content: 'ここにサイトタイトル', },
  { hid: 'og:description', property: 'og:description', content: 'ここにディスクリプション。', },
  { hid: 'og:image', property: 'og:image', content: 'https://ここにogp画像への絶対パス' },
  { hid: 'og:locale', content: 'ja_jp' },
  { name: 'twitter:card', content: 'summary' },
  { name: 'twitter:site', content: '@ここにサイトタイトル' },
 ],
 link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico', },
  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Raleway&display=swap', },
 ],
},

このようにog系のmetaも書くことができました。

また、各ページには、

// pages/about.vue
export default {
 head() {
  return {
   title: 'アバウトページ',
   meta: [
    {
     hid: 'description',
     name: 'description',
     content: 'ここはアバウトページになります。',
    },
    {
     hid: 'og:description',
     property: 'og:description',
     content: `ここはアバウトページのog:description設定`,
    },
   ]
  },
 }
}

という感じに、各ページ個別で設定したものだけを上書きすることが可能です。

もちろん各ページに個別で設定しなかった場合は、nuxt.config.jsに記述した内容が表示されます。

metaタグ以外

今はmetaタグを設定していますが、同じようにhead内に外部のプラグインを読み込ませたりする場合もあるかもしれません。

実際私は、Googleフォントを読み込ませているのですが、その場合は、

// nuxt.config.js
head: {
 titleTemplate(title) {
  return (title ? `${title} | ` : '') + 'ここにサイトタイトル'
 },
 meta: [
  // 省略〜〜〜
 ],
 link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico', },
  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Raleway&display=swap', },
 ],
},

nuxt.config.jsのheadオブジェクトにlinkを追加し、そこにcssもしくはjsの読み込みを記述してあげればOKです！

私の記述で言うと、Googleフォントを読み込ませているのは以下の部分になります。

{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Raleway&display=swap', },

metaタグとtitleタグ

metaタグとtitleタグは、SEOにおいて重要になります。

検索した際に、

• ・titleタグは検索結果の見出しとして表示
• ・metaタグのdescriptionは検索結果の説明テキストとして表示

されます。

また、og系はSNSなどでサイトアドレスを貼り付けた際に出る画像や説明文になり、SNSはマーケティングで今は最重要ですので、絶対設定するようにしましょう！

参考
Nuxt.jsのhead内にSEOに必要なmeta情報を追加する
metaタグとは？SEO対策に重要な6つのmetaタグと最適な書き方

次回

これでSEO対策もできました！

各ページの生成やSEO対策が整ってきていると思いますので、次回はmicorCMSに記事データを登録して、
Nuxtから呼び出し表示をさせるをやってみようと思います。

それでは次回もゆたしく～～