【大ニュース】なんとGoogleBotのJSレンダリングエンジンがChrome74相当になって、ES6に対応するようです...!ここで書かれた内容の多くはすでに古くなっているかもしれません...!https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.htmlもう時は2018年の後半となり、React・Vue・AngularといったモダンJavaScriptフレームワークは開発現場でよく見かける存在となりました。一方で、依然としてこれらを利用して開発をする場合には「Googlebotがそれらをレンダリングできない可能性がある」という問題がついてまわります。そのため、サーバーサイド側で前もってJavaScriptをレンダリングしておく、サーバーサイドレンダリングという技術が必須となりました。サーバーサイドレンダリングを導入してしまうと、開発工数が膨らみアーキテクチャを複雑にさせてしまう可能性があります。SEO対策をしたいだけならば、本当に「サーバーサイドレンダリング」をする必要があるのでしょうか。結論から言いますと、それは不要1といえるかもしれません。※きちんと「Googlebotにインデックスをしてもらう」ということだけをSEO対策とするのならば、という条件付きです。いうのも、サーバーサイドレンダリングをせずにも、モダンなJavaScriptで書かれたコンテンツをGooglebotが読める形式にすることができるからです。41相当の機能しか持っていないGooglebotはJavaScriptを実行できるだとかできないだとか、様々な噂がされております。実際のところは本当にJavaScriptを実行できるのでしょうか、実行できるとしてどの程度までの機能を実行できるのでしょうか。この疑問に対する答えをGoogleは公開をしています。検索でのレンダリング」からの引用です。サービス(WRS)が使用されます。プラットフォームの機能がサポートされます。ガイドによれば、GooglebotはJavaScriptをレンダリングしていることがわかります。41」相当の機能のみがサポートされているとのことです。2018/09/03現在のChromeのバージョンは「68.0.3440.106」であり、大きなバージョンの乖離があることがわかります。41の機能とはどういったものだったのでしょうか。use?」で確認することができます。実際に最新のChromeとGooglebotが基準としているChromeの機能の違いを見てみましょう。68の比較を見てみると、やはり機能に大きな乖離があります。その中でも特に気になるポイントを以下に引用しました。classes」などのシンタックスを実行できないのです。41では正常に表示されないJavaScriptで作られたページは、Googlebotからどういう風に見えているのでしょうか。Consoleには、Googlebotからページがどういう風にレンダリングされるのかを確認する機能があります。その機能を利用して、Googlebot対策前と対策後で前後比較してみます。TypeScriptで書かれたシングルページアプリケーション(以下、SPA)で、github.ioでホスティングしているため、サーバーサイドレンダリングをしておりません。対策後Googlebot対策前は真っ白だったSPAが、対策をするとちゃんとレンダリングされるようになりました。SPAのコンテンツをGooglebotに認識してもらうには特別な対策が必要になるわけです。以下に確認をする手順を軽くまとめます。すると、この節のはじめにあるスクショと同様のレンダリング結果ページを確認できます。すればGooglebotがインデックスできるようになるのか結論としてはしっかりとレガシーブラウザ対策をしていく必要があるということです。41はレガシーブラウザに毛が生えた程度の機能しか持っておりません。そのため、それと同等のGooglebotで動くようにするためには、きちんとpolyfillを利用することで機能が足りなくても動くようにする必要があります。最近の機能をサポートしていない古いブラウザで、その機能を使えるようにするためのコードのです。MDNより引用モダンなフロントエンドフレームワークを利用して開発をしている皆さんは、きっとwebpackなどのモジュールバンドラを利用してブラウザで動くJavaScriptにトランスパイルしているかと思います。モジュールバンドラにはpolyfillをいれることで、古いブラウザ向けにトランスパイルをしてくれる機能・プラグイン・ライブラリがあるはずです。それらを利用することで、簡単にレガシーブラウザ対応をすることができます。7.0.0を利用した例を示します。以下に@babel/core、@babel/preset-envを利用した場合のサンプルを示します。(babelの設定ですが、少なくともwebpackであればこの.babelrcでそのまま動くと思います。)まず、@babel/preset-envでES6をトランスパイルできていることが前提になります。3この方法については省かせていただきますが、公式ドキュメントが詳しいです。はじめにpolyfillのパッケージをinstallします。次に.babelrcを下記の通りにすると完了です。]}@babel/preset-envを利用している場合、useBuiltInsという設定をするとpolyfillが適用されるようになります。この設定にはentryとusageという2つの方式が存在しています。usageとはトランスパイル時に必要な箇所でよしなにpolyfillを挿入してくれるという機能です。(実験中の機能らしく稀に想定どおりに動かないときがあります。)詳しくは公式ドキュメントをご参照ください。トランスパイル時にpolyfillが適用するようにした場合には、どのバージョンをターゲットにするか指定する必要があります。その指定にtargetsを使います。5例では、browsersを指定しており、これはbrowserslistの記法で対応したいブラウザを配列で設定できるというものです。11以上を対象にする」としました。polyfillが動く状態でtargetsにブラウザーとそのバージョンを指定することで、babelがその環境で動かせるJavaScriptにトランスパイルしてくれる、という設定です。ちなみに、この方法ではOGPなどは対応できないです。↩TypeScriptの例が見たい場合は上記のソースコードのwebpackのconfigや.babelrcを参考にしていただければと思います。↩@babel/polyfillで大抵の機能はカバーできますが、fetchやIntlなどの特殊なブラウザAPIを利用するためには、別途専用のpolyfillを入れる必要があります。↩targetsについて、詳しく知りたい方は公式ドキュメントをご参照ください。Niitsuma@otakumesiNAISTで自然言語処理はじめました。Developer育ち。ドラフト」および不動産情報サイト「IESHIL」などを開発・運営しています。upLoginユーザーは見つかりませんでした。