SEO対策に役立つChromeデベロッパーツールの４つの小技

ChromeはGoogleが開発しているWebブラウザです。高速で機能性に富んでいることから近年人気を高め、現在では世界シェアが50%超でダントツの１位。デスクトップブラウザのデファクト・スタンダードとなりつつあります。

Chromeはただページの閲覧がしやすいだけではなく、サイトの運営者・開発者にとっても便利な機能が満載されています。その中核が「Chromeデベロッパーツール」です。

こちらでは、ChromeデベロッパーツールでSEO対策に活かせるテクニックをご紹介します。ツールやソフトを熟知することによって作業効率を高めることは成果を上げるために欠かせません。是非こちらで役立つ小技を覚えていって下さい！

①ページのコンテンツをチェックする

Chromeデベロッパーツールの基本的な機能として、ブラウザでJavaScriptレンダリングがなされた状態でコンテンツがどうなっているかを調べることが出来ます。これは、意図通りにJavaScriptによるHTMLレンダリングがなされているか、検索エンジンのインデックスとの間に差異は無いか、といったことを調べるのに役立ちます。

▲「F12」を押すとデベロッパーツールが開く。
　

▲「Elements」タブをクリックするとページのコンテンツが確認できます。
　

▲DOM構造に従って要素が折りたたまれているので非常に可視性が高くなっています。

②SSL確認

サイトのセキュリティのために導入されるSSL。折角SSLを取り入れていても、設定を間違えていると認証がなされないことがあります。

▲デベロッパーツールのタブから「Security」をクリック
　
　

▲正しくSSLが設定されている場合、図のように「This page is secure (valid HTTPS).」が表示されます。

③画像のalt属性確認

「この画像、alt入れたっけ？」というときにも、Chromeデベロッパーツールならすぐに確認できます。

▲調べたい画像の上で右クリック。「検証」を選択します。
　
　
▲該当するimg要素がフォーカスされ、各属性の状態も一目瞭然。この画像にはしっかりとaltが設定されています。

④ページの表示速度を確認する

ページの表示に時間がかかっていると、ユーザーの離脱率が高まってしまいます。それが続くことによって検索エンジンの評価にも影響する場合があるので、ある程度ボリュームのあるページでは表示速度を調べておくのが良いでしょう。

Chromeデベロッパーツールで便利なのは、モバイル環境をシミュレートして表示速度を調べられる点です。

▲右端のメニューから「More Tools」＞「Network condiitons」を選択。
　
　

▲「Caching」でキャッシュを消去するかどうか。「Network throtting」で回線を選択。「User Agent」でユーザーエージェントを選択。ここでは「AndroidスマホのChromeから4G回線でアクセスした場合」にしています。

▲このままの状態で「Network」タブに切り替え、ページをリロードしてみます。すると各ファイルの読み込み状況が図示され、最終的な読み込み時間が一番下に（Load: 3.77s）で表示されています。3.77秒・・まあまあですね！

まとめ

ツールを効率的に使うことで、より良いSEO対策が出来ます。ですが、順位上昇のためには外部リンクやコンテンツ、2つの対策が必要です。自分のサイトや狙っているキーワードに合った施策を取っていきましょう。