Google botでコンテンツが表示されていなかった

Search consoleにあるFetch as googleで確認したところ、下の画像の様に文字列がレンダリングされてなかった・・・

今までブラウザでの使用比率5%以下は対象外で活動してきて、今回のブログでもjsをES6で書いています。
もちろんWebpackとbabelを使用しているので問題ないだろうと思っていました。

結果は上の通り全く対応できていなかったです・・・・・・

ということで今回はES6で書いたjsをGoogle botでも表示できる様に変更します。

webpackで使用するbabel-presetを追加します。

yarn run babel-preset-es2016
yarn run babel-preset-es2017

これでpackage.jsonにpresetが記述されます。

さらにwebpack.configを下記に変更します。

const path = require('path');

module.exports = {
  // エントリーポイントの設定
  entry: './js/app.js',
  // 出力の設定
  output: {
    // 出力するファイル名
    filename: '../js/bundle.js',
    // 出力先のパス（v2系以降は絶対パスを指定する必要がある）
    path: path.join(__dirname, 'js')
  },
  module:{
  	loaders:[{
  		test: /\.js$/,
  		exclude: /node_modules/,
  		loader: 'babel-loader',
      query:{
        presets:['es2015','es2016','es2017']
      }
  	},
    {
      test: /\.vue$/,
      loader: [
        'vue-loader'
      ]
    },
    {
      test: /\.css$/,
      loader: 'style-loader!css-loader!'
    },
    {
      test: /\.(eot|svg|woff|ttf|gif)$/,
      loader: 'url-loader'
    }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.css'],
    alias: {
    // vue.js のビルドを指定する
      vue: 'vue/dist/vue.min.js',
      // slick: 'slick-carousel/slick/',
    }
  }
};

これでbundle.jsがGoogle botに対応できる様になります。

ちなみにIE11ではオブジェクトにforEachを使用しているとエラーでjsそのものが止まるので表示されなくなるという事もありましたw

いやー、今回は焦りましたけど、いい勉強になりました。