スポンサーリンク
calculator confirm

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 のルール  |  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 を設定してウェブアプリを監査する方法について説明します。

コメント