Googleが、SEO対策をチェックくれるツール紹介!

lighthouse

Google が、提供している Lighthouse という Chrome 拡張機能をご存知でしょうか?

このツール、様々な事を調べてくれるのですが、そのチェック項目の中に、何と SEO という項目があるんです!

Google の公式ツールで、SEO 対策状況を教えてくれるなんて、素晴らしい!

ここでは、

「そもそも Lighthouse とは何なのか?」

「Lighthouse ってどうやって使うの?」

「Lighthouse で、どんな事が分かるの?」

といった内容を、順を追って、分かりやすく解説したいと思います。

スポンサーリンク

Lighthouse とは?

公式ブログでは、以下のように説明されています。

Lighthouse は、ウェブページの品質向上に役立つよう開発された、オープンソースの自動化されたツールです。

サイトのパフォーマンス、アクセシビリティ、プログレッシブ ウェブアプリ(PWA)対応状況などについての確認でき、サイトの品質を向上させるための具体的な対策を提示します。

デベロッパーの皆様が「暗礁に乗り上げないようにする」ことを目的としているため、「Lighthouse(灯台)」と名付けられました。

引用:Lighthouse Chrome 拡張機能に追加された SEO カテゴリのご紹介 – Google ウェブマスター向け公式ブログ

サイト管理者や開発者が迷わないように、サイトのパフォーマンスや使いやすさなど、その Web サイトの品質チェックを行い、その改善案を教えてくれるツールです。

Google には、表示速度をチェックする同じようなツールがあります。

PageSpeed Insights

モバイルサイトの読み込み速度とパフォーマンスをテストする

この 2 つのツールは、それぞれ表示速度をチェックする事に特化したツールです。

しかし、Lighthouse では、表示速度以外にも、プログレッシブ ウェブアプリ(PWA)や、基本的な SEO 対策の対応状況など、幅広くチェックしてくれます。

また、インターネット上に公開していないページでも使う事ができます。

但し、当たり前ですが、Chrome でしか使えません。

Lighthouse のインストール方法

特に難しい事は、ありません。

Chrome で、以下のページにアクセスして、他の拡張機能と同じようにインストールするだけです。

インストール手順

  1. Chrome Web ストア – Lighthouse を、Chrome を使って表示する。
  2. [+ Chrome に追加 ] ボタンをクリック。
  3. 確認画面が表示されるので、[ 拡張機能を追加 ] をクリック。

Lighthouse の使い方

これも、全く難しいことはありません。

チェックする手順

how to use lighthouse

手順

  1. チェックしたいページを、Chrome を使って表示する。
  2. 右上にある灯台の形をした Lighthouse のアイコンをクリック。
  3. [Generate report] ボタンをクリック。

チェックには、1 ~ 2 分かかり、その間は、灯台の明かりがクルクル回っています。

チェックが完了すると、結果が別ウィンドウで表示されます。

lighthouse - result

動画では、[SEO] だけをチェックしていますが、上記手順、つまり、オプションを何も変更しなければ、全てチェックしてくれます。

チェックする際の注意点

Chrome に他の拡張機能をインストールされている場合は、他の拡張機能の影響を受けないために、シークレットウィンドウで実行することをおすすめします。

シークレットウィンドウ Lighthouse 設定方法

  1. Chrome の設定画面「chrome://extensions/」をブラウザで開く
  2. Lighthouse の詳細を表示
  3. 「シークレット モードでの実行を許可する」をオンに変更

シークレットウィンドウの詳しい説明については、以下の公式サイトをご覧ください。

プライベート ブラウジング - パソコン - Google Chrome ヘルプ
Google Chrome で閲覧内容が記憶されないようにするには、シークレット モードでプライベート ブラウジングを行います。 パソコンで Chrome を開きま

Lighthouse を使って解析できる事

  • Performance(サイトのパフォーマンス)
  • ProgressiveWebApp(プログレッシブ ウェブアプリ対応状況)
  • Accessibility(サイトの読みやすさ・使いやすさ)
  • BestPractice(ベストプラクティス)
  • SEO(基本的な SEO 対応状況)

大きく分けると、この 5 点を解析することができます。

結果や改善案は、全て英語で表示されます。

英語が苦手な方は、Google 翻訳などを使い、頑張ってみてください。

指摘される内容や、その改善案については、数が非常に多く、完全に把握できていないため、詳しい説明ができません。

期待していた方、すいません。

ただ、かなり細かく説明してくれますので、対応はそれほど難しくないと思います。

Performance(サイトのパフォーマンス)

lighthouse - result - performance

画像では、分かりにくいと思いますが、何が良くて・何が悪いか、細かく教えてくれます。

例えば、Javascript の読み込みや、キャッシュを使用しなさい、など。

この項目は、PageSpeed Insights と、基本的に内容は同じです。

なので、以下のページが参考になると思います。

PageSpeed Insights のルール  |  Google Developers

ProgressiveWebApp(プログレッシブ ウェブアプリ対応状況)

lighthouse - result - progressive web app

当サイトでは、PWA 対応は行っていないので、残念な結果になりました。

PWA は、Progressive Web Apps の略。

Google は、PWA について、以下のように説明しています。

ウェブとアプリの両方の利点を兼ね備えたアプリです。

引用:はじめてのプログレッシブ ウェブアプリ – Google Developers

ざっくりいうと、モバイルで Web サイトを、高速で動作する携帯アプリみたいにできるもの。

なので、携帯のホーム画面にアイコンを表示することもできます。

はじめてのプログレッシブウェブアプリ  |  Web Fundamentals  |  Google Developers

Accessibility(サイトの読みやすさ・使いやすさ)

lighthouse - result - accessibility

HTML の記述内容や、PC・モバイルでの読みやすさについて調べてくれます。

私は、alt 属性が指定されていない画像がある、iframe タグの記述方法が悪いぞ、と叱られました。

BestPractice(ベストプラクティス)

lighthouse - result - best practice

今のところ問題無いけど、ここも対応しておいた方がいいよ、みたいなことを教えてくれます。

ここでは、リンク先が安全じゃない、安全が保証されていない Javascript を読み込んでいるよ、などを指摘されました。

SEO(基本的な SEO 対応状況)

lighthouse - result - seo

モバイルフレンドリーであるか、構造化データが正しく指定されているか。

title タグや、canonical タグなどが正しく指定されているかなど、SEO の基本的な内容を、チェックしてくれます。

まとめ

Lighthouse は、今まで別々に提供されていた Google のチェックツールを、一度にチェックできる便利な Chrome の拡張機能です。

以下の通り、今のところ、基本的な SEO のチェックしかできませんが、一度チェックしてみては如何でしょうか?

現在の SEO 監査項目はすべてを網羅したものではなく、Google ウェブ検索やその他の検索エンジンでの SEO を保証するものでもありません。

現在のリストは、どのサイトも知っておくべき基本事項を検証、反映できるよう設計されており、あらゆるスキルレベルの SEO 担当者やデベロッパー向けに詳細なガイドを提供します。

将来的には、さらに詳しい監査やガイドをご提供したいと考えています。

引用:Lighthouse Chrome 拡張機能に追加された SEO カテゴリのご紹介 – Google ウェブマスター向け公式ブログ

今後、さらに詳しいチェックができるようにすると言われているので、期待して待ちましょう。

参考サイト

Lighthouse Chrome 拡張機能に追加された SEO カテゴリのご紹介
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報
Lighthouse によるウェブアプリの監査  |  Tools for Web Developers  |  Google Developers
Lighthouse を設定してウェブアプリを監査する方法について説明します。

コメント