結論から言うと以下のエントリを参考に
import 'babel-polyfill';
したらできた。
追記
yarn add babel-polyfill
して埋め込んでいたが、その後 yarn start
が遅くなったような気がしたので、CDNからの読み込みに修正した。
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.min.js"></script>
経緯
- 先日作ったPWAである BlogFeedback をGoogleにインデックスして欲しかった
- 一応トップページのtitleとdescriptionは登録されている
- しかしbodyはインデックスされていない
- create-react-app でSPAを作っただけは普通こうなると思われる
- 大半のページはユーザー毎のprivateページなので、そんなにSEOをがんばってもうまみはない
- でも規約とかキャンポリとか、もうちょっとは登録するページもあるし…
- 職場ではServer Side Renderingが導入されているので、それなりに茨の道であることは知っていた
- この辺りの話は以下のスライドが参考になります
- Dynamic Rendering…するほどページ数もない(正直に言うとよくわからんのでやりたくない)のでとりあえずクローラが読めるJSにするぞ
挫折の歴史
とりあえずChrome 41対応したらええんやろ
"browserslist": ["chrome >= 41"]
したらできるのでは?- pollyfill.io使ったらできるのでは?
- なぜかfetch as googleで読めず…
- react-app-polyfill でIE対応すればChrome 41でも動くのでは?
- なぜかfetch as googleで読めず…
- 俺が悪かった
import 'babel-polyfill'
するわ- 読めた!
- JSの容量は増えるが、まあ個人サービスなので目をつぶろう(11KB+だった)