Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

SEO検証! GoogleはAngularJSを正しくクロールするのか?(2015年2月版)

LINEフロントエンドレンジャーのWeb開発術 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/03/23 14:00

 本連載はLINEのフロントエンドエンジニアのチームがWeb開発において注目・活用している技術を紹介します。今回は、GoogleのクローラーがどこまでJavaScriptを認識するのかをAngularJSを使い簡単に検証しましたので、お話させていただきます。

目次

はじめに

 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を使用しています。

image01
image01
ページ名 内容
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も検索結果に表示されることが判明しました。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2016/07/19 11:09 誤字修正:機械損失⇒機会損失

著者プロフィール

  • 姜 勝陽(LINE株式会社)(キョウ ショウヨウ)

    LINE株式会社に在籍しているフロントエンドエンジニア。NAVERまとめやLINE内Webアプリを担当。2002年からSEOの情報を趣味の一環として収集している。 最近はシングルページアプリケーションにおけるGoogle Analyticsを使ったデータの集計手法の策定に力を入れている。

バックナンバー

連載:LINEフロントエンドレンジャーのWeb開発術

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5