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

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が認識されているのにクローラーが回ってきてないという現象が、サーバーレンダリングサイトよりも多いような気がします。

HTMLヘッダの更新に注意が必要

SPAの場合、動的にHTMLコンテンツを書き換えますが、基本的にはbody内部のレンダリング部分のみを書き換えることがほとんどです。

しかし、GoogleなどのクローラーはHTMLヘッダも含めてページを評価するので、ヘッダ部分の書き換えはSEOを考えたらかなり重要です。（特にtitleとmeta description）

この辺りはプラグインが用意されているのでそちらを使って対処するのが一番簡単ですが、HTMLヘッダの書き換えタイミングや、JavaScriptをレンダリングしてくれないクローラーへの対策もしないといけません。

SPAでtitle、meta、OGPなどHTMLヘッダを動的に変更する際のポイント

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

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

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

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

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