はじめに
AngularJSを使いシングルページアプリケーションを作成する上でネックとなっている問題があります。それは、検索エンジン対策です。今まで、検索クローラーはテキストベースの情報しか取得ができなかったため、JavaScript実行後のHTMLを取得し解析することができませんでした。
そのため、AngularJSやBackbone.jsなどのルーティング機能を搭載したMVC／MVWフレームワークを使いシングルページアプリケーションを作っても、意図したようにインデックスされず、検索結果に表示されない問題が生じていました。検索結果に表示されないというだけで、機会損失を伴います。
つまり、アクセス数を指標としてSEOを意識しているプロジェクトでは、AngularJSを使いたくてもリスクがあるため、使えないのが現状です。
2014年Google検索のJavaScript対応が強化
そんな中、2014年5月に大きなニュースがありました。GoogleからJavaScript実行後のHTMLをインデックスしていると公式コメントが発表されたのです。このニュースを聞いて喜んだフロントエンドエンジニアは多かったことでしょう。
| 日時 | 内容 |
|---|---|
| 2014/05/26 | 「JavaScript実行後のHTMLのインデックスを行っている」とGoogleが発表 |
| 2014/05/28 | WebマスターツールにJavaScriptレンダリングテスト機能を追加 |
| 2014/09/18 | 今年の終わりまでに、GoogleのクローラーはすべてのJavaScriptをレンダリングしますとBrad Green氏がコメント |
2015年「Html Snapshot」が今も主流
そして2015年。AngularJSのSEO事情は変わったのかというと、特に大きな変化はなかったと私は思っています。やはり、国内、海外の成功事例を見ると、すべて「Html Snapshot」を使い対応していました。
「Html Snapshot」を簡単に説明すると、Ajaxアプリケーションの情報をクローラーに正確に伝えるため、クローラー専用のHTMLを用意し提供する手法です。PhantomJSなどのヘッドレスブラウザでJavaScript反映後のHTMLデータを取得し、「Html Snapshot」ファイルを生成するのが現在主流の対応方法です。
上記の説明でも分かる通り、フロントエンドエンジニア一筋で頑張ってきた人にとっては少し手間のかかる作業です。やはり、「Html Snapshot」を使わなくても、検索エンジンにクロールされインデックスされるのが理想ですよね。ということで、今回は「Html Snapshot」を使用せずにAngularJSで簡単なシングルページアプリケーションを作成し、正常にGoogleに認識されるかの実験を行いました。
なお、記事内で使われている「インデックスされた」は、「検索結果に表示された」「検索エンジンに認識された」と同等の意味で使わせていただきます。
検証
目的
SEOを特に意識せずに作成したシングルページアプリケーションが、正しく検索結果に反映されるかを検証。
- AngularJSで作成したシングルページアプリケーションが検索結果に反映されるか？
- AngularJSで生成したHTML内のリンクを正しくクロールするのか？
検証方法
下記の内容で検証用ページの作成を行いました。AngularJSのバージョンは1.2.16を使用しています。
| ページ名 | 内容 |
|---|---|
| LP | 特定のキーワードで評価の高い、個人所有のLPから検証ページへのリンク配置 |
| List | AngularJSを使い作成した記事一覧ページ。routerのパスは「/」 |
| End | AngularJSを使い作成した記事詳細ページ。routerのパスは「/end/:id」 |
今回は検証のために、下記の6パターンのシングルページアプリケーションを用意しました。
| No | router | Default Content |
|---|---|---|
| List-1 | hash（#） | none |
| List-2 | hash（#） | Angular Template |
| List-3 | hash（#） | Publish HTML |
| List-4 | html5Mode | none |
| List-5 | html5Mode | Angular Template |
| List-6 | html5Mode | Publish HTML |
- router： ＃（hash）、html5Mode（pushState）の2パターンを用意。
- Default Content： HTMLファイルのコンテンツ領域に記載する内容。3パターンを用意。
検証結果の確認方法
下記の目標が達成できれば成功。達成できない場合は失敗と判断します。
- Listがインデックスされ、検索結果に表示されるかを判断。
- Endがインデックスされ、検索結果に表示されるかを判断。
下記の方法でインデックスの確認を行います。
- Google検索で「site:」コマンドを実行し、検索結果を確認。
- ウェブマスターツールのインデックス数を確認。
検証結果
- クロールに関しては正常に動作しました。
- Listは正常に検索結果に反映されました。
- Endは通常の方法では検索結果に反映されませんでした。
- ある方法を使うとEndも検索結果に表示されることが判明しました。
