Help us understand the problem. What is going on with this article?

SSRじゃなくても大丈夫!AngularでつくったWebサイトをGoogleに読み込ませる方法

More than 1 year has passed since last update.

GoogleはJavaScriptを読むことはできるが。

Googleの進化は早いもので、「JavaScriptフレームワークは検索に弱い」と言われたのは今は昔。JavaScriptをちゃんと読み込み、レンダリング後をインデックスしますので、今では検索結果に表示するためだけにServerSideRenderingpre-renderingをする必要はなくなりました。

ただ、その一方で、Googleのクローラーで採用されているJavaScriptのバージョンは低いです。ES5を使ってる模様。ES6以降を使って書いているJavaScriptコードは、Googleのクローラーは認識しない可能性があります。

AngularはES5への互換をデフォルトでは外している

AngularにはES5互換のためにスターターテンプレートにsrc/polyfills.tsが内包されています。これを使うと、ES5との互換がサポートされます。しかしいつからかすっかり失念したのですが(最初からだったかも)、ほとんどの互換をコメントアウトされています。

「ほとんどのブラウザはES6をサポートしてるんだから、わざわざ後方互換のためのpolyfillsをimportしてしまうとバンドルサイズが大きくなる」というのはわかるのですが、大変なことにこのことにより、GoogleのクローラーはAngularのプロジェクトを読み込むことができません。

GoogleのクローラーがどのようにあなたのWebサイトを表示しているか確認する「Fetch as Google」というツールが公開されているのですが、初期の何も設定しないままWebにあげた場合、Googleのクローラーは以下のように認識します。

スクリーンショット 2018-08-08 17.31.20.png

真っ白が表示されていますよね。つまりは、Webサイトのコンテンツを読み込めていないということです(おそらくJavaScriptエラーで処理が中断してる)。
もちろん、Webアプリケーションなどで「別に読み込ませる必要ないし」というシチュエーションは多いとは思うのですが、普通にWebサイトをPWAでつくって公開することなどあると思いますので、Googleのクローラーに認識させる方法を紹介しておきます。

src/polyfills.tsの31行目のコメントアウトを解除してください。

src/polyfills.ts
- //import 'core-js/es6/array';
+ import 'core-js/es6/array';

これだけで、Googleのクローラーはあなたのサイトを認識できるようになります。

スクリーンショット 2018-08-08 17.36.11.png

Ionic v4 + Angularで弊社Webサイトをリニューアルした時に気づきまして、時間が経ってしまっていたので念のため、本日(2018年8月8日)に再度検証を行いましたが、しっかりと表示されていました。

「Googleのクローラーに認識させるためには、polyfillsの一部を有効化させる」。

何かの機会でお役に立てましたら幸いです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away