SPA（Single Page Application）は、コンテンツの切り替えができるため、UX（ユーザー体験）を向上させられるメリットがあります。しかしながら、JavaScriptによりHTMLの一部を差し替える仕組みがGoogleクローラーにきちんと評価されるのか気になる人も多いのではないでしょうか。また、SPAサイトのSEOを考える場合、どのような対策が必要なのかを知っておくべきです。

そこで今回は、SPAサイトはGoogleクローラーが評価してもらえるか、SEO対策のポイントは何かといったことをテーマにしました。SPAサイトの制作を考えているがSEOの面で心配だという方はぜひご参考ください。

GoogleクローラーはSPAサイトを評価してくれるのか？

JavaScriptによってコンテンツを表示しているSPAサイトをGoogleクローラーが正しく評価するのか気になるところです。SPAサイトを作ってGogoleにインデックスされなければ、コストや時間をかけてWebサイトを制作した意味がありません。GoogleクローラーはJavaScriptを高い精度でレンダリングしコンテンツを認識してくれますので、評価されないということはありませんが、なかなかインデックスされず困ったという話も聞きます。JavaScriptによって表示されるサイトは、GoogleクローラーがHTMLページとしてクロールした後に、JavaScriptの処理がある場合にレンダリング処理をします。Googleクローラーの機能も向上しており、今後さらに精度が向上し、SPAサイトをさらに認識しやすくなるでしょう。

SPAサイトのSEO対策のポイント

SPAサイトのSEO対策を行う場合、どのような方法があるのかご紹介します。検索エンジンにインデックスされ、正しく評価されることが大切です。

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

SPAサイトのSEOとして最もスタンダードな方法です。サーバー側でコンテンツをレンダリングします。SSR（サーバーサイドレンダリング）を使えば、ページの初期表示が早くなることや、クローラビリティが向上するというメリットがあります。そして、確実なインデックスが可能です。しかし、ハイスペックなサーバーを用意する必要があり、それなりにコストがかかってしまうのが懸念点となります。

参考：SPAを導入する際に必要だったSEO対策についての話 -SSR? Prerendering?-｜Qiita

Prerendering（プリレンダリング）を使う方法

Googleクローラーに対して動作します。SPAサイトのWebページをGoogleにインデックスさせたいときに利用します。GoogleクローラーがWebページにアクセスした際、そのページをサーバー側でレンダリングして、静的なHTMLファイルとしてキャッシュします。そして、Googleクローラーが再びアクセスしたときにキャッシュしていたページを利用する仕組みです。規模が大きい場合には向いていませんが、高速に処理できます。SSRで必要になるハイスペックなサーバーを用意する必要がないのがメリットです。

Dynamic Rendering（ダイナミックレンダリング）を使う方法

JavaScriptを使ったファイルとは別にGoogleクローラー専用のHTMLファイルを用意し、プリレンダリングさせる方法です。GoogleがJavaScriptを使ったサイトに推奨している方法でもあり、精度の高いインデックスが可能でしょう。コンテンツの生成に必要なJavaScriptファイルとGoogleクローラーが認識しやすい静的なHTMLファイルの2つを作るのはとても明確な手法とも言えます。ただし、ダイナミックレンダリングは今後あまり活用されない可能性も指摘されています。

参考：ダイナミックレンダリングを正しく｜清野剛のふわふわビジネスブログ

タイトルやメタディスクリプションの設定

SPAサイトは1つのHTMLページでありながら、複数のページがあるかのように見せますが、実際のところはページが切り替わっているわけではありません。そのため、他のページに遷移してもhead要素はそのままです。ページごとに異なるhead要素である方がGoogleにインデックスされやすくなります。タイトルタグやmeta discriptionは、ユーザーからクリックを得るためにも重要ですので、ページごとに設定するのが理想的です。

aタグによるページ遷移を徹底する

Googleが新しいページを見つける場合、すでにインデックスされているページを遷移元としてる可能性があります。できるだけaタグからページを遷移できるようにしておきましょう。XMLサイトマップの送信をするのもページをGoogleクローラーに見つけてもらうために役立ちますので実施するべきです。また、aタグ以外によるリンクが多いとサイト内のページの重要度が不明確になり内部リンクを評価されなくなる場合があります。内部リンクはGoogleクローラーの循環を促進し、SEOにおいて重要な役割を果たしますので、aタグの利用を重視しましょう。

参考：SPAサイトで SEO やアクセス解析するときに押さえておきたい8つのポイント｜SiTest