Lighthouseを使ってみよう

Googleウェブマスター向け公式ブログでGoogle Chromeの拡張機能であるLighthouseの使い方を説明してくれていますので、私もLighthouseのご紹介をしたいと思います。

灯台

ふわふわ

Lighthouseって?

Lighthouseとは、Chromeに設置する拡張機能でして、該当ページの「Performance(表示速度に関わる指標やCSSの記述等)」「Progressive Web App(プログレッシブウェブアプリとしての構文等)」「Accessibility(アクセスのしやすさ)」「Best Practices(最高品質にするための推奨項目)」をチェックすることができますが、ここに新しく「SEO」という項目が出来ました。

Lighthouseのアイコン

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

引用)Googleウェブマスター向け公式ブログ

診断結果

この「SEO」の項目では簡単な10項目に合わせて該当ページをチェックし、診断してくれるという仕組みです。

Lighthouse内のSEOカテゴリでは、ウェブページの基本的な「SEO ヘルスチェック」を実行できます。その結果、デベロッパーやウェブマスターの皆様にウェブページで改善可能な箇所を見つけていただけるようになっています。

引用)Googleウェブマスター向け公式ブログ

現時点では全て英文なのですが…では、その「SEO」項目での使い方をご紹介したいと思います。

ふわふわ

SEO診断方法

Chrome拡張機能におけるやり方をご紹介します。まず、ブラウザに該当ページが表示されている状態で、Lighthouseアイコンをクリックし、「Option」ボタンを押します。そこで「SEO」をチェックした後、改めて「Generate Report」をクリックすると、診断開始です。

使い方

ふわふわ

SEO診断結果項目

ここでは10個の診断項目と2個の進言項目が分かりますので、ご紹介します。

審査項目

診断項目

  • Document doesn’t use legible font sizes
    全体の75%以上が16px以上のフォントサイズになっているか
  • Has a <meta name=”viewport”> tag with width or initial-scale
    モバイル用も含めてviewportは適切か
  • Document has a <title> element
    タイトルタグは適切に設置されているか
  • Document has a meta description
    meta descriptionは適切に設置されているか
  • Page has successful HTTP status code
    ステータスコードは適切(200)か
  • Links have descriptive text
    コンテンツを理解できるよう、内部リンクのアンカーテキストは適切な表記か
  • Page isn’t blocked from indexing
    コンテンツを読み込ませる際、変なブロックはしていないか
  • Document has a valid hreflang
    言語設定は適切に設置されているか
  • Document has a valid rel=canonical
    canonical属性があれば、それは適切に設置されているか
  • Document avoids plugins
    サポートされていないプラグインを使っていないか

進言項目

Additional items to manually check(更に付け加えて良くするならば…)ということで、リンク紹介しています。

  • Page is mobile friendly
    モバイルフレンドリーかどうかを確認してください
  • Structured data is valid
    構造化データのマークアップを確認してください

以上のことが分かります。おそらく診断項目1項目10点の10項目100点満点で評価してくれているのだと思います。今後はこのLighthouseの「SEO」機能はどんどん強化していく予定とのことです。現段階では、実際に「SEOスターターガイド」に書いてあることを該当ページ軸で診断してくれているのですが、それでもSEOに不慣れな人からすれば有難い機能ですね。

ふわふわ

利用感想として

個人的には、「SEO」項目よりも「Performance」項目の方が利用価値が高いです。FCPやDCLだけでなく、FMP(First Meaningful Paint)まで分かるのは有難いです。FMPとは、ページコンテンツが目に見える状態になるまでの時間(単位は特に無し)で、少ないほど表示速度が速いのですが、これがユーザーの体感値に最も近いような気がしていますので参考値としては有用です。

というわけで、是非このChrome拡張機能、試してみてはいかがでしょうか。


関連記事

GSCに2つの新機能

Google Search Consoleに新しい機能が2つ追加されました。米国現地時間4月7日のSearch Central Blogにて発表されていましたので、和訳と同時に使い方をご紹介します。 Googleからの発表内容 まずは、Search Central Blogの発表内容を和訳します。お ...(続きを読む)

CWV等に関するFAQ

2021年5月のCore Web Vitalsを含んだページエクスペリエンスのアルゴリズム導入まで1ヶ月を切りました。そんな中、Googleが先日Search Console HelpにてCore Web Vitals及びページエクスペリエンスに関して、よくある質問をまとめていましたので、和訳してご ...(続きを読む)

CLSにおける改善成功事例

さて、来る2021年5月からのCore Web Vitalsを含んだページエクスペリエンスのランキングアルゴリズム導入まで残り1ヶ月を切りました。私の周りでもワチャワチャし出しているところがチラホラ...。まぁ、ページ単位での評価ですので重要なページから焦らず見直していくと良いのですが。そんな中、Y ...(続きを読む)

練習問題と数式の構造化データ

米国現地時間3月25日、Googleでは、新型コロナ禍において教育機会を逸した人々に対して、学習意欲を援助できるように新しい構造化データを設置したことをSearch Central Blogで発表しました。どうやら日本版Googleの検索結果にはまだ対応していないようですが、既に英語圏では対応してい ...(続きを読む)

コメントを書く

コメントは承認から反映までしばらく時間がかかる場合がございます。メールアドレスが公開されることはございません。