SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
検証に利用したAngularJSアプリのコードについて

修正履歴

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
LINEフロントエンドレンジャーのWeb開発術連載記事一覧

もっと読む

この記事の著者

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

LINE株式会社に在籍しているフロントエンドエンジニア。LINE内Webアプリを担当。2002年からSEOの情報を趣味の一環として収集している。最近はサーバーサイドレンダリング無しで、Single Page ApplicationをGoogleに認識させる為の検証を進めている。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8543 2016/07/19 11:09

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング