SPAサイトがGoogleにインデックスされない時の解決法

今回はSPAサイトがGoogleのSearch Consoleで「Fetch as Google」をしてもレンダリングされず、サイトがインデックスされない時の対応方法です。
Googleのbotがサイトのクロール時に使うブラウザは、Javascriptも動作するために、SPAサイトでも（ページの表示に多少タイムラグがあるサイトでも）問題なくインデックスすると発表しています。

ところが僕がVue.jsで書いたソースがいつまで経っても(約1ヶ月)インデックスされないという事象が発生しました。
さすがにおかしいと思い、Search Consoleで「Fetch as Google」を使用してレンダリングをしたところ、空白ページが…

何回やっても同じ結果で、このままではGoogleのbotにもただの空白ページと認識されてしまいます。
結果的にいつまで経ってもGoogleにインデックスされないため、検索されることはなくなってしまうのです。

Search Consoleを見ない人は、インデックスされていないことにしばらく気づかないかもしれませんね。。。

SPAでも大丈夫ってGoogleは言ってるのになんで？って感じですが、結論からするとGoogleのbotで使われているブラウザのバージョンが原因のようです。
botのブラウザはバージョンが高くないようで、ES2015 (ES6)で書かれているソースコードだとそのままではレンダリングできないようです。
Javascriptであればなんでもいいという訳ではないんですね。

よって解決策としては単純に、古いブラウザでもES2015(ES6)を実行できるようにしなければいけません。
一番簡単な方法としては、babel-polyfillをかませる方法です。

ここでbabel-polyfillとは何かということを簡単に説明します。
babelとpolyfillに分けて説明しますが、
まずbabelについてですが、これは最新の新しい文法(ES2015(ES6))で記述したJavascriptファイルを古い文法の記述に変換(コンパイル)してくれるコンパイラです。
新しい文法で記述されたJavascriptで100%動くブラウザはまだまだ多くないようで、IEや先に挙げたGoogleのbotがクロール時に使っているブラウザはまず動かないです。
そのようなブラウザに合わせてJavascriptが吐き出されるようにbabelがコンパイルしてくれます。

ただ、古いブラウザでは新しい文法(ES2015(ES6))の機能に対応していないものがそもそもあり、例えbabelでコンパイルしてもそのブラウザでは動作しません。
そこは標準オブジェクトを拡張し、古いブラウザでも新しい機能が動作するように変換する必要があり、polyfillの出番になります。

話が難しくなりましたが、結論としてはGoogleのbotが使っている古いバージョンのブラウザでも動作するようにソースをコンパイルしてやればいいのです。

参考として、Vue.jsで対応した時の方法を載せておきます。
※モジュールはnpmで管理しているものとします。

まずはモジュールのインストールです。

npm install babel-polyfill --save

次に、webpack.base.conf.jsで以下のような記述箇所を、

app: ['./src/main.js']

以下のようにすればOKです。
とても簡単ですね！

app: ['babel-polyfill', './src/main.js']

vue.jsでは、ビルドをするとmain.jsをコンパイルしてapp.jsに吐き出されますが、
この時にbabel-polyfillをかませてやれば、古いブラウザでも動くように変換してくれるのです。

対応後、Search Consoleをチェックしますと、
無事にレンダリングできていました。
読み込めないリンク先などはどうしてもあるため、ステータスが完全ではなく一部になってしまうことがありますが、そこは気にしなくても大丈夫なようです。

これでGoogleのbotもちゃんとしたサイトとみなしてくれるので、無事にインデックスされます。

基礎から学ぶ Vue.js