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拡張機能、試してみてはいかがでしょうか。


関連記事

目次の順序はランキングに影響する?

コラム等の記事を読んでいると、どの記事も面白いように「とは」「種類」「メリットデメリット」「使い方」「注意点」の順番で目次設定されていて、その通りのストーリー順序で記事化されています。これは以前にも私は触れています。しかし、この順序はSEO評価(検索順位が上がりやすいこと)に繋がるのでしょうか。私の ...(続きを読む)

検索結果タイトル生成アップデート

Googleは米国現地時間8月24日、Webサイトページを検索結果に表示する際、タイトルを生成する新しいシステムを導入したと発表しました。記事内容を和訳しながらご紹介したいと思います。 検索結果表示のタイトルについて 元々、ずいぶん前からタイトルの書き換えは起こっていました。私も以前記事にしていまし ...(続きを読む)

Googleが検索の仕組みを案内

もう何度も何度も何度もGoogleは案内してきていると思いますが、改めてGoogleは「Google検索の仕組み」ページのデザインをリニューアルして公開しました。合わせてThe Keywordでもその内容を案内していますので、和訳してご紹介します。 Google検索の仕組みについて 新しくGoogl ...(続きを読む)

構造化データテストツールは別モノへ

2020年の7月に構造化データテストツールが廃止予定であることをGoogleは予告していました。要はリッチリザルトテストツールに統合されるという話でした。そして8月9日に構造化データテストツールはSchema.orgのテストツールとして変貌しました。 そもそもどうだったの? もともと、構造化データの ...(続きを読む)

コメントを書く

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