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

SEOならSEOパック

[2017/01/10] (最終更新日 2021/07/20)

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

170110-chrome-devtool-5techniques11

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

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

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

Chromeデベロッパーツールとは?

Chromeデベロッパーツールとは、GoogleのChromeブラウザに搭載されているツールで、ウェブページの不具合や表示スピード、通信状況などを確認できるデバッグツールです。

デバッグツールと聞くと、ウェブのプロの人の為の機能と思われるかもしれませんが、あまり知識を持たない私たちが使ってもとても便利な機能なのです。

Chromeデベロッパーツールの起動

Windowsを利用している場合は、Chromeブラウザ右上の「Google Chromeの設定」から「その他のツール」>「デベロッパーツール」で起動できます。
また、ブラウザ上で「右クリック」をし「検証」でも起動できます。

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

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

デベロッパーツールを開き、「Elements」タブをクリックするとページのコンテンツが確認できます。
DOM構造に従って要素が折りたたまれているので非常に可視性が高くなっています。
デベロッパーツール

170110-chrome-devtool-5techniques03

②SSL確認

サイトのセキュリティのために導入されるSSL。折角SSLを取り入れていても、設定を間違えていると認証がなされないことがあります。
正しくSSLが適用されたページになっているかを確認する場合、デベロッパーツールのタブから「Security」をクリックします。
正しくSSLが設定されている場合、図のように「This page is secure (valid HTTPS).」が表示されます。

③画像のalt属性確認

「この画像、alt入れたっけ?」というときにも、Chromeデベロッパーツールならすぐに確認できます。
調べたい画像の上で右クリックをし「検証」を選択します。

 
検証の画面の方では、該当するimg要素がフォーカスされ、各属性の状態も一目瞭然。調べたい画像にはしっかりとaltが設定されている事がわかりました。
img要素

④適用されているCSSを確認する

img要素のalt同様、「この部分に適用されているCSSはなんだろう?」という場合もChromeデベロッパーツールで確認できます。

下線部分のCSSを確認

上の下線部分のCSSを確認する場合には、その下線部分上で「右クリック」をし、検証画面を開きます。
すると、検証画面では次のようなCSSが確認できました。上から適用されている順に並んでいます。

表示されているCSSは検証画面上で変更する事が可能です。試しに、CSSを変更した表示を確認したい場合など、とても便利です。

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

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

Chromeデベロッパーツールで便利なのは、モバイル環境をシミュレートして表示速度を調べられる点です。
「Network」を選択し「Caching」でキャッシュを消去するかどうか。「Network throtting」で回線を選択。「User Agent」でユーザーエージェントを選択。
 

170110-chrome-devtool-5techniques06

すると、各ファイルの読み込み状況が図示され、最終的な読み込み時間が一番下に(Load: 3.77s)で表示されています。3.77秒・・まあまあですね!

まとめ

ここまでChromeデベロッパーツールをご紹介してきました。ちょっとhtmlが気になる、ページのエラーが出てないか確認したいなど、便利な使い方ができるツールという事をわかっていただけたでしょうか?
また、ウェブサイトの管理をしていると「Elements」は、htmlやcssの確認、実装テストなど、デベロッパーツールの中で一番使うパネルとなります。
Chromeデベロッパーツールを効率的に使うことで、より良いSEO対策が出来ます。日頃からページの状態を確認するクセをつけて、効率的な対策を進めましょう。

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

SEO対策サービスSEO Packキャンペーン

SEOツール無料トライアル

コンテンツ分析や内部SEO対策、競合分析ができるSEOツール。

メールアドレス入力で7日間無料トライアル開始!

<

seodoor by SEO Pack

登録申し込み後自動でログインされます。アカウント情報はご登録のメールアドレスへ自動送信されますのでご確認ください。
以前ご登録いただいたメールアドレスではご利用いただけません。

SEO対策FAQ

全質問一覧

最新記事

全記事一覧

カテゴリ一覧

全記事一覧

SEO Packブログ byディーボ

このブログについて
キーワード難易度チェックツール

SEOツールseodoor

公式SNS

Twitter

facebook