Google Chromeのデベロッパーツールを使ってみた
最近、JavaScriptリンクをGoogleがどう評価・判断しているのかという事が話題になり、色々と調べてみました。個人的にあまりJavaScriptリンクを使う機会も無く、GoogleがJavaScriptのリンクも辿っているということは分かっていたのですが、いまいち理解していませんでした。
そこで、Twitterでそういったツイートをした所、hlw.meの@hlwmeさんに色々と教えてもらう事が出来ました。それを元に書いたのが以下の記事です。
- JavaScriptリンクにnofollowを付ける方法
- 色々なリンクの形態によるリンクジュースの流れ方
- JavaScriptリンクによるnofollow実験第二弾
- nofollow付きのリンクやJavaScriptリンクの実験結果
今回の記事のタイトルにあるGoogle Chromeのデベロッパーツールというのは、このJavaScriptの流れから存在を知ったツールです。
JavaScriptはHTMLソースで見るとJavaScriptのコードが見えるだけで、そのコードがどのようなHTMLを出力しているのかという部分までは見る事が出来ません。そこで、再び@hlwmeさんにお聞きして紹介してもらったのがGoogle Chromeのデベロッパーツールだったというわけです。
JavaScriptが出力したHTMLを確認する方法
当サイトのサイドバーにあるこの部分は、JavaScriptでイメージとテキストリンクを読み込んでいます。
HTMLソースで見ると以下のようになっています。
<script language="JavaScript" type="text/javascript" src="http://afi8.com/js/temp.js"></script>
このように外部化したJavaScriptファイルを読んでいます。これについては以前、「Javascriptで画像やテキストをランダムに切り替える方法」で解説したとおりです。
このソースを見ただけでは、どのようなHTMLが出力されているのかを確認する事が出来ません。そこで登場するのが、Google Chromeのデベロッパーツールというわけです。Firefoxの場合は、Firebugというアドオンが同じ機能を備えています。
Google Chromeのデベロッパーツールの使い方
スパナアイコン ⇒ ツール ⇒ デベロッパーツール
左下の虫眼鏡アイコンをクリックして、中身を見たい部分をマウスで選択します。選択している部分に水色のフィルタがかかるので分かりやすいと思います。
選択した部分のソースを見ると、JavaScriptではなく、HTMLとして出力されたaタグを見る事が出来ます。これでどのように検索エンジンに認識されているのかが分かると思います。
これ以外にもデベロッパーツールでは、指定した場所のCSSを見ることもできますし、もちろん自分のサイトでなくても見る事が出来ますので、気になるサイトのJavaScriptやCSSの中身が見たいという場合にも活用できると思います。
