MENU
2018.02.12

SEOカテゴリが追加されたLighthouseを使ってみた。

Googleのウェブマスター向けブログに「Lighthouse Chrome 拡張機能に追加された SEO カテゴリのご紹介 」という記事がアップされていました。

お恥ずかしい話ですが僕はLighthouseというものを知らなかったので、この機会に試してみました。

Lighthouseとは

PWA(Progressive Web Apps)と呼ばれる、モバイルウェブページ用の仕組みの対応状況の確認やサイトのパフォーマンスを確認できる機能です。

PWAに関しては正直まだ勉強中なのですが、簡単にいうとモバイルウェブページにネイティブアプリのようなUIを実装したり、オフライン環境での閲覧、プッシュ通知実装などモバイル向けの仕組みです。

AMPと並んでgoogleが頑張ってるモバイル端末向けの技術だそうです。

まぁこのPWAとサイトパフォーマンスが確認できる拡張機能に「SEOカテゴリ」が追加されたということですね。

 

Lighthouseを使ってみた

ごちゃごちゃ説明するよりも実践あるのみということで、このブログをテストしてみました。

こんな感じで結果が表示されます。

この結果内の「プログレッシブウェブアプリケーション」というのがPWAです。
今は全然対応ができていないので55点という寂しい数字ですが、他の部分はそれなりに満足できる数字でした。

嘘です。この記事書く前にある程度修正しました!笑
修正前はPWA以外5~10点くらい低かったです・・・

さて、それでは各項目について簡単に触れていこうと思います。

 

パフォーマンス

サイトの表示速度などを分析してくれます。

どのような要因で遅くなっているのかの解説や改善点などを教えてくれます。

機能的には「PageSpeed Insights」のような感じでしょうか?項目の充実度はPageSpeed Insightsの方が良さそうな感じはします。

 

プログレッシブウェブアプリケーション

前述したPWAの対応状況です。

今後PWAに対応していくときにはすごく役立ってくれると思います。

 

アクセシビリティ

使いやすさや正式な構造で作られているかなどをチェックしてくれます。

項目を見ていると主に構造部分のチェックが多いように思います。
アクセシビリティというだけあってコントラストなどのチェックもしてくれているのが驚きました。

コントラスト差が不十分なサイトというのは本当に見づらいので、個人的には意識してデザインをしています。なので「色のコントラストは満足です」の一文にはほっとしました。

 

ベストプラクティス

こちらはパフォーマンスと似ている部分は多いですが、古い技術や推奨されていない機能などがある場合、問題箇所を教えてくれます。

基本的に普通に作っていれば問題ないと思いますが、何か漏れがないかチェックしてみるといいでしょう。

 

SEO

本命のSEOですが、正直なところすごく一般的なことばかりかなー?といった感じです。フォントサイズ以外は問題なかったですし。

noindexになっていないかとか、titleがあるかなどめちゃくちゃ普通の事ばかりでした。ただ、手動で確認項目にモバイル対応や構造化データがありましたし、公式ブログでは今後も監査項目を拡充していくとのことでしたので、期待したいと思います。

使ってみて基本的な部分を振り返ることができたので、そういった意味ではよかったかもしれません。

 

Lighthouseを使ってみた感想

全体として基本的な項目が多かったように感じました。

ただ、いくつか見落としがあったので、そういった意味では基本に忠実につくるために今後も参考にしていきたいなと感じました。

なによりGoogleが推奨することや、非推奨であることがチェックできるということはWebをやるものにとっては心強いことは間違いありません。

僕が業界に入った時は何が正しいかの指標が少なく、手探りでやる部分は多かったように思いますので。

これから業界に入る方やすでに業界で働かれている方は、こういったツールをうまく使っていくべきだと思いますし、このブログがその参考になれば幸いです。

 

スポンサーリンク
pagetop