125
79

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-08-08

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の一部を有効化させる」。

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

125
79
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
125
79

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?