実際私が開発している2サイトの実例出しますよ〜
WEBサイトの開発者に取って常に気になるこの話題について、今回は私が開発している2サイトを実例として、結果をお伝えしようと思います。
概要
大分昔からSPA（シングルページアプリケーション）サイトはGoogleに正しく認識されないため、SEO的には最悪だと言われてきました。そのため、SSR（サーバサイドレンダリング）をし、初回画面表示時は本来ReactやAngularが生成するhtmlを、サーバサイドでレンダリングしてクライアント側はそれを表示するだけ、という手法を用います。
しかしSSRをするためにはほぼNode.jsが必須になるのが現状です。私が愛用しているGoogleAppEngineではまだNode.jsのStandard Environment（無料のやつ）が無いため、Node.jsを無料で使用する事ができません。
わざわざお金をかけてFlexible EnvironmentでNode.jsを使いたくないなと思い、今日までSSR無しのSPAサイトをGoogleAppEngineで運用してきました。
では、SSR無しのSPAサイトは、どれくらいGoogleに認識されるのか？今回はそれを簡単に紹介します。
GooglebotはどれくらいのJavaScript処理能力があるか
以下は2017年の有名SEOサイトの記事ですが、GooglebotはChrome41相当のレンダリング能力を持っているとのことです。
www.suzukikenichi.com
React製サイト: tree-maps
ここから実例を紹介していきます。
以下で開発・運用しています。
| インフラ | Google Appengine Standar Environment |
|---|---|
| ランタイム | Golang |
| サーバサイド：フレームワーク | Echo |
| サーバサイド：ビルド | goapp |
| フロントエンド：フレームワーク | React v16, Redux, react-router |
| フロントエンド：ビルド | webpack v4 |
| UIフレームワーク | material-ui |
| CSS | PostCSS, Sass(sugarss) |
| その他 | ServiceWorker, Electron |
サイトの開設日
tree-mapsは一度フルリニューアルしており、リニューアル前はGAE/Javaで非SPAサイトで、リニューアル後はSPAサイトになっています。
2017/02/10にリニューアルサイトを開設しており、サイトの開設から1年以上経過しています。
PCデバイスでの認識
😁 トップページもプロットページもGooglebotはヘッダーが大きく崩れ、多少CSSのレイアウトがおかしいものの、まあまあ正しく画面を描画できているようです。
モバイルデバイスでの認識
モバイル表示の実装はmaterial-uiにお任せ状態です。
😁 どうやらモバイルの場合はGooglebotは相当な再現ができているようですね。これは嬉しいです。
サイトマップxmlとインデックスの登録数
| サイトマップxml | https://www.tree-maps.com/assets/sitemap.xml |
|---|
😁 17URL中16URLは認識して貰えました。上出来ですね。
Angular製サイト: StringUtility
以下で開発・運用しています。
| インフラ | Google Appengine Standar Environment |
|---|---|
| ランタイム | Java v1.8 (Kotlin v1.2) |
| サーバサイド：フレームワーク | Spark framework |
| サーバサイド：ビルド | Gradle v4.2 |
| フロントエンド：フレームワーク | Angular v5.2 |
| フロントエンド：ビルド | angular-cli v1.7 |
| UIフレームワーク | angular-material |
| CSS | Sass |
| その他 | ServiceWorker |
サイトの開設日
StringUtilityは最初からSPAサイトです。
2017/10/07に開設しており、開設してから5ヶ月程度経過しています。
PCデバイスでの認識
😱 ・・・うーん、これは・・・
モバイルデバイスでの認識
😱 ・・・やっぱり駄目なのか
本来レンダリングされる筈の画面
このままだと本来の画面はどうな感じなのか解らないと思うので、一応本来のサイトのスクリーンショットも載せておきます。
トップページはこうです。
CSV・TSV相互変換ページはこうです。
こうして見比べると、Googlebotが全然認識してくれていない事が明確に解りますよね・・・
サイトマップxmlとインデックスの登録数
| サイトマップxml | https://www.string-utility.com/data/sitemap.xml |
|---|
😱 ・・・10URL中2URLしか認識されず
botはServiceWorkerのhtmlを取得しているのかどうか
React製のtree-mapsでもServiceWorkerを使用しており、サーバサイドorReactが生成するhtmlとServiceWorkerが配信するhtmlは同じですが、Angular製のStringUtilityの方はサーバサイドorAngularが生成するhtmlとServiceWorkerが配信するhtmlが異なっています。これはangular-service-workerが勝手にhtmlを作ってくれるので、そうなっています。
ではbotはServiceWorker側のhtmlを取得したのでしょうか？見てましょう。
サイト上で確認できるServiceWorker向けのhtml
こんな感じにUglifyされ、＄マークの変数が展開されていないものが配信されます。Googlebotが↑のhtmlを取得していたら、GooglebotはServiceWorkerのhtmlを参照していると言えます。
Googlebotが取得したhtml
どうやらGooglebotはServiceWorkerのhtmlではなく、通常のサーバサイド、もしくはAngularが生成したhtmlを取得しているようです。
（サーバサイドのhtmlもAngularのhtmlも、titleタグ等を動的に変更しているので両者の見分けがつきません）
まあ流石にServiceWorkerのhtmlを取得してはいないだろうとは思っていましたが、ちゃんと検証できるとホッとしますね。
雑感
React製サイトはいい感じにGooglebotに認識されているのに、Angular製サイトは酷い有様でした。
AngularはGoogle製のフレームワークなのでGooglebotと親和性高いかも！？とか思っていたらこれですよ。UIフレームワークもGoogle製のangular-materialなので、Googleフレンドリーなサイトの筈なのですけどね・・・なんという無慈悲な結果。
両者の違いはほとんど無い筈ですが、サイトの速度が異なります。
www.bunkei-programmer.net
www.bunkei-programmer.net
以前↑の記事を書きましたが、ランタイムがGolangの場合はスピンアップもフレーワーク初期化も無茶苦茶速いのですが、Javaの場合はスピンアップもフレームワーク初期化もかなり遅いのです。
もしかしたら、この初回起動の速度も影響しているのかもしれませんね。Angular製サイトのランタイムをGolangにしたら、React製のサイトと同様にレンダリングされたら・・・・それこそ無慈悲ですね。
という事で、React製サイトはSSR無しでもGooglebotにいい感じに認識され、Angular製サイトは惨敗でほとんどGooglebotに認識されない、という結果となりました！
Googlebotの挙動はGoogleの中の人にしか解りませんので、この記事で推測したものは全て外れている可能性がありますので、あくまで一例として参考にできれば、と思います！