SPAサイトでGoogleにインデックスさせるために最初にやるべきこと その2
polyfillを導入する
- googlebotのクロール技術がかなり古く、新しいJSに対応してないため、ES6+の構文エラーによりページを認識できないことがあるらしい。
- javascriptでページを切り替えるSPAでは以下略
- 以下の記事で知った
- https://salary.katsulabo.com/【vue-js】googleにインデックスしてもらうためにやった/
対策も上記URLに書いてあるが、Vueの場合はbabel.config.jsに以下を追記すれば対応できる。
// babel.config.js
module.exports = {
presets: [
['@vue/app',
{
useBuiltIns: 'entry'
}
]
],
...
}
このやり方だと全polyfillをぶっ込むので多少データサイズが増える(数十〜数百KBくらい)
これが嫌なら、原因さえ特定できれば個別インポートもできる。
// babel.config.js
module.exports = {
presets: [
['@vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
}