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

10時間の作業を2分に!Keywordmap(キーワードマップ)でSEO流入増の対策をしよう

10時間の作業を2分に!Keywordmap(キーワードマップ)でSEO流入増の対策をしよう

Keywordmapは、自社だけではなく競合サイトの検索順位データや対策KWの抽出などにより、オーガニックの面並びにペイドの面での機会損失を防ぐことが可能です。効果的かつ効率的にコンテンツ制作を行いましょう。

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

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

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

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

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

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

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

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

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

Prerendering(プリレンダリング)を使う方法

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

参考:SPAにおけるSEOについて調べた|fugafuga.write

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

JavaScriptを使ったファイルとは別にGoogleクローラー専用のHTMLファイルを用意し、プリレンダリングさせる方法です。GoogleJavaScriptを使ったサイトに推奨している方法でもあり、精度の高いインデックスが可能でしょう。コンテンツの生成に必要な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