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

プログラミング学習

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

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の公式に解説があっただけです。

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.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の導入とダイナミックレンダリングです。

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の記事をみるとよいでしょう。メリットとデメリットの表が特に参考になります。

index調査:「Google Search Consoleをお試しください

他にはサブドメインにWordPressをインストールする2本立てでSEO対策を考えています。

WordPressの方はFirebase直下にサブディレクトリにWPは入らないようなので、サブドメインでスターサーバーやエックスサーバーなどを借りて共有サーバーで運用する必要があります。レンタルサーバーの詳細は、こちらの記事をみてください。

ご参考になれば幸いです。

コメント

タイトルとURLをコピーしました