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

nuxt.jsのseo対策についてまとめていきます。とりあえずvue-metaを使うとよさそうです。必要に応じて加筆します。

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

nuxt.jsの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 - サイト名',
  },
  title: 'タイトル' || ''
}

個別ページは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...

topページはタイトルのみ表示、titleTemplateに小細工!

上記の方法で作るとトップページが – タイトル名になってしまうでしょう。

そのため小細工としてtitleTemplateを関数にします。returnに三項演算子。

回避策は次のとおり。

titleTemplate(title) {
　　return (title ? `${title} - ` : '') + 'タイトル'
},
title: '',

なおvue-metaの公式に解説があっただけです。

API Reference | Vue Meta

HTML Metadata manager for Vue.js

nuxt/contentのタイトル一括指定

_slug.vueで一括でmdのタイトル指定できます。

<div class="qa">
  <h2 class="help-title">{{ helps.title }}</h2>
</div>
<div class="qa-a">
  <nuxt-content :document="helps" />
 </div>

head() {
  return {
    title: this.helps.title
  }
}

nuxt/contentの記事はこちら!

vueでmdの読み込み5選(nuxt/contentの使い方)

nuxtでmdの読み込もうとしたら、いろいろでてきたため、めもしておきます。最終的に@nuxt/contentを採用しました。nuxtでmdの読み込み比較ぐぐったらいろいろとでてきました。rontmatter-ma...

【vue.jsのSEO対策】nuxt.jsでSpa

デプロイする

vue-metaだけで大丈夫なのでしょうか。

試しにデプロイしてみました。

site:URL

で検索します。結果が[ Google Search Consoleをお試しください ]と表示されたらまだインデックスされていません。すぐindexされないのは当然なので、そのまま寝かすことにしました。

ただ、Google Search Consoleに登録してサチコからアプローチすることにしました。

Google Search Consoleの登録
ブログなどを運営していたら外部から被リンクを送ります(noteやtwitterもありです)。

デプロイから何日か経つ

Google Search Consoleに登録したら、10日後にトップページがindexされていることを確認しました(優先度が低く確認が遅れたため、もう少し早くindexされていたかもしれません)

ただ、トップページのみindexだったのです。

シングルページアプリケーショという名前のとおり、トップページしかインディックスされない😅

Google Search Consoleで「インデックス登録をリクエスト」

googleはspaにも対応しているという情報も結構あったため、

indexが遅いだけなのかもと仮定して

Google Search Consoleで「インデックス登録をリクエスト」をしました。

Urlを登録するだけです。しばらく寝かします。

サイト名で「ページのインデックス登録」の問題が新たに検出されました

しばらくすると、インデックスされるのではなく、

Googleさんから「サイト名で「ページのインデックス登録」の問題が新たに検出されました」というメールをもらいました。詳細を確認すると次のようになっています。

robots.txtによるブロックをテスト

アカウントにないプロパティ
現在、sc-domain:// を表示するための確認が完了していますが、そのサイトがアカウントにありません。

サイトマップを送信するとかそういう次元の話ではなく、そもそもダメっぽいなという感じになりました。。

prerender-spa-pluginとダイナミックレンダリングの違い

奥の手として残していたのが、prerender-spa-pluginの導入とダイナミックレンダリングです。

nuxt使ってprerender-spa-plugin導入うまく行ってそう😶
目的がSEOだけならSSRする必要なさそうだと、この前のフロントエンド勉強会で教えてもらった
— gatapon (@rinonkia) August 24, 2019

prerender-spa-pluginとダイナミックレンダリングはどちらがいいのでしょうか。

その違いは解説しているサイトはあまりなかったのですが、日本語は1つの記事だけヒットしました(あとは英語や中国語)。

対応するページが少なければPrerender-SPA-Plugin等を使ってビルド時に全ページ出力するのが早いが、ここではCGM/UGCのようにページ数増加が激しいサイトを想定する。
結論ダイナミックレンダリングする。Googleが公式に認める方法なのでクローキングに当たる心配も無さそう。
https://qiita.com/geerpm/items/78e2b85dca3cb698e98d

対応するページが少なければPrerender-SPA-Plugin、対応するページが多ければダイナミックレンダリングのようです。とりあえず、Prerender-SPA-Pluginにしようかなという気がしています。

spaはseoが弱いからssrがよいとよく言われますが、そのぶん開発コストがかかります。作り直しの労力はかなり重たいでしょう。もともとサーバーエンジニアの人はそんなに大変じゃないといいそうですが、フロントよりの人は悩むかもしれません。

レンダリングの解説は英語でよければ、Googleの記事をみるとよいでしょう。メリットとデメリットの表が特に参考になります。

SSRとSPAとかSSGといろんな手法のメリデメがまとまってる。。すごい。。( ﾟдﾟ)!

“Rendering on the Web – Web上のレンダリング | Web | Google Developers” https://t.co/Ct6rUEhhuS #readlater #feedly pic.twitter.com/Taj7aw0Osl
— きらぷか@積読&スプシAPI化のサービス運営中🔥 (@kira_puka) June 21, 2019