React Fetch as Google した結果が 空ページになる


React * Django で新しくサイトを作っております。
サイト自体は公開して、Google Search Console の設定も完了したので、Fetch as Google を実行したのですが、レンダリング結果を見るとページが描画されず、空ページが表示されており、上手くインデックスされていませんでした。

おそらくの原因と対処方法を記載します。


おそらくの原因

最新版 Chromeが解釈できる JavaScritp を google bot (Fetch as Google で使われるbrowser) が解釈できておらず、描画できていなかったと思われます。
参考にした記事では、Fetch as Google はおそらくPhantomJS v2.1 ベース という内容の記載がありました。

以下の記事に記載がありますが、少なくとも、最新版の Chrome よりは古いのかと思います。
Googlebotはレンダリング機能としてChrome41相当の性能を持つ | 海外SEO情報ブログ


対処方法

Promise 等を使用していたため、babel-polyfill を使用するようにしました。

  • インストール

    npm install --save babel-polyfill 
    

  • エントリーポイントとなるJavaScriptに記述を追加

    import 'babel-polyfill'
    


参考

JSフレームワーク時代に必要なGooglebot分析とスクレイピングの技術(テクニカルSEOの復権全6回の3) | Moz - SEOとインバウンドマーケティングの実践情報 | Web担当者Forum

React application seen as a blank page via “Fetch as Google”

Google SEO with Create-React-App: Fixing the Hidden Gotcha

babel-polyfill 以外にも、babel-polyfillとbabel-runtimeの使い分けに迷ったので調べた - Qiita polyfill はあり、正直何を使うべきかは、ちゃんと判断できていないという状況ですが、何も描画されない、Index にも影響がある状況は回避できたので、一旦これで様子見しようかと思います。
以上です。

コメント