Chromeデベロッパーツールのご紹介「SEO初歩編」

WEBサイト分析で便利なデベロッパーツール。
なんとなく使っている方も多いのではないでしょうか。
今回は誰かが使っているのを見たことはあるが具体的にどう使っていいかわからない方向けに
SEO視点でどのように使えるかをご案内したいと思います。

デベロッパーツールはGoogleChromeブラウザの機能で
ブラウザ内を右クリックすると表示される「検証」をクリックすると表示されます。

今回ご紹介するのは、マークアップの確認や修正についてです。
具体的には見出しタグやaltタグなどのHTMLタグと言われる内容の確認と修正方法についてです。
デベロッパーツールを実際に使ってましょう。
今回はSEO視点ですので、例としてまずはGoogleのソースを見てみましょう。

↓

これだけたくさんの方々が使用しているGoogleですが、いろいろなサイトのソースを見ている方も実際にGoogleのソースを見たことがあるのはほとんどいないのではないでしょうか。
多分多くの方が驚かれるかもしれないですが、Googleのソースはこんな感じです。
・・どうでしょう？とても見にくく確認しにくいと思います。

これはGoogleのこだわりでネット上の情報を集めるクローラーに対して負担をいかに少なくスピーディーにストレスなく情報を集められるように改行を一切つかわないソースで記述されています。

我々が目視するときはわかりやすく改行を多様するのですが、クローラーに対しては改行がない方が読みやすいようです。
ただ、こういうサイトもHTMLタグなどがどのように記述されているのか目視で確認したいですよね。
そのときに有効なのがこのデベロッパーツールです。

デベロッパーツールを使うとこういうソースも我々人間にとって非常に見やすくしてくれます。

↓

どうでしょう？
非常に見やすいですよね。これだけでもデベロッパーツールを使う意味が非常に大きいです。
charsetの文字コード、meta description、titleの内容などすぐ確認ができます。

また、ソース部分が直接確認できるだけでなく、実際に修正をすることでブラウザの表示内容を変更することもできます。
やり方はwindowsであれば「Ctrl+Shift+C」のショートカットで起動する画面で確認したい箇所を左クリック、その後フォーカスされた箇所を書き換えると表示が変わります。

↓

このようにテキストなどを書き換えて画面で確認することができます。
テキストだけでなく画像やCSSなどの修正も可能です。

SEOのチェックで必須になるヘッダ情報や見出しの確認などデベロッパーツールを使えば迅速に行うことができます。

ぜひ使ってみてください。

この記事を書いた人
最新の記事

Akira Kodaka

2005年、SEO・サイト制作で起業。法人向けSEOを請け負いつつ、アフィリエイターとしても活動（当時国内上位1%の報酬獲得実績達成）。また、同時期に美容室を買収し、黒字化させてバイアウト。その後、2010年から8年間、Googleで広告運用スペシャリストとして活躍。新規クライアント専門ビジネス支援部門リード、広告代理店営業マネージャー、通信テクノロジー業界シニアアカウントマネージャーを経験。2018年、株式会社援軍設立。