SPA(Single Page Application)サイトのSEOはどうするべき？

GoogleクローラーはSPA(Single Page Application)サイトを解析できる？

結論からいうと、GoogleクローラーはJavascriptサイトを解析できます。が、きちんとGoogleクローラーにサイトコンテンツを認識してもらうにはある程度の対応が必要となります。

というのも、下記のページにまとめられているように、GoogleクローラーはJavascriptで構築されたSPAサイトの場合、通常のクロールフロートは違った流れで「追加処理」をするため、サイトのクローラビリティが下がってしまいます。

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

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

つまり、GoogleクローラーがSPAサイトをクロールすると、

1. Javascriptを実行しないページ（中身のないHTML）をクロール
2. SPAサイトと認識すると、Javascriptをレンダリングできる特殊なクローラーにキューを渡す
3. そのサイトのクロールバジェットに合わせて、順番にJavascriptをレンダリングしてクロール

という流れになり、コンテンツの中身の解析が後回しになってしまう可能性があるのです。

会員向けコンテンツなど、Googleクローラーに認識してもらう必要のないページは問題ないですが、SEOでの集客を目的としたコンテンツではハンディとなってしまいます。

SPAサイトのSEO力をあげる方法

Googleクローラーの動きを見る限り、クローラビリティをあげるためにも、SEO向けコンテンツはクローラーが読めるファイルを用意した方が良いと言えます。

ここからは、クローラービリティをあげる方法をみていきましょう。

SSR（サーバーサイドレンダリング）を使う

SSR（サーバーサイドレンダリング）は、SPAサイトのJavascirptをレンダリングした後のHTMLをあらかじめサーバー側で用意しておく手法で、SPAサイトのSEOとして定番の手法です。

ReactやVue.jsなどのSPAで利用されるJavascriptフレームワークには、SSR機能やプラグインが存在するので、そちらを使えば比較的簡単に追加できます。ただし、Node.jsが必要になることがほとんどで、ある程度のスペックのサーバーを常設する必要があります。

SSRのメリット

• クローラビリティが上がる
• プラグインなどで比較的簡単に実装できる

SSRのデメリット

• 静的サイトのみをホスティングするサーバーでは使えない
• node.jsが使える常設サーバーが必要 => コストがかかる

ハーフSPAサイトする

サイト自体は通常のサーバーレンダリングのサイトにしておいて、ユーザーがサイトに入ってからService WorkerなどでSPAサイトとして動作させる「半分通常サイト、半分SPAサイト」にする方法です。

この方法であれば、Googleクローラーから見れば通常のHTMLを解析できるサイトで、ユーザーにはSPAサイトとして高速動作・高機能を提供できます。

どこからどこまでSPAにするか、リンクを辿った時の挙動をどうするかなどの細かい設計が必要ですが、現状サイトからリニューアルもしやすく、かつ追加のGoogleクローラー対策も不要です。

ハーフSPAサイトのメリット

• SPA機能を追加するだけなので、低コストでSPA化できる
• Googleから見ればこれまでと同じサイトなので、クローラービリティが下がらない

ハーフSPAサイトのデメリット

• ユーザーが通常ページにいるのかSPAにいるのかの判定など、細かい設計が必要なケースも
• 結局、SPAサイトと通常サイトの二つ作ることにはなる

---

SPAサイトのSEOについて見てきました。

Googleクローラーの性能が上がって今、SSRなどの「Googleクローラー向け対策」は必ずしも必要ではありませんが、「あった方が良い」という意味では状況にあまり変化はないとも言えます。

特に、コンテンツSEOを主としたサイトの場合は、Googleのクローラビリティは重要となるので、SPAサイトを制作する前に、SEOにまで気を使った設計をする方がベターでしょう。