Webアプリの開発を始めた人は、とっつきやすいSPA（シングルページアプリケーション）からスタートする人が多いと思います。
このSPA、巷では「SPAはSEOの観点で不利」とか「広告を載せようにもAdsenseの審査通らない」なんて言われています。
一方で、「Googleの検索botはJavascript読めるからSPAでも大丈夫」なんて話もあります。
実際のところ、どうなのでしょうか？？？
今回、SPAとしてウェブアプリを開発し公開したところ、検索エンジにも反映され、Adsenseの審査も通りましたので、参考情報としてご報告いたします。今後、SPAで開発しようとしている人の手助けになれば幸いです。
（2022年2月時点での情報です）
作成したウェブアプリ
これまでに飲んだお酒を覚えていますか？色は？味は？フレーバーは？
そうした日々のお酒を記録するためのWebサービス「お酒録」を作りました。
ご自分のお酒を記録することはもちろん、他の人が飲んでいるお酒を見たり、コメントできます。
ワインや日本酒だけに特化したスマホアプリはありますが、
本サービスはビール、酎ハイ、日本酒、ワイン、焼酎、ウィスキーとあらゆるお酒を対象としています。
また、Twitterにお酒の写真を投稿する人が多いことからTwitterへの投稿機能も備えています。
開発言語など、アプリについてはこちらをご参照ください。
検索エンジンへの反映について
ここから本題です。
まずは、SPAサイトはちゃんと検索エンジンにインデックスされるのか？についてです。
昔は、クローラーがJavascriptに対応していなかったため、SPAはインデックスに登録されないと言われてきました。
しかし、現在（2022年2月時点）では、SPAでも問題なくインデックス登録されます。
ただ、1点疑問なんですが、クロールの頻度が少々遅いような気がしています。
大体130ページ程を一度にサイトマップ登録したのですが、以下のGoogle Search Consoleから分かる通り、数日に分けてインデックスされていっています。
昔に作成したWordPressのサイトは一度にインデックス登録されましたが、今回は何故このような登録のされ方なのか気になります。。。
なお、Google Search Consoleから実際にクローラーが認識しているHTMLコードを取得できました。
以下の通り、レンダリング後のHTMLコードを読み込んでいることがわかります。
<div class="mx-2 mb-2 d-flex align-center">
<span class="v-chip v-chip--label v-chip--outlined theme--light v-size--small brown brown--text">
<span class="v-chip__content"> ウィスキー </span></span>
<a href="/beverage/4Km9oh4e" aria-current="page" class="indigo--text text-body-2 text-md-h6 font-weight-bold ml-2 router-link-exact-active router-link-active" style="cursor: pointer; text-decoration: none;">
補足：メタタグどうしてんの？
検索エンジンにインデックスされる上で大切なのが、メタタグです。
SPAはVue Routerを使って、擬似的にページ遷移を実現していますが、所詮は「擬似的」。
実際に読み込まれているHTMLファイルはindex.htmlだけで、そのファイルに記載されたメタタグが各ページで共通使用されます。
この点、今回のWebアプリでは、以下の記事を参考に、Vue Routerでページ遷移される度にJavaScriptでtitleやdescriptionを変更するようにしています。
無理矢理な方法ではありますが、Googleのクローラーは、確りと変更された後のtitleやdescriptionに基づいてインデックスしてくれています。
document.title = '○○○○○○○○';
document.querySelector("meta[name='description']").setAttribute("content", '○○○○○○○○○○');
Bing
ぶっちゃけ、検索エンジンなんてGoogleだけ意識しとけば良いんじゃね？って思いますが、一応、BingにおけるSPAの登録状況も確認しました。
残念ながら、BingではSPAはインデックスされないようです。
Webmaster Toolを見てみると、1ページもインデックスされていない上に、エラーになってしまっていることがわかります。
国内最大シェアのGoogleが対応できているので、まぁよしですが、Bingも対応するならSSRにするしかなさそうです。
Google Adsenseへの登録申請について
Webアプリを開発する方の中には、Adsense広告を掲載して広告収入を得る予定の人もいるかと思います。
しかし、巷では、「SPAではAdsenseの審査に通らない」とか「通りにくい」と言われています。
まぁ、ぶっちゃけ、SPA用にGoogle Adsenseのプラグインが提供されているんだから、登録できないはずはないのですがw
ということで、まだ開始したばかりでアクセスも殆どない状態でしたが、思い切ってAdsenseに申請してみました。
待つこと、2週間、特段SPAでも問題なくAdsenseの審査に通りました。
審査に通るためには、SPA云々ではなく、確りとコンテンツを作り上げること、Adsenseのポリシーに従ったサイト作りをすることの方が大切なようです。
最後に：SPAも捨てたもんじゃないけど、SSRに越したことはない
意外とSPAでもやれるじゃないか！と主張したいのがこの記事の趣旨ですが、でも、SSRに越したことはないと思います。
SPAはどうしても最初の接続時にコードを読み込む必要があることから、パフォーマンスが出にくいです。
実際に「お酒録」のパフォーマンスをlighthouseで計測するとパフォーマンスのスコアは「58」しかありません。。。
これは、SEOの観点ではやはりハンディキャップを負っているということかと思います。
また、Twitterへの投稿も考えると、OGP設定が欠かせず、
これはJavaScriptで事後的に変更してもTwitterはJavaScriptを認識してくれませんので、失敗します。
こうした観点で、できるならSSRの方が楽じゃないというのが本音です。