ワクワクして働くための生産性↗向上Hacks

ワクワクは最強のライフハックなのです。

Chrome拡張機能 Lighthouse でブログのSEOチェックをしたら大変なことになった件

f:id:ganapati55:20171011145040j:plain

どうも!

Ganapatiです。

f:id:ganapati55:20170707142043j:plain

ブログをはじめとしたWEBサイトを運営するものにとってSEOというのはとても大事ですね。

毎年いろいろとルールが変わっていくためか、常に勉強し続けなければなりません。しかしながら本職のWEB屋でもない私にしてみれば「簡単にチェックできる」「自分でも対策ができる」というツール類に頼るしかないのです。

そんな中でちょっと驚く事実が分かったので紹介します。

ブロガーさんは注目です。

GoogleChromeアドオン「Lighthouse」を使ってる?

本日(2/6)以下の記事が公開されました。

webmaster-ja.googleblog.com

要は、「ChromeアドオンLighthouseにSEO関連の新たなチェック機能を追加したから使ってね」というお知らせです。

Lighthouse(灯台)というアドオンがあったのですね、私は全然知らなかった。

Lighthouseとは何ぞや?という人のために以下のような説明が記載されていました。


Lighthouse は、ウェブページの品質向上に役立つよう開発された、オープンソースの自動化されたツールです。サイトのパフォーマンス、アクセシビリティ、プログレッシブ ウェブアプリ(PWA)対応状況などについての確認でき、サイトの品質を向上させるための具体的な対策を提示します。


なるほど。PageSpeedInsightsのようなWEBサイトなどのチェックツールなわけですね。

PageSpeedInsightsと違うのは、表示スピード以外の部分でSEOチェックをしてくれるってことのようです。

つまり・・・

SEOツールとしての使い分け

表示速度の最適化なら「PageSpeedInsights」

コンテンツ配信としての最適化なら「Lighthouse」

ということなわけですね。

Lighthouseを実際に使って当ブログをチェックしてみた。

LighthouseをChromeに追加

次のサイトからLighthouseアドオンを追加します。

Lighthouse - Chrome Web Store

準備はコレだけ。

Googleアカウントとの連携とかも全く必要ありません。

ライバルサイトもLighthouseで調査できるようです。

当ブログの特定記事でチェックしてみた

Lighthouseで調べるならブログのTOPページよりも個別ページの方が良いと思い次のページをチェックしてみました。

work.lifemake.design

検索の結果、読者が実際によく見るのは個別ページになります。個別ページがどのように評価されるのかを調べるほうが大事たと感じたからTOPページのURLを使わなかったのです。

さて、実際に調べる方法ですが、調べたいページにアクセスして追加したアドオンをクリックするだけです。

クリック後、解析結果が出るまでけっこう時間がかかります。わたしの場合は2分くらいかかりました。

解析結果はこんな感じ

解析が完了するとウインドウが新しく立ち上がり以下のような画面になります。

f:id:ganapati55:20180206182751j:plain

むーーー、全体的に評価が悪いですねぇ。

ちなみに大きくは5つのジャンルで評価されます。図の左から、、、

  1. Performance
  2. ProgressiveWebApp
  3. Accessibility
  4. BestPractice
  5. SEO

最後にSEOの項目になっていますが、実際のSEO評価としては1~5全体が関連していると思った方が良さそうです。

Lighthouseによる個別の要素で見るとこんな感じ

①Performance

WEBサーバーからの配信スピードの測定結果の評価です。PageSpeedInsighrtの簡易版みたいなものといって良さそうです。

なので説明は割愛。

ちなみにはてなブログではどうにもならないものも結構あったりしてツライ。画像を次世代フォーマットで配信しろとか勘弁してくれ。

f:id:ganapati55:20180206182825j:plain

次世代画像フォーマットに関しては以下参考。

developers.google.com

②ProgressiveWebApp

略称でPWA。

AMPがモバイルページの表示スピードを最適化するための1つの規格・手法であるのにたいして、PWAはWEBページなどをモバイルで見たときにアプリのようなUIや挙動をさせたほうがユーザーは違和感なくわかりやすく閲覧できるはずだからそういう仕組みを採り入れましょうって話です。

WEB屋でない私には詳細はよくわかりません。

当然スコアも悪いです。そりゃそうです。だって「はてなブログ」というブログ専用CMSを利用しているのだもん。

③Accessibility

WEBページを表示させたとき、内容がユーザー(クローラー含む)にとって機械的な意味でわかりやすいか?という事らしいです。

f:id:ganapati55:20180206182901j:plain

HTMLタグなどの構造が最適かどうかってことや、実際にデザイン的に見やすいのかどうかってことのようです。

④BestPractice

もっとこうしたほうが良いよってな感じのGoogle様の指針にそっているかってことのようです。

f:id:ganapati55:20180206182914j:plain

案の定HTTPS化の部分でマイナス評価されています。

⑤SEO

そのたSEOに関連するような要素の部分です。はてなブログは意外と強かった。

しかしここで衝撃の事実が!!!!

f:id:ganapati55:20180206182925j:plain

なんと文章の75%以上はフォントサイズを16px以上にしましょう!って書いてあります。

まじかよ。

はじめて聞いたぜ・・・。

まあ、たしかに大きい文字の方が見やすいのでユーザー体験にはプラスですよね。

今度CSSいじろう。

実際にどこまでSEOに差があるのか?

さて、結構悪い評価をされた当ブログですが、どうしようもない部分も多々あり心配になってきます。

しかしながら、指摘された部分を直したらSEO的にどれだけプラスになるの?という疑問も残ります。

私が考えるに、Lighthouseを使用する大きなメリットは

Googleが実装しているサイト評価の要素・仕組みを具体的に学べるということなのかと思います。

ああ、こんな部分までGoogleは見ているんだな。こういうのが良質なコンテンツというものなんだな。

と、理解することができるわけです。

まとめ

Lighthouseを使ってサクッと解析してみよう!メインフォントは16px以上にね!