nuxt.jsでvue-metaの使い方【SpaのSEO対策】

まず、個別ページにタイトルを設定しました。加筆していく予定です。

1 nuxtのvue-metaの使い方
- 1.1 タイトル + サイト名
- 1.2 h1タグとdata管理
2 nuxt.jsでSpaのSEO対策

nuxtのvue-metaの使い方

vue-headやvue-metaというプラグインがありますが、nuxtが公式で推奨しているのはvue-metaです。

nuxtにvue-metaの機能が最初から入っているからインストールすらいりません。

nuxt.confingのheadの設定をそのまま個別ページにコピペすると使えます。それだけでブラウザのタイトルが変わるはず。

ただ、vue-metaのリファレンスを見るとうまく動きません。書き方が少し違うため注意が必要です。metainfoではなくheadなのです。

export default {
  metainfo() {
    return {
      title: 'タイトル'
    }
  }
}

export default {
  head() {
    return {
      title: 'タイトル'
    }
  }
}

タイトル + サイト名

SEO対策の都合上、タイトルのサイト名を表記するのがよくあるパターンです。

export default {
  head: {
    titleTemplate: '%s - サイト名',
  }
}

個別ページはreturnで返す形でいけます。

export default {
  head() {
    return {
      title: 'ページ名'
    }
  }
}

h1タグとdata管理

タイトルはdata管理にし、headはtitle: this.titleとし、hタグを読み込みます。公式サイトにあるLocal Settingsの2つ目のコードがわかりやすいです。

Meta Tags and SEO

Nuxt lets you define all default meta tags for your application inside the nuxt.config.js file using the head property. This is very useful for adding a default...

nuxt.jsでSpaのSEO対策

そのあと、nuxt側でprerender-spa-pluginの導入、まだ奥の手として、サブドメインにWordPressをインストールする2本立てでSEO対策を考えています。spaはseoが弱いからssrがよいとよく言われますが、そのぶん開発コストがかかります。作り直しの労力はかなり重たいでしょう。

WordPressの方はFirebase直下にサブディレクトリにWPは入らないようなので、サブドメインでスターサーバーやエックスサーバーなどを借りて共有サーバーで運用する必要があります。エックスサーバーの方が管理画面は使いやすいですが、個人的にはリーズナブルなスターサーバーのスランダードプランがおすすめです。スタードメインと併用すると割引になります。詳しくはこちらの記事をみてください。