【初心者向け】クロームでできるサイト分析に役立つ拡張機能

サイトを分析する際に役立つ拡張機能を紹介します。

ここで紹介しているもの以外にもたくさんありますが、初心者であればここで紹介するものだけでも十分事足りると思います。

いくつか似たような拡張機能も紹介しますが、最終的には自分が使ってみて使いやすいもの・有益な物を取捨選択してください。

とりあえず★マークを付けたものは入れておくと良いですよ！

＜無料で稼いでみるかい？＞
スマホアドレス登録推奨
「理由は？」←タップで表示・非表示

無料のゲーム・アンケート・資料請求・口座開設・クレカ作成などで数万程度一気に稼げる！さらに普段のショッピングも最大50%OFFになる！

スマホアドレスで登録すると…
• スキマ時間で稼げるように！
• スマホアドレス登録者が優遇！
• 電子マネーなど換金先が増える！
• シェアするだけで稼げるように！
• 後々のステップアップのために！
さらに今(9月現在)なら@300円+50％が永久にもらえる紹介制度！
↓始めるには画像をクリック！

リンク先はショッピングについての説明ですが無料で稼ぐ方法はたくさんあります。※GmailはPCアドレス扱いです

お知らせ
プライムが無料で使えます
トップページをリニューアルしました

Chromeでできるサイト分析

Chromeは非常に便利なので是非使ってください。

まずは拡張機能をなにも使わなくてもできる基本的なことから紹介します。

ソースコードを見る

見たいページで右クリックし、「ページのソースを表示」で見ることができます。

ちなみに当サイトではCSSをインライン化していたり、などいろいろいじってあるので非常に見にくくなっています。

右クリックができないようなサイトでは、以下のようにすると右クリックができるようになります。

デベロッパーツールでCSSを見る

同じように見たいページで右クリックをし、要素の検証を行います。

「検証」をクリックすればOKです。

この「検証」ではモバイル対応をチェックしたり、適用されているCSSを見ることができます。

ちなみに、特定の見たいエリアをドラッグしてから「検証」を開くとその部分がすぐに見れます。

私は主に、自分のサイトのモバイル対応チェックと、デザインを微調整したい時に適用されているCSSのクラスなどを確認する時に使っています。

時々「これどうやっているんだろ？」と他所様のサイトも覗いたりしますけどね。

項目がたくさんありますが、私は必要最低限の知識しかないので要素の検証で使うのは上記程度です。

詳しく使いこなしたい場合は「要素の検証　使い方」「デベロッパーツール　使い方」などで検索すると良いでしょう。

モバイル対応チェックで左上の端末を選んだら一度更新をしないと適用されないこともあるので、更新ボタンを押してください。

Chromeに入れておきたい拡張機能

ここからは拡張機能を使っていきます。

もちろん全て無料で使うことができます。

★Alt & Mera viewer

そのサイトのAlt属性やMeta情報を表示できます。

画像のサイズなども確認することができます。

狙ったキーワードの上位サイトがどのようにしているかチェックしてみましょう。

★ColorPick Eyedropper

指定したエリアのカラーコードを取得できます。

「この色使いたい！」といった時に便利です。

★CSSViewer

マウスを合わせたエリアのCSSをわかりやすく見ることができます。

きれいなサイトを訪問したときなどにサイトデザインの参考になります。

★Full Page Screen Capture

開いているページ全体のスクリーンショットを取ることができます。

サイト分析とは直接的に関係ありませんが、記事を書くときなどに役立ちます。

Awesome Screenshot

開いているページ全体や一部、ローカルファイルなどを1クリックでキャプチャすることができ、さらにそのまま編集が可能です。

動作がちょっと重いのが難点なのと、閲覧したサイトのURLを収集しているなんて話もあるので★マークは外していますが、個人的には利便性が上回るのでそれでも使っています。

★GetTabInfo

開いているタブ全てのタイトルやURLを一括で取得できます。

記事に参考URLを載せるときなどに、かなり便利です。

★goo.gl URL Shortener

開いているページのショートURLをワンクリックで生成できます。

Google Analytics オプトアウト アドオン (by Google)

あまり使用していませんが、公式のアドオンなので一応紹介しておきます。

Google Similar Pages

見ているページと似ているページを見ることができます。

私はあまり使用していません。

★MozBar

いろいろと分析することができます。

若干ブラウザの負荷が大きいため、読み込みが遅くなるので普段はオフにしています。

★NoFollow

見ているページのFollow属性を見ることができます。

nofollowに設定されている場合、赤点線で囲まれます。

最近ではnofollowの意味はないと言われていますが、自分が上位表示を狙うキーワードでの上位サイトがどのような設定をしているのかブラウジングしながら簡単に確認することができます。

★OneTab

これはサイト分析には関係ありませんが、非常に便利なので是非利用してみてください。

見ているタブを一気に1つのタブにまとめることができます。

Open SEO Stats(Formerly: PageRank Status)

見ているサイトの様々な情報を見ることができます。

使い勝手も良く、私もよく利用します。

Page Analytics (by Google)

これもGoogleの公式のものなので一応紹介しておきます。

私はあまり使用していません。

★Popup Image Alt Attribute

画像にマウスを載せた時にAlt属性を表示してくれるというもの。

とりあえず入れておきましょう。

★Appspector

見ているページで使われているサーバ、ライブラリなどがひと目でわかる拡張機能

とりあえず入れておいてもいいかも。

Quick Adsense

Adsenseを使っている人向け。

拡張機能からAdsenseに関する情報を見ることができる。

Quick source viewer

ワンクリックでソースを表示してくれる。

冒頭で書いたソースを表示でも別に構わないのだが、こちらのほうが見やすいかもしれない。

SEO for Chrome

見ているページのSEO情報を見ることができる。

読み込みがあまり早くないので最近は使っていない。

SEO SERP

検索クエリから順位を表示できる。

後述するGRCなどを使っているのであればさほど必要はないが、他サイトの分析に役立つこともある。

★Show Title Tag

見ているページのタイトルを常時表示していてくれる。

表示する位置は四隅を選択できる。

結構便利なので入れておきたい。

★View Selection Source

ドラッグなどで選択した部分のソースを見ることができる。

ピンポイントでソースを見たいときなどに便利。

WaybackMachine

見ているページの過去の内容を見ることができる。

いわゆるウェブアーカイブというやつ。

あまり使用頻度は高くないがこれから参入するジャンルなどの上位サイトを詳細に分析したいときには重宝する。

★Website IP

見ているサイトのサーバーIPアドレスを右下に表示してくれる。

上位のサイトなど詳細に分析する際に役立つことがある。

とりあえず入れておくと便利。

拡張機能はショートカットに登録できる

よく使う拡張機能はショートカットに登録しておくと便利です。

chrome://extensions/を開き、一番下の右あたりに「キーボードショートカット」があるのでクリックしてください。

するとショートカットを設定できる拡張機能が表示されるので、よく使うものだけわかりやすいショートカットを登録しておきましょう。

まとめ

本来こういった拡張機能は「○○がしたい！」→「○○できる拡張機能ないかな？」というプロセスで探すものです。

しかし、逆に初めから「○○できる拡張機能」を入れておけば、既にサイト分析などを行っている人達がどういった点に着目しているのかを知る手助けになります。

また、冒頭でも書きましたが似たような拡張機能はたくさんあるので、実際に使いながら自分なりに有用なものを取捨選択してください。

拡張機能以外でサイト分析に有益なツールはアフィリエイター便利ツールおすすめのまとめも参考してみてください。

上記ページの特にAhrefsやGRCなどは欠かせません。

また、上記ページの各ツールで調べられることは初心者が、「他のWEBサイト運営者が重要視している要素」を理解するための一助にもなります。

【初心者向け】Google検索エンジンアルゴリズムとSEO対策

200以上あると言われているGoogleの検索順位決定のアルゴリズムとそれを受け...続きはタップ