Google が、提供している Lighthouse という Chrome 拡張機能をご存知でしょうか？
このツール、様々な事を調べてくれるのですが、そのチェック項目の中に、何と SEO という項目があるんです！
Google の公式ツールで、SEO 対策状況を教えてくれるなんて、素晴らしい！
ここでは、
「そもそも Lighthouse とは何なのか？」
「Lighthouse ってどうやって使うの？」
「Lighthouse で、どんな事が分かるの？」
といった内容を、順を追って、分かりやすく解説したいと思います。
Lighthouse とは？
公式ブログでは、以下のように説明されています。
Lighthouse は、ウェブページの品質向上に役立つよう開発された、オープンソースの自動化されたツールです。
サイトのパフォーマンス、アクセシビリティ、プログレッシブ ウェブアプリ（PWA）対応状況などについての確認でき、サイトの品質を向上させるための具体的な対策を提示します。
デベロッパーの皆様が「暗礁に乗り上げないようにする」ことを目的としているため、「Lighthouse（灯台）」と名付けられました。
引用：Lighthouse Chrome 拡張機能に追加された SEO カテゴリのご紹介 – Google ウェブマスター向け公式ブログ
サイト管理者や開発者が迷わないように、サイトのパフォーマンスや使いやすさなど、その Web サイトの品質チェックを行い、その改善案を教えてくれるツールです。
Google には、表示速度をチェックする同じようなツールがあります。
この 2 つのツールは、それぞれ表示速度をチェックする事に特化したツールです。
しかし、Lighthouse では、表示速度以外にも、プログレッシブ ウェブアプリ（PWA）や、基本的な SEO 対策の対応状況など、幅広くチェックしてくれます。
また、インターネット上に公開していないページでも使う事ができます。
但し、当たり前ですが、Chrome でしか使えません。
Lighthouse のインストール方法
特に難しい事は、ありません。
Chrome で、以下のページにアクセスして、他の拡張機能と同じようにインストールするだけです。
- Chrome Web ストア – Lighthouse を、Chrome を使って表示する。
- [+ Chrome に追加 ] ボタンをクリック。
- 確認画面が表示されるので、[ 拡張機能を追加 ] をクリック。
Lighthouse の使い方
これも、全く難しいことはありません。
チェックする手順
- チェックしたいページを、Chrome を使って表示する。
- 右上にある灯台の形をした Lighthouse のアイコンをクリック。
- [Generate report] ボタンをクリック。
チェックには、1 ～ 2 分かかり、その間は、灯台の明かりがクルクル回っています。
チェックが完了すると、結果が別ウィンドウで表示されます。
動画では、[SEO] だけをチェックしていますが、上記手順、つまり、オプションを何も変更しなければ、全てチェックしてくれます。
チェックする際の注意点
Chrome に他の拡張機能をインストールされている場合は、他の拡張機能の影響を受けないために、シークレットウィンドウで実行することをおすすめします。
- Chrome の設定画面「chrome://extensions/」をブラウザで開く
- Lighthouse の詳細を表示
- 「シークレット モードでの実行を許可する」をオンに変更
シークレットウィンドウの詳しい説明については、以下の公式サイトをご覧ください。
Lighthouse を使って解析できる事
- Performance（サイトのパフォーマンス）
- ProgressiveWebApp（プログレッシブ ウェブアプリ対応状況）
- Accessibility（サイトの読みやすさ・使いやすさ）
- BestPractice（ベストプラクティス）
- SEO（基本的な SEO 対応状況）
大きく分けると、この 5 点を解析することができます。
結果や改善案は、全て英語で表示されます。
英語が苦手な方は、Google 翻訳などを使い、頑張ってみてください。
指摘される内容や、その改善案については、数が非常に多く、完全に把握できていないため、詳しい説明ができません。
期待していた方、すいません。
ただ、かなり細かく説明してくれますので、対応はそれほど難しくないと思います。
Performance（サイトのパフォーマンス）
画像では、分かりにくいと思いますが、何が良くて・何が悪いか、細かく教えてくれます。
例えば、Javascript の読み込みや、キャッシュを使用しなさい、など。
この項目は、PageSpeed Insights と、基本的に内容は同じです。
なので、以下のページが参考になると思います。
ProgressiveWebApp（プログレッシブ ウェブアプリ対応状況）
当サイトでは、PWA 対応は行っていないので、残念な結果になりました。
PWA は、Progressive Web Apps の略。
Google は、PWA について、以下のように説明しています。
ウェブとアプリの両方の利点を兼ね備えたアプリです。
ざっくりいうと、モバイルで Web サイトを、高速で動作する携帯アプリみたいにできるもの。
なので、携帯のホーム画面にアイコンを表示することもできます。
Accessibility（サイトの読みやすさ・使いやすさ）
HTML の記述内容や、PC・モバイルでの読みやすさについて調べてくれます。
私は、alt 属性が指定されていない画像がある、iframe タグの記述方法が悪いぞ、と叱られました。
BestPractice（ベストプラクティス）
今のところ問題無いけど、ここも対応しておいた方がいいよ、みたいなことを教えてくれます。
ここでは、リンク先が安全じゃない、安全が保証されていない Javascript を読み込んでいるよ、などを指摘されました。
SEO（基本的な SEO 対応状況）
モバイルフレンドリーであるか、構造化データが正しく指定されているか。
title タグや、canonical タグなどが正しく指定されているかなど、SEO の基本的な内容を、チェックしてくれます。
まとめ
Lighthouse は、今まで別々に提供されていた Google のチェックツールを、一度にチェックできる便利な Chrome の拡張機能です。
以下の通り、今のところ、基本的な SEO のチェックしかできませんが、一度チェックしてみては如何でしょうか？
現在の SEO 監査項目はすべてを網羅したものではなく、Google ウェブ検索やその他の検索エンジンでの SEO を保証するものでもありません。
現在のリストは、どのサイトも知っておくべき基本事項を検証、反映できるよう設計されており、あらゆるスキルレベルの SEO 担当者やデベロッパー向けに詳細なガイドを提供します。
将来的には、さらに詳しい監査やガイドをご提供したいと考えています。
引用：Lighthouse Chrome 拡張機能に追加された SEO カテゴリのご紹介 – Google ウェブマスター向け公式ブログ
今後、さらに詳しいチェックができるようにすると言われているので、期待して待ちましょう。
参考サイト
コメント