結局、SPAだとSEOってあかんのか？について自分の考えをまとめる記事
個人開発で、自分はVue.jsが高速で開発できるので使っているんですが、Vue.jsの基本的な技術であるSPA（シングルページアプリケーション）は、SEOに弱いと言われています。
けどネットで調べると、結構、賛否両論なのですよね。
そこで、「SPAだとSEOが弱いらしいから、個人開発でSPA使うのを避けた方が良いの？」という疑問に対し、現状の把握、自分なりの考え、私が行っている工夫などをまとめてみます。
結論だけ書くと、SPAでも十分SEO対策はできると思います。
ちなみに、私は別にSEOの専門ではないので、正しいのかどうかわかりません。あくまで参考でお願いします。
（唯一確かなことは、私が実際にSPAでアプリを開発、運営していて、試行錯誤していることだけです。その点だけは実際に運営していないで書いているような情報よりは確かかもしれません。）
質問：SPAはグーグルボットが正しく認識できないは本当か？
そもそも、なぜSPA（シングルページアプリケーション）がSEO的に弱いとされるか？について理解する必要があります。
SPA（シングルページアプリケーション）とは、ブラウザによるページ遷移を行うことなく、単一のページでコンテンツの切り替えを行うことで、まるで違うページに遷移しているように見せる技術です。
と言うことは、変化させた後のデータを、上手くボットが情報を読み取ってくれない場合、困ったことになります。
間違った情報や不十分な形で情報を収集されてしまう危険があると言うことです。
最悪、単一のページと認識されかねない。と言う危険があります。
これがSPAを取り扱うときの、SEOの懸念点です。
実際、このSPAのSEOの問題を解決するために、Nuxt.jsを使ってSSRするなどの方法を使う人が多いように思います。
実際はどうか？
では、実際どうか？と言うことですが、今は、グーグルのボットはちゃんとJavaScriptの変更を正しく把握してくれているようです。
SPAのSEOの記事はこちらが大変参考になります。
以下はこちらの記事を参考にしながら解説していきます。
記事にもあるように、実は、2019年5月から、グーグルのボットが最新版になり、SPAにも対応できるようになっています。
つまり、もし2019年5月前の記事で、SPAがSEOに全く役に立たないと書かれている場合は、古い情報の可能性があります。
次に、ボットがSPAの反映を待ってくれる時間ですが、
Fetch as Googleでは約5秒待ってくれる
"Natural" なGoogleのクロールでは約20秒待ってくれる
と言うことで、5秒以内に画面の描写が完了するような形にできれば、グーグルのSEOの一番の心配はいらないと考えられます。
そして、これは私の運営しているサイトを観察していても同じような結果だったと思いました。
自分でも、毎日、新しいページを追加して、検索結果に載る文言を変えながらグーグルのボットの状況を観察していました。
そこで気づいたのが、あまりにも画面の表示が遅いと、不十分なクロールになる時あると言うことです。メタ情報の「タイトル」とか「概要」が上手く反映されていないなどです。
ただし、そこまで遅くない、つまり5秒以内にページ遷移が完成すれば、何の問題もなくクロールしてくれているようでした。
と言うことで、自分の中でも結論は、
現在は、SPAでもグーグルボットは正しく認識してくれる。ただし、ページの遷移完了はなるべく早くしなくてはいけない。
となります。
メタ情報はしっかり管理する必要がある
SPAにおけるメタ情報についてですが、これもSPAでちゃんと読み取ってくれています。
ただし、メタ情報については適切に管理する必要があります。
適切に管理というのは、ページごとにしっかり変更させる必要があるということです。
もし仮に、メタ情報を変更せずに沢山の遷移ページを作っても、グーグルは登録してくれません。ですから、ページごとにメタ情報は変更し、しっかり違うページであるとグーグルに教える必要があります。
これも昔自分で実験して、メタ情報をちゃんとページごとに変更しないと一向に検索に乗ってくれなかったり上手く行かないことを確認しています。
時々、SPAのアプリケーションで、メタ情報を変更していないサービスを見受けますが、これは大変もったいないので、すぐに対処した方が良いと思います。
グーグルではない検索ボットはまだ対応していない様子
SPAの明らかなデメリットは、Bingウェブマスターツールでは、どうやら適切にクロールできていないようだ、と言うことです。
サイトマップを送っても一向に反映されません。これは、おそらく単一のページだと認識しているからだと思います。
Bingについてはそこまで注力していないので、どの辺までしっかり収集してくれているかはちょっとわかりません。
ツイッターなどのSNSのOGP画像やメタ情報の対策
同様に、ツイッターなどのSNSでシェアする際、OGP画像やメタ情報が反映されません。これはもちろんツイッターなどのボットがSPAにまだ対応していないからです。
この場合の対応策は、いくつかテクニックとしてありますが、SPAで、最近で一番良い方法は、Netlifyでのプレレンダリングをすることだと思います。
プレレンダリングすれば、SNSでも画像やメタ情報を反映させることができます。
これは、個人開発者仲間や運営者ギルドの方にアドバイスいただき知りましたが、とても便利でした。
私は元々Firebase Hostingを使っていましたが、以下の記事を参考に移行しました。
結論：適切に対処すれば問題ない
結論として、SPAのSEOは、ある程度テクニックは入りますが、適切な対処をすれば問題ないということです。その対処方法が少し知識がいるので面倒ではありますが。
もちろん、もっともっと要求水準レベルが高い開発ならわかりませんが、個人開発しようと思ったときに、SEOが弱いからSPAを止めようと考える必要はないと思います。
どちらかと言えば、SPAだから、SEOについてしっかり変更する必要がある要点があることを理解することが必要だと思います。
少しでも参考になれば幸いです。
