beta

SSRは必要?Javascriptで構築したSPAサイトのSEOを考える

ReactやVueなどでJavascript製のSPAサイトを構築する際に大きな問題になるのが、Googleクローラーなどへの対策(SEO)です。かつてはサーバーサイドレンダリング(SSR)が必須とされていましたが、現在はどうでしょうか。SPAサイトでのSEOの対策と課題をまとめました。

公開日:2019年10月28日

GoogleクローラーはSPAサイトをしっかりとレンダリングして評価してくれる

かつては「クローラーはJavscriptを実行できない」というのが当たり前で、対処策としてサーバーサイドレンダリング(SSR)を用意するのが主流でした。

しかし、Googleクローラーも進化していて、2019年現在のGoogleクローラー(Google Bot)はJavascriptをかなりの精度でレンダリング&中身のコンテンツを認識してくれるため、Vue.jsやReactなどのJavascriptフレームワークを使っていても、ほとんどのケースでGoogleクローラーはSPAサイトの中身をきちんと認識・評価してくれます。

SPAページは通常サイトとは別フローでクロール・評価する

ただし、Googleクローラーは、Javscript製のサイトを一度HTMLページとしてクロールしたのちに、Javscript処理が必要だと判断すると、「レンダリングの待ちリストに追加」し、順番を待ってからレンダリング処理をして評価するようです。

現在多くのサイトがJavaScriptベースになっているため、次のステップとしてはJavaScriptのレンダリングも必要となり、ページが一度レンダリングの待ち行列に追加されます。リソースが空き次第、ヘッドレスブラウザのような別サービスである「ウェブレンダリングサービス」(WRS)を使用し、JavaScriptを実行します。

SEO Mythbusting エピソード2のまとめ: Googlebotについて

SPAサイトの中身を評価するには、よりサーバーパワーが必要なヘッドレスブラウザのようなものが必要になるため、当たり前の処理と言えるでしょう。

つまり、Javascript製のSPAも、Javascriptを実行したレンダリングはしてくれますが、中身を評価するのは「Google側で追加の作業を行なっている」ため、Googleがそのサイトをクロールする閾値とされる「クロールバジェット」が大きく消費され、クローラービリティが下がってしまう可能性があるということです。

筆者の所有しているSPAサイトでも、このような挙動が見受けられ、サーチコンソールで確認するとURLが認識されているのにクローラーが回ってきてないという現象が、サーバーレンダリングサイトよりも多いような気がします。


SPAサイトはSEOにはやや不利か

このように、SPAサイトはGoogleクローラーから正しく評価されることがほとんどですが、クローラービリティという観点からすると、クローラーが即時評価してくれる、「サーバーレンダリングされたサイト(従来のPHPやRailsなどで構築されたサイト)」よりも不利と言えます。

ただし、コンテンツはあくまでGoogleのためでなくユーザーのために制作するものなので、

  • ユーザーにとって使いやすいサイトをどう構築するか
  • SEOを含めて、ユーザーの集客をどうするか

といった、サイト戦略をどう展開するかを予めしっかり考えた上で、SPAサイトを構築していく必要がありそうです。