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

SEOならSEOパック
ご利用実績8715件 (2017/01/18現在)

[2017/01/10] (最終更新日 2017/01/13)

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

170110-chrome-devtool-5techniques11

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

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

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

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

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

170110-chrome-devtool-5techniques01▲「F12」を押すとデベロッパーツールが開く。
 

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

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

②SSL確認

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

170110-chrome-devtool-5techniques09▲デベロッパーツールのタブから「Security」をクリック
 
 

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

③画像のalt属性確認

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

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

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

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

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

170110-chrome-devtool-5techniques04▲右端のメニューから「More Tools」>「Network condiitons」を選択。
 
 

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

 

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

まとめ

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

◎検索1位のSEOを無料チェックしてみよう。
 評価されてるコンテンツリンク対策のめやすがわかります。

必要なコンテンツ(文章)の内容やリンク本数は、狙うキーワードによって異なります。
このツールで、Googleの「今」の傾向をかんたんチェックしてみましょう。

この記事が役に立ったらSNSで共有してください。

分析 順位に聞いてるリンク対策法 今のSEO、必要なのはどんなリンク?何本のリンク?

SEO Pack導入事例

全事例一覧

SEO対策FAQ

全質問一覧

最新記事

全記事一覧

カテゴリ一覧

全記事一覧

SEO Packブログ byディーボ

このブログについて