Google公式の監査アドオン、SEO対策はlighthouseを使おう!SEO編

Google公式の監査アドオン、SEO対策はlighthouseを使おう!SEO編

以前、Google公式の監査アドオン、SEO対策はlighthouseを使おう!Performance編の記事でlighthouse、そしてパフォーマンス改善について解説をした。
さらにAccessibility編ではユーザーのアクセスのしやすさについて解説をし、Best Practice編ではサイトの作りについて解説した。
今回は最後の項目である、SEOについて解説と改善方法を記載していく。

lighthouseとは?使い方は?

詳細は、以前の記事
Google公式の監査アドオン、SEO対策はlighthouseを使おう!Performance編
で書かせてもらったので割愛しますが、
ざっくり説明すると、Googleが想定している「ユーザーにとって使いやすいサイト」かどうか自動で判定してスコアを出してくれるツールです。

前回、前々回はこのサイトのページでスコアを出して、
それを基にパフォーマンス(ページの速度)とアクセスのしやすさ、サイトの構成の最適化について解説しましたが、
今回は最後の項目で、SEOについて解説していきます。

SEOはどういう項目で、どう改善していくのか

lighthouse-seo

恐らく一番サイト運営者が気になる部分です。
SEOは、Search Engine Optimization の略で、直訳で「検索エンジン最適化」です。
その直訳の通り、検索エンジンの上位に表示されるように最適化をすることなのですが、
Googleの意思を汲み取って意訳すると、
ユーザーが求めている情報かつユーザーがアクセスしやすいサイトが上位に出てくるようにする」ということです。
ちなみに、Googleは公式でサイト構築の方針として以下のことを推奨しています。

  • 検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。
  • ユーザーをだますようなことをしない。
  • 検索エンジンでの掲載位置を上げるための不正行為をしない。ランクを競っているサイトや Google 社員に対して自分が行った対策を説明するときに、やましい点がないかどうかが判断の目安です。その他にも、ユーザーにとって役立つかどうか、検索エンジンがなくても同じことをするかどうか、などのポイントを確認してみてください。
  • どうすれば自分のウェブサイトが独自性や、価値、魅力のあるサイトといえるようになるかを考えてみる。同分野の他のサイトとの差別化を図ります。

なので、Google的にはlighthouseの項目は全てSEOの評価項目なのではないかと思います。
その中でもSEOの項目は、検索結果での表示や、かなり基本的なユーザビリティを抑えているかという所を評価しているように感じました。

改善項目とそれぞれの改善方法

それぞれ改善項目と、その改善方法に章だてて解説していきます。

Document Does Not Have A Meta Description / Document Doesn’t Have A Title Element

これは、
メタタグの中の、titledescriptionがないよ!ということ。
メタタグは、htmlページの<head>~</head>内に記述される、ページの各種付加情報を定義するタグのこと。
色々種類はあるのですが、特にこの二つは大切。
というのも、以下の画像のように、サーチエンジンに表示されるタイトルと、中身の概要を入れるタグになるからです。
lighthouse-seo2

実際の指定はこのようになります。

<head>
  <title>あおぞらのIT・ゲーム・その他ニュースブログ</title>
  <meta name="description" content="24歳の駆け出しエンジニアが、技術解説、技術ニュース、ゲーム攻略、気になった事などをまとめる雑記ブログ。">
</head>

検索したときに、概要やタイトルが無かったり、
分かりにくいと、ユーザーは一旦そのサイトに入ってから自分が欲しい情報なのか判断しなければならなくなって操作が増えてしまいます。
なので、ここは分かりやすいタイトル、概要を心掛けつつ、少なくとも空になることのないようにした方が良いです。

Document doesn’t have a valid hreflang / Document doesn’t have a valid rel=canonical

こちらもメタタグです。
titleタグやdescriptionタグ程分かりやすくないタグなので章を分けてありますが、これらも重要なタグ。
まず、「hreflang」は、hreflangタグというものがあるわけではなく、linkタグのrelというオプションにalternateを入れることで使用します。
主に多言語サイト等で使用されます。
多言語サイトでは、同じコンテンツの中身であるのに対して、URLを分けている場合が多いと思います。
(例えば
日本語サイトは「http://hoge.com/ja/hoge」
英語サイトは、「http://hoge.com/en/hoge」
のような)
そういった場合に、同じコンテンツで多言語翻訳したページがありますよと案内するためのタグがhreflangタグというわけです。
例えばブラウザの言語が英語設定の人が検索した際と、日本語の人が検索した際に、検索結果で対応する言語のページを案内できます

続いて、canonicalです。
これもcanonicalタグというものがあるわけではなく、linkタグのrelというオプションにcanonicalを入れることで使用します。
少し説明が難しいのですが、これは正規化したURLが何か、ということです。
全くコンテンツが複数のURLを持つことがあるため、どのURLが正しいのかということを表すことが出来ます。

なんじゃそらという感じだと思うので、具体例で説明していきます。
例えば、何かチェックボックスに条件を入れて検索し、結果が表示されるようなサイトがあった場合、
URLは「http://hoge.com/ja/hoge?param1=a&param2=b」のようになると思います。
そして、その結果が多い場合、ページが複数あるので、次のページに遷移するとURLは大抵以下のようになると思います。
「http://hoge.com/ja/hoge?param1=a&param2=b&page=2」
では、この状態で最初のページに戻るとどうなるか?
「http://hoge.com/ja/hoge?param1=a&param2=b&page=1」
になってしまうサイトもあると思います。そうすると、
「http://hoge.com/ja/hoge?param1=a&param2=b」
「http://hoge.com/ja/hoge?param1=a&param2=b&page=1」
この二つのURLは全く同じ画面を表示するのですが、違うURLを持ってしまっている状態になる、ということです。

そういう状態を防ぐために、正規化したURLを持たせておく、というわけです。

hreflangタグと、canonicalタグの実際の指定の仕方は以下のようになります。

<head>
  <link rel="alternate" hreflang="en" href="http://hoge.com/en/hoge?param1=a&param2=b&page=1" />
  <link rel="alternate" hreflang="ja" href="http://hoge.com/ja/hoge?param1=a&param2=b&page=1" />
  <link rel="canonical" href="http://hoge.com/en/hoge?param1=a&param2=b&page=1"/>
</head>

Document Doesn’t Use Legible Font Sizes

これは非常に単純で、文字が小さいぞ!という指摘です。
fontのサイズは12px以上が推奨です。実際それ以下になると読みにくくなってくると思います。

Document uses plugins

プラグインを使ってるぞという指摘です。
プラグインは、この場合ブラウザに新たに機能を追加するソフトウェアのことです。
何で駄目なの?という話なのですが、
Googleによると、多くのモバイル端末はプラグインをサポートしていないから、とのことです。
詳細は沢山あるので省きますが、例えば「embed」タグ等を使うと言われてしまうようです。

Links Do Not Have Descriptive Text

aタグの間に概要が入っていないという指摘です。
ユーザーがクリックしていいものか判断できるようにして欲しいから、とのことです。
ただ、文字リンクに限らず、アイコン等のリンクでもOKなようなので、
これはほとんどの人が守れているのではないでしょうか?
(空っぽのaタグが配置されているケースが思い浮かばなかった)

Page has unsuccessful HTTP status code

これはものすごく基本的なことですね。
ロードしてるリソースなどが400エラーを出してると怒られてしまいます。
メンテされてないと自白しているようなものなのでこれは仕方ないかなと思います。
あまり不安定なライブラリを使わないこと、外部の画像は信用できる場所から持ってくるなど気を付けるしかないかなーと思います。

Page Is Blocked From Indexing

この二つが表示されるのは、大抵意図してやっているような気もしますが・・・。
これらは何らかの原因でインデックスがブロックされているよ!という指摘です。
インデックスというのは、Google側でページをクロールしたということで、
これをされて初めて検索エンジンの結果にページが出てくるようになります。

そのインデックスが出来なくなっている場合というのは、以下のメタタグを仕込んだ場合くらいしか思いつかないので、
これは特に意識しなくても普通は引っかからないと思います。
もし引っかかってしまったら、間違って以下のタグを入れてないか確認して、
消して問題なければ消しましょう。

<meta name="robots" content="noindex"/>

robots.txt is not valid

robots.txtがおかしいぞという指摘です。
robots.txtというのは、クロールを制限するためのテキストです。
特定のページがクロールされないようにしたり、いくつかの悪質なロボットのアクセスを制限したりといったことが出来ます。

こちらは自分が触ったことが無いのであまり解説出来ないのですが、以下のサイトが詳しいです。
robots.txtとは

まとめ

というわけで、今回は「検索エンジン最適化」の項目であるSEOをまとめてみました。
ここは検索結果の表示や、インデックスされるかされないか、といったとこに直結する項目であり、
修正が比較的容易なので、是非満点を目指すことをお勧めします

自分も色々偉そうなこと言ってきましたが、まともに100点取れてるのはこの項目だけです。
無理に全部100点のページを目指さず、出来るところから修正していけばOKです。
何より、Googleも言っていますが、SEOを意識しすぎるのではなく、ユーザーを意識しつつ独自色を出していくことが大事です。