こんにちは。
今回はみんなだいすきGooglebot（クローラ）の話です。

正確にはGooglebotがページ内容を正しくインデックスできる範囲の話です。
（とはいえ正確な範囲については把握しきれないので一部の話のみです）

GooglebotとJavaScriptについて

「GooglebotはJavaScriptは理解できないからJavaScriptを使うだけでSEOに不利だ」
「いや最近のGooglebotはJavaScriptもちゃんと理解してインデックスしてくれるから使っても問題ない」

みたいな話聞いたことありませんか？

これらの話は実際の所どちらが正しいのかというと どちらも半分正解で半分不正解といったところです。

現在のGooglebotはChrome 41相当のレンダリング能力を持っています。
相当と書いたのは実際のChrome 41とはちょっとした差異があるためです。
詳細は下記の公式ドキュメントを参照してください。

Googleは公式ドキュメントで様々情報を出してくれているので助かりますね。
こっそり追加されてたりするので、この情報公式で公表されてたんかい！って思うこともたまにあります。

ということで、ES6以降には対応していませんが、ES5以前のJavaScriptであればちゃんと認識してくれます。

「アコーディオンメニューは隠し要素と認識されるから良くない」というのはもう一昔前の話ということです。

SPA（シングルページアプリケーション）のレンダリング

React, Vue, Angularなどのフレームワークで実装したSPAの場合どうでしょうか。

React（create-react-appを使用）の場合、react-script buildコマンドでビルドを行う際に
裏ではBabelによりES5にトランスパイルが行われているみたいなので問題ないのでは…。とは思います。

ただ、それよりももっと確実にGooglebotに対応する方法があります。

それがよく聞くSSR（サーバサイドレンダリング）というものです。
これは、予めサーバ側でレンダリングしたファイルを用意しておき、それをレスポンスします。

• ファーストビューの読み込み速度を上げる
• GooglebotがJavaScriptを理解できなくても関係ない。

といったメリットがあり、かなりのSPAで使われているのではないかと思います。

ダイナミックレンダリングについて

最後に、先月くらいに公式のドキュメントが公開されたダイナミックレンダリングについてです。

ダイナミックレンダリングについては初出が今年の5月ごろで、 ドキュメントが公開されたのが先月と、まだ情報が少ない話題です。

ダイナミックレンダリングについて話す前にダイナミックレンダラという物にも触れる必要がありそうなので、触れます。

開発室ブログでもよく話題に上がるPuppeteer。これもダイナミックレンダラです。

公式のドキュメントにもだいたい書いてあるんですが、
Googlebotのときだけ、プロキシで間にPuppeteerなどのダイナミックレンダラを噛ませて、
Puppeteerがレンダリングしたページ結果をレスポンスする。
といったことが出来るようにもなります。

本当は実際に試しつつ解説を入れていく記事を書きたかったんですが、
諸事情により次回の更新の時にそちらを記事にしたいと思います…。