【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

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

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

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

回避策は次のとおり。

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

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

API Reference | 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の記事はこちら!

404 NOT FOUND | ebookbrain

【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

SSRの存在意義を勘違いしてた。
SSRの目的はSEO対策だけじゃない。

SPAにOGP設定をしたいだけならprerender-spa-pluginで十分だし、Nuxt.jsにはデフォで備わってる。

そんで、npm run generateの結果はprerender-spa-pluginと同じなんだと。https://t.co/YfxeAxSndP
— すいかメガネ@iOS Developer (@noby111) June 25, 2020

npm run generateはssr用のコマンドです。

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

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

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

プリレンダリングにもデメリットがあります。

頻繁に更新されるタイプのコンテンツ
何千ものルートがあるケース
https://greative.jp/page/guidebook-spa-ssss-2/

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

上記は英語ですが、ちょうどこの部分を解説した本を持っていました。そのため、あわせて読書しました。1章から解説されています。

中級者以上がターゲットのようですが、中身的には読みやすくよい気がします。

みんなのVue.js

著:野田陽平, 著:門脇恒平, 著:山田敬美, 著:高橋和樹, 著:藤川淳史, 著:韓徹

¥2,383 （2022/06/27 18:15時点 | Amazon調べ）

Amazon

楽天市場

Yahooショッピング

ポチップ

SSG、ダイナミックレンダリング、SSRの比較

	プリレンダリングSSG	ダイナミックレンダリング	SSR
実装方法	Prerender-SPA-Plugin	prerender.io Rendertron rendoraなど
コスト	少ない	多い	移植：多いサーバー：高い

prerender.io
https://prerender.io/
Rendertron
https://github.com/GoogleChrome/rendertron
rendora
https://github.com/rendora/rendora

ダイナミックレンダリングでは SSR とは異なり既存のコードの変更は不要です。
クローラからのリクエストを、Puppeteer などのミドルウェアに回してレンダリングさせるという処理のためのコードは作成しなければなりませんが、今使っている JavaScript のコード自体には手を加えません。
https://www.suzukikenichi.com/blog/dynamic-rendering-is-a-temporary-workaround/

ただダイナミックレンダリングは一時回避的な位置付けのようです。

SSRよりダイナミックレンダリングの方が楽なようです。ただ、結構ハマっている人も見かけます。。ダイナミックレンダリングは宿の一休やお絵かきのピクシブが採用していました。

とりあえず、プリレンダリングで納得できなかったら、ダイナミックレンダリングやSSRを考えます。

nuxt.jsなんですが、そのライバルとなるnext.jsは意外にもPre-renderingの方を推奨しているんですね。そのあたりもプリレンダリングからやってみようかなとなりました。

When to Use Static Generation v.s. Server-side Rendering We recommend using Static Generation
https://nextjs.org/learn/basics/data-fetching/two-forms

WordPressもブログとして使う!?

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

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

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