SEO
Google製 拡張機能「Lighthouse」でSEOのチェックをしてみた
2018年09月24日 14:00
こんにちは、社員Aです👩！
先日のブログでもちょっとお話させていただいたんですが、現在SEO勉強中で、勉強したことのアウトプットの場としてこのブログのSEO対策も行っているのですが、今回はGoogleがリリースしているGoogle Chromeの拡張機能「Lighthouse」で、このブログのSEOチェックをしてみました！
普段のSEO対策が実際にどれくらいGoogleに評価されているのか知れるので、ちょっとドキドキです。
もくじ
ことしリリースされた「Lighthouse Chrome」
2018年2月6日にGoogleウェブマスター向け公式ブログで下記のような発表がありました。
Lighthouse 内の SEO カテゴリでは、ウェブページの基本的な「SEO ヘルスチェック」を実行できます。その結果、デベロッパーやウェブマスターの皆様にウェブページで改善可能な箇所を見つけていただけるようになっています。Lighthouse は Chrome ブラウザでローカルに実行されるため、ステージング環境でも、公開中のページでも、認証が必要なページでも、同じように SEO 監査を実行できます。
こちらの拡張機能を使うことで、該当ページを様々な観点から評価してくれるものです。日本語版はまだリリースされておらず、言語は全て英語になります。
実際に「Lighthouse Chrome」を使ってみる
プラグインのインストール
まずはプラグインをインストールします。
チェックしたいページ上で、拡張機能をクリック
プラグインをインストールしましたら、チェック対象のページを開きます。
当ブログでは、試しに下記記事で試してみたいと思います。
そして拡張機能を開き、右下にある「Generate report」のボタンをクリックすると、解析が開始します。
このボタンを押してから2〜3分くらいかけて解析が始まりますので、少し待たないといけません。
当ブログのSEO評価はどれほどか？
上記手順でレポートが生成されますと、別タブで表示されます。
改善が必要な部分が「レッド」、その次に注意が必要な部分が「オレンジ」、問題ない部分は「グリーン」で表示されるのでわかりやすいですね。
早速レポートをもとに、解説していきたいと思います。
1.Performance
当ブログの先程の記事のパフォーマンスは「19」。これはかなり悪いのではないでしょうか…？
それぞれ解説すると下記のようになります。
2.Progressive Web App
Progressive Web Appは、プログレッシブWebアプリケーションの側面が検証されますと書いてありました。
このブログの記事での数値は、「31」でした。
原因としては、下記のようなものが該当するようです。
- ページの読み込みが3Gで十分速くない
- オフラインのときにステータスコード200を返さない
- ユーザーにWebアプリケーションのインストールを求めるメッセージが表示されない
- サービスワーカーを登録しない
- カスタムスプラッシュ画面用に設定されていない
- アドレスバーがブランドの色と一致しない
結構細かく評価されていますね。
この部分に引っかかった場合、レポート上でカーソルを当てて「Learn more」を押すとどのように対策すれば改善するのか、対策を教えてくれます。
自分のサイトで悪かった部分をGoogleのアナウンス通りに改善していくだけでも、変わっていくということでしょう。
3.Accessibility
3つ目はアクセシビリティです。
このブログの記事での評価は「53」でした。やっとここまで来て、普通のラインに達しました！
減点されている原因は、下記のようです。
- 画像にAltが設定されていない箇所がある
- リンクに識別可能なタイトルがない
- <iframe>要素にタイトルがない
- フォーム要素に関連するラベルがない
- 背景色と前景色には十分なコントラスト比がない
- ページ内の「id」が一意ではない
これ見て思ったんですが、デザイン面まで結構細かく見てるんですね。
そして、これらをクリックすると、サイト内で該当する部分まで細かく表示してくれるので、改善しやすいです。
4.Best Practices
Best Practicesは、方法や手順のうち、最もよい結果につながることが明らかなものという意味です。
このブログの記事での評価は、「67」でした。これも普通ということでしょう。
減点されている原因は、下記のようです。
- スクロールのパフォーマンスを向上させるためにパッシブリスナーを使用しない
- document.write（）が導入されていない
- 外部リンクに ‘rel =” noopener “または rel = “noreferrer” が追加されていない
- セキュリティ上の脆弱性を持つJavaScriptライブラリが含まれている
- コンソールにエラーが出ている
どれもセキュリティやパフォーマンス改善のための項目ですね。
5.SEO
そして、SEOは 「100」でした！これは嬉しいですね。
主に下記のような観点から評価されるようです。
- モバイルフレンドリーになっている
- ページの構造（マークアップ）
- 基本的な項目の設定（title・Descriptionなど）
- ページがインデックスからブロックされていない
- robots.txtが有効
思ったよりもSEOのチェック項目は超基本的で簡単なものしかなかったので、満点だったのかもしれません。
逆に、この項目がオレンジや赤だと問題ありということでしょう。
まとめ
自分のサイトでどの部分がユーザビリティに影響を与えているのか、またそれをさらに向上させるためにヒントが見つけられたような気がします。
基本的な項目だけでなく、デザイン面などユーザーが見る視点でのチェック項目があったので、勉強になりました。
実際にこれを見ながら、対策が足りていなかった部分を修正していきたいなと思いました。
ただ、これらをすべて対策したからといって上位表示されたり評価が上がることを保証するものではなく、「あくまでこれだけの対策項目がありますよ」ということだと思います。
拡張機能を入れるだけで簡単にチェックができるので、ぜひ試してみてください！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
