SPA サイトで SEO やアクセス解析するときに押さえておきたい8つのポイント ｜ SiTest (サイテスト) ブログ

このところ、SPA（シングルページアプリケーション）で作られたウェブサービスが増えてきました。
国内の有名どころでいうと、AbemaTV （React ベース）などもそうですね。

こうした SPA で構築されたウェブサイトは JavaScript で動的にページ内のコンテンツを書き換えることで、ページ遷移を実現しています。
そのため、サーバーから読み込んだ HTML と表示されているコンテンツが一致しないケースが出てきます。
そんな状況下でも Google などの検索エンジンに正しくコンテンツを伝えるには、ちょっとした工夫が求められます。

今回は、SPA サイトで SEO やアクセス解析をする際にチェックしておきたいポイントをまとめました。

SPA ではページ遷移の際、都度 HTTP リクエストを投げてページを丸ごと取得するのではなく、必要なコンテンツのみ取得して書き換えます。
つまり、静的なサイトとは違い、自分で設定しない限り URL が自動的に書き換わることはありません。

検索エンジンのクローラーは、URL 単位でページを区別するので、見た目が違うページであろうと URL が同一であれば同じページだとみなし、1件しかインデックスされません。
これを避けるためには、インデックスしてほしい全ての画面に対して固有の URL を割り当てる必要があります。

SPA のフレームワークを利用していれば、基本的なルーティング設定は行われているはずですが、漏れがないか確認しておきましょう。

また、URL は Google Analytics でアクセス解析をする際にも、ページを区別するキーとして重要になります。
アクセス解析する上で、別ものとしてトラッキングする必要のあるページに個別の URL が設定されているか事前にチェックしておくと安心です。

数年前から Google がアピールしているように、検索エンジンが JavaScript を理解する能力は向上してきています。
おかげで、JavaScript で生成されたコンテンツもなかなかの精度でインデックスされるようになってきました。

とはいえ、やはり実際のブラウザのレンダリングとの差異が見受けられるケースもあります。
検索エンジンがどのように自分のコンテンツを認識しているかをチェックするために、Google Search Console からチェックしておくことをお勧めします。

確認方法は Search Console にアクセスし、「クロール > Fetch as Google」と進み、URL を入力したうえで「取得してレンダリング」ボタンを押すだけです。
数分待つと詳細画面から、レンダリング結果を確認できるようになります。

Googlebot の認識結果と実際の訪問時のレンダリング結果が横並びで表示されるので、意図通りに認識されているかどうかを確認しておきましょう。

検索エンジンのクローラーがかなり賢くなってきているのは確かですが、 a タグ以外をトリガーとしたページ遷移の認識にはまだ不安が残ります。
リンクを認識できない場合の問題点は2点あります。

一つ目は、ページのインデックスが進まないことです。
Google が新しいページを認識する代表的な手段は、インデックス済みページのリンクを辿るというものです。
サイトマップを送信するなど代替手段もありますが、可能な限り a タグからページを辿れるようにしておくべきでしょう。

二つ目の問題点は、内部リンクとして評価されなくなることです。
サイト内からのリンクが多いページほど重要なページであると認識され、検索順位にも影響を与えると言われています。a タグ以外でのリンクが多いと、サイト内のページの重み付けが難しくなるうえ、クロール頻度にも悪影響を与えます。できるだけ避けたいところです。

Search Console で見たときに、内部リンクの件数が想定より少ない場合は、a タグでリンクが設定されているか確認してみましょう。

これは従来のサイトでも言えることですが、ページの発見を助けるため、そして巡回頻度を高めるためにサイトマップを用意しましょう。

Search Console から送信するとともに、サイト内にサイトマップページを設けて主要なページにリンクしておくとよいでしょう。

Google のクローラーは動的に変更した title タグや meta description もしっかりと認識します。

こうしたメタ情報が検索順位に与える影響度は下がっているといわれています。
しかし、title や meta description は検索結果に表示される可能性があるので、クリック率を左右する要素として重要です。
特に description は DMOZ の終了に伴い重要性が増したと Google が公式に発表しています。
できる限り、各 URL ごとに最適なものを設定するようにしましょう。

また、Google Analytics でアクセス解析するうえでも URL ごとに個別の title が設定されていると捗ります。

title や description と同様に、構造化データも動的に設定可能です。
検索順位上昇への効果はないと言われていますが、検索結果が表示される際、リッチスニペットとして表示される可能性があります。
また、そのページの内容をより的確に検索エンジンに伝えることができます。

リッチスニペットが表示されると他の検索結果より視覚的に目立つので、レビューやレシピなどリッチスニペットに対応しているコンテンツをお持ちの場合は、構造化データを設定しておくことをお勧めします。

SPA では最初の読み込み以降にページ全体の読み込みがリクエストされることはありません。
標準的な Google アナリティクスのトラッキング設定だけではページ遷移が追えなくなるので、新しいコンテンツが読み込まれる際にトラッキングするような設定が必要です。

SPA のトラッキングについては Google アナリティクス公式のガイドで詳しく解説されています。

また、アプリ側でトラッキング設定をするのではなく、GTM（Google タグマネージャ）で設定することも可能です。
pushState を使って実装されている SPA であれば、「履歴の変更」をトリガーに指定すると URL の変更をトラッキングできるようになります。個人的にはこちらの方が手軽に設定できるのでお薦めです。

クローラーの JavaScript を解釈する能力は向上してきています。とはいうものの依然、ブラウザで見たレンダリング結果と異なる状態でインデックスされてしまうことがあるのも事実です。
Fetch as Google してみて、思い通りの結果が得られなかった場合は SSR（サーバーサイドレンダリング）を検討する必要があるでしょう。

SEO の課題解決のためだけに SSR 対応をすべきかは悩ましいところですが、クローラーが完全に SPA のコンテンツを解釈できるようになるまでは、その辺りも考慮すべきかと思われます。

SPA として作られたサイトでは、レガシーなサイトでは意識しなくてよかったいくつかの点に注意しておく必要があります。
また、静的なサイトと変わらず、設定さえしておけばメタ情報をクローラーに伝えられることもお分かりいただけたかと思います。

対策をしていれば、SPA サイトであっても適切な SEO は可能です。
SPA サイトを構築の際は、上記の点をチェックしてみてください。