モダンなフロントエンド環境とSEOー最適な環境を検証してみました！

日々SEOに携わっている方はコンテンツ領域に留まらず、noindexすべきかどうか、robots.txtでブロックすべきかなどテクニカルなSEOの領域でも正解を探し求めてトライアンドエラーを繰り返されているものと思います。

今回仕事の一環でモダンなフロントエンド環境ーSPA、SSRがGoogleのクロールに影響ないか、最終的にはGoogleからの評価、つまり順位への影響について検証をしましたので、まとめたいと思います。このあたりの検証はあまりWeb上にもないのではないかと思いますので、よければ参考にしてください。

SPA、SSR、SSG、いずれもSEOにとっては表示速度がメリット

今回フロントエンド環境を選択する上で、SEOの側面でメリットデメリットがあるSPAとSSRを実際に2つのサイトで載せ替えをして検証をおこないました。 (時間の都合上とサイトの特性からSSGは検証できていません、すいません)

大規模サイトでSSR、SPAにいきなり載せ替えて、「インデックスが飛んだ！」なんてことにならないように、「比較的小規模なサイトで検証してから決めよう！」というのが検証をした理由です。 検証結果の前にSPA、SSR、SSGについてと、メリット・デメリットについてまとると下のようになります。詳しい仕組みなどはWeb上に情報がたくさん見つかるため省いています。

SPA

メリット：初回ページ読み込み以降の表示速度が速い、ランニングコストが安い

デメリット：初回の表示速度が遅い、クロール時にJS実行タイミングが遅れると、クローラーに正しくページを認識させられない可能性がある

SSR

メリット：初回ページ読み込みおよびそれ以降も表示速度が速い、SPAのリスクがない

デメリット：node.jsサーバーを用意するため費用が高くなる

このようにSEO観点ではいずれも表示速度が早いことが大きなメリットになります。逆にデメリットは開発の工数などを除けば主に費用の部分が違います。

検証結果

問題は発生しなかったが、プラスにも働かなかった。

検証について補足すると、今回2サイトをそれぞれSPAとSSR（いずれもVue.js）に載せ替えをしています。今回検証終了までの期間を長く取れなったことから、オーソドックスなWebアプリケーションのサイトから載せ替える際、Vue.jsネイティブな状態にできていません（本来のパフォーマンスは発揮できていない）。また、2サイトは全く同じ仕様のサイトではないため、厳密な意味でのSPAとSSRの比較検証にはなっていません。

検証方法は、それぞれSPAとSSR載せ替え前後1か月で、Googleサーチコンソールやサイトをクロールして診断してくれるツールを主に使用してインデックス数に変化があったか、カバレッジ状況に変化があったか、順位に変化があったか、などを調べています。

• インデックス数

SPA：一部のページでクロール後にインデックスに登録されていないページが見つかった（載せ替えとの因果関係は不明）

SSR：載せ替え前後でインデックス数に変化なし ⇒特にSPAで心配をしたインデックスへの大きな影響は見られなかった

• カバレッジ状況（エラーなど） SPA：エラーが一部見つかったが、環境の違いによるものではなく、フロント開発時の工夫で回避できるもの SSR：SPAと同様の状態 ⇒特に環境によるカバレッジのエラーなどは増えなかった
• 順位状況

SPA：前後1か月で大きな変化なし

SSR：SPAと同様

まとめ

SPA、SSRは正しく実装すればどちらを選んでもSEO的には〇

検証結果としては、SPA、SSRいずれもプラスにもマイナスにも働かなかったというのが検証結果です。今回SPAとSSRに載せ替える際に、フロントの開発期間をもう少し取り、Vue.jsに最適化した状態であれば表示速度が上がり、ユーザビリティの向上などからGoogleからの評価が良くなり、結果順位が上昇する可能性もありましたが、残念ながらそこまでは検証できませんでした。

上記の評価項目からは省きましたが、載せ替えに際し、UX評価指標であるCore Web Vitalsの数値が大きく悪化してしまうサイトがありました。これはSPA、SSRの問題というよりは実装方法の問題と思われるため、載せ替えの際に注意すれば防げる事態と言えます。

今回最も心配をしていたSPAで正しくページを認識させられなくなり、最悪のケースとして、インデックスが飛ぶなどの事態にはなりませんでしたが、Google側も新しいWebの技術や環境に日々対応しているとはいえ、実装の際には注意が必要です。

結論、今回はSEO観点でSPA、SSRどちらを選んでも問題ないという検証結果でしたが、今回の検証目的の大規模サイトの環境選択では、リスクの部分を懸念してSSRを選択しました。選択の際はサーバー費用や開発期間など様々な側面を考慮して決定する必要がありますので、SSRが絶対良いということではないということだけ補足させていただきます。