Google製 拡張機能「Lighthouse」でSEOのチェックをしてみた

SEO

Google製 拡張機能「Lighthouse」でSEOのチェックをしてみた

2018年09月24日 14:00 

Google製 拡張機能「Lighthouse」でSEOのチェックをしてみた

こんにちは、社員Aです👩!

先日のブログでもちょっとお話させていただいたんですが、現在SEO勉強中で、勉強したことのアウトプットの場としてこのブログのSEO対策も行っているのですが、今回はGoogleがリリースしているGoogle Chromeの拡張機能「Lighthouse」で、このブログのSEOチェックをしてみました!

普段のSEO対策が実際にどれくらいGoogleに評価されているのか知れるので、ちょっとドキドキです。



 

ことしリリースされた「Lighthouse Chrome」

2018年2月6日にGoogleウェブマスター向け公式ブログで下記のような発表がありました。

Lighthouse 内の SEO カテゴリでは、ウェブページの基本的な「SEO ヘルスチェック」を実行できます。その結果、デベロッパーやウェブマスターの皆様にウェブページで改善可能な箇所を見つけていただけるようになっています。Lighthouse は Chrome ブラウザでローカルに実行されるため、ステージング環境でも、公開中のページでも、認証が必要なページでも、同じように SEO 監査を実行できます。

こちらの拡張機能を使うことで、該当ページを様々な観点から評価してくれるものです。日本語版はまだリリースされておらず、言語は全て英語になります。

 

実際に「Lighthouse Chrome」を使ってみる

プラグインのインストール

まずはプラグインをインストールします。

 

チェックしたいページ上で、拡張機能をクリック

プラグインをインストールしましたら、チェック対象のページを開きます。

当ブログでは、試しに下記記事で試してみたいと思います。

 

そして拡張機能を開き、右下にある「Generate report」のボタンをクリックすると、解析が開始します。

このボタンを押してから2〜3分くらいかけて解析が始まりますので、少し待たないといけません。

 

当ブログのSEO評価はどれほどか?

上記手順でレポートが生成されますと、別タブで表示されます。

改善が必要な部分が「レッド」、その次に注意が必要な部分が「オレンジ」、問題ない部分は「グリーン」で表示されるのでわかりやすいですね。

早速レポートをもとに、解説していきたいと思います。

 

1.Performance

当ブログの先程の記事のパフォーマンスは「19」。これはかなり悪いのではないでしょうか…?

それぞれ解説すると下記のようになります。

First Contentful Paint
ページにアクセスしてからブラウザがコンテンツの最初のビットをレンダリングするまで時間を表します。 改善方法は、リソースのダウンロード時間を短縮するか、ブラウザがDOMコンテンツをレンダリングするのをブロックする作業を減らします。
First Contentful Paint
ページのコンテンツが目に見える状態になるまでの時間を表します。 Speed Index のスコアを低くするには、ページを最適化して、視覚的な観点で読み速度を上げる必要があります。
Time to Interactive
ページが表示され、ユーザー操作が可能になるタイミングを特定します。
First Meaningful Paint
ユーザーがページの主要コンテンツが表示されたと認識するタイミングを特定します。
First CPU Idle
ページが入力を受け付ける状態になった時間。
Estimated Input Latency
ユーザーの入力に応答するまでの時間の予測。

 

2.Progressive Web App

Progressive Web Appは、プログレッシブWebアプリケーションの側面が検証されますと書いてありました。

このブログの記事での数値は、「31」でした。

原因としては、下記のようなものが該当するようです。

  1. ページの読み込みが3Gで十分速くない
  2. オフラインのときにステータスコード200を返さない
  3. ユーザーにWebアプリケーションのインストールを求めるメッセージが表示されない
  4. サービスワーカーを登録しない
  5. カスタムスプラッシュ画面用に設定されていない
  6. アドレスバーがブランドの色と一致しない

結構細かく評価されていますね。

この部分に引っかかった場合、レポート上でカーソルを当てて「Learn more」を押すとどのように対策すれば改善するのか、対策を教えてくれます。

自分のサイトで悪かった部分をGoogleのアナウンス通りに改善していくだけでも、変わっていくということでしょう。



3.Accessibility

3つ目はアクセシビリティです。

このブログの記事での評価は「53」でした。やっとここまで来て、普通のラインに達しました!

減点されている原因は、下記のようです。

  1. 画像にAltが設定されていない箇所がある
  2. リンクに識別可能なタイトルがない
  3. <iframe>要素にタイトルがない
  4. フォーム要素に関連するラベルがない
  5. 背景色と前景色には十分なコントラスト比がない
  6. ページ内の「id」が一意ではない

これ見て思ったんですが、デザイン面まで結構細かく見てるんですね。

そして、これらをクリックすると、サイト内で該当する部分まで細かく表示してくれるので、改善しやすいです。

 

4.Best Practices

Best Practicesは、方法や手順のうち、最もよい結果につながることが明らかなものという意味です。

このブログの記事での評価は、「67」でした。これも普通ということでしょう。

減点されている原因は、下記のようです。

  1. スクロールのパフォーマンスを向上させるためにパッシブリスナーを使用しない
  2. document.write()が導入されていない
  3. 外部リンクに ‘rel =” noopener “または rel = “noreferrer” が追加されていない
  4. セキュリティ上の脆弱性を持つJavaScriptライブラリが含まれている
  5. コンソールにエラーが出ている

どれもセキュリティやパフォーマンス改善のための項目ですね。

 

5.SEO

そして、SEOは 「100」でした!これは嬉しいですね。

主に下記のような観点から評価されるようです。

  1. モバイルフレンドリーになっている
  2. ページの構造(マークアップ)
  3. 基本的な項目の設定(title・Descriptionなど)
  4. ページがインデックスからブロックされていない
  5. robots.txtが有効

思ったよりもSEOのチェック項目は超基本的で簡単なものしかなかったので、満点だったのかもしれません。

逆に、この項目がオレンジや赤だと問題ありということでしょう。

 

まとめ

自分のサイトでどの部分がユーザビリティに影響を与えているのか、またそれをさらに向上させるためにヒントが見つけられたような気がします。

基本的な項目だけでなく、デザイン面などユーザーが見る視点でのチェック項目があったので、勉強になりました。

実際にこれを見ながら、対策が足りていなかった部分を修正していきたいなと思いました。

ただ、これらをすべて対策したからといって上位表示されたり評価が上がることを保証するものではなく、「あくまでこれだけの対策項目がありますよ」ということだと思います。

拡張機能を入れるだけで簡単にチェックができるので、ぜひ試してみてください!

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!