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つ目のコードがわかりやすいです。

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の導入とダイナミックレンダリングです。
nuxt使ってprerender-spa-plugin導入うまく行ってそう😶
— gatapon (@rinonkia) August 24, 2019
目的がSEOだけならSSRする必要なさそうだと、この前のフロントエンド勉強会で教えてもらった
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といろんな手法のメリデメがまとまってる。。すごい。。( ゚д゚)!
— きらぷか@積読&スプシAPI化のサービス運営中🔥 (@kira_puka) June 21, 2019
“Rendering on the Web – Web上のレンダリング | Web | Google Developers” https://t.co/Ct6rUEhhuS #readlater #feedly pic.twitter.com/Taj7aw0Osl
index調査:「Google Search Consoleをお試しください
他にはサブドメインにWordPressをインストールする2本立てでSEO対策を考えています。
WordPressの方はFirebase直下にサブディレクトリにWPは入らないようなので、サブドメインでスターサーバーやエックスサーバーなどを借りて共有サーバーで運用する必要があります。レンタルサーバーの詳細は、こちらの記事をみてください。
ご参考になれば幸いです。
コメント