SHOEISHA iD

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

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

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

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

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


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

検証の履歴(1)

当初の想定

 まずは、私が予測した当初の結果についてお話します。

No router Default Content List Index End Index
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
  • 各種Listのインデックスは成功すると予測しました。
  • Endのインデックスに関しては「List-6」のみが成功すると予測しました。

理由

 Endのインデックスが失敗すると想定した理由は、Googleの発表内容にあります。記事を読むと、インデックス登録システムの強化については明言していますが、クローラーの強化を行ったとは明言していません。

 この記事を読み私が思ったのは、ヘッドレスブラウザのようにクローラー側でレンダリング後のHTMLを取得しているのではなく、クローラーが取得したCSSとJavaScriptを使いインデクサ側でレンダリングを行っている可能性が高いと考察しました。

 その考察が的中していた場合、シングルページアプリで動的に生成するURLを認識できないため、クローラーが巡回しないと予想しました。

 そのため、コンテンツ内に静的にURLを記載している、List-6のEndのみ成功すると予想しました。

 List-1、List-2、List-3のEndに関してはhash形式のURLをクローラーが認識できず、失敗すると予想しました。

2014/11/04 検証ページ公開

 検証用のページを公開しました。

2014/11/06 インデックス確認

概要

項目 内容
結果 Listのみインデックス
問題 一部ListのTitleにAngular変数が入っている
考察 時間が経過すれば改善されるのでは?
対応 様子を見るため、現状維持

詳細

 早速、インデックス状況が更新されたので確認しました。

No router Default Content List Index End Index
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 ×
  • Listはすべてインデックスされました。
  • Endはすべてインデックスされませんでした。
  • Listは検索結果に問題があり、List-4、List-5、List-6のタイトルとスニペットにはAngular変数が入っていました。
image02
image02

 hash(#)に関しては、Ajaxページだと早期に認識できた可能性が高いです。逆にhtml5Modeの場合、通常ページとの識別ができなかったため、レンダリング前のTitle、descriptionの内容でインデックスしてしまった予測しました。

 しかし、時間が経過すれば正常な状態で表示されると判断したため、経過を観察することにしました。

2014/11/10 インデックス確認

概要

項目 内容
結果 List-4、List-5のAngular変数表示が改善
問題 List-6はAngular変数が入っている
考察 時間が経過すれば改善されるのでは?
対応 様子を見るため、現状維持

詳細

 List-4、List-5の検索結果に変化があり、前回表示されていたAngular変数が消え正常な結果でインデックスされました。

 List-6に関しては前回と同様、Angular変数が反映された状態のままでした。

 List-6に関してはレンダリング済みのHTMLが入っているため、シングルページアプリケーションと認識されるまで時間がかかっていると予想しました。

 前回と同様、経過を観察することにしました。

2014/11/27 インデックス確認

概要

項目 内容
結果 Listはすべて正常にインデックス
問題 Endがインデックスされていない
考察 クローラーがアクセスしていないのでは?
対応 LPをインデックス送信

詳細

 List-6もAngular変数が消え、正常な結果でインデックスされました。しかし、このままではEndページがインデックスされないまま、2015年を迎えることになりそうだったので対策を講じることにしました。

 私はEndページまでクローラーがたどりついてない可能性があると予想しました。そのため、クローラーの巡回を促進する対策を数回に分けて行えば、Endページのインデックスが正常に行われるのではないか、と思いました。

Fetch as Googleページサンプル
Fetch as Googleページサンプル

 今回、「Googleウェブマスターツール」を使いLPに対して「Fetch as Google」のレンダリングリクエストを実行。サイト全体をクローラーが回るようにインデックス情報を送信しました。

 以降、上記の対応を「インデックスの送信」と呼びます。

2014/12/16 インデックス確認

概要

項目 内容
結果 変化なし
問題 Endがインデックスされていない
考察 クローラーがアクセスしていないのでは?
対応 EndのURLを記載したsitemap.xmlを送信

詳細

 インデックス状況に変化はありませんでした。

sitemap送信ページサンプル
sitemap送信ページサンプル

 今回は、「Googleウェブマスターツール」を使い、EndページのURLのみが記載されている「sitemap2.xml」を作成し送信しました。専用の「sitemap.xml」を用意した理由は、「Googleウェブマスターツール」から正確なインデックス数を確認するためです。

 Googleの「site:」コマンドの精度は完璧ではありません。もしかしたら、検索結果画面に表示されていないだけで、ウェブマスターツール側はインデックスを認識している可能性もあったため、対応しました。

2014/01/07 インデックス確認

概要

項目 内容
結果 変化なし
問題 Endがインデックスされていない
考察 クローラーがアクセスしていないのでは?
対応 List-4_End1をインデックスの送信

詳細

 インデックス状況に変化はありませんでした。前回送信した「sitemap2.xml」のインデックス数をウェブマスターツールで確認しましたが、0件のまま特に変化はありませんでした。

 今回は試しに、直接Endページをインデックス送信することにしました。List-4_End1のみ、実験的にインデックスの送信を行ってみました。

次のページ
検証の履歴(2)

修正履歴

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング