「Google公式のSEOツールの使い方を知りたい」
「WEBサイトの評価チェックツールで分析結果をみたい」
このような方々には、Googleの公式ツール「Lighthouse（ライトハウス）」が便利です。ブラウザChromeのアプリで、WEBサイトをさまざまな視点から分析して結果を教えてくれます。
無料で使えて、その場で評価レポートを見ることができます。
どこを改善すればよいのかもわかるレポートです。WEB制作者にとっては、コーディングのチェックに使えるメリットもあります。
前回の記事「GoogleのSEOツール「Lighthouse（ライトハウス）」のPerformance項目を日本語解説」では、WEBサイトのパフォーマンスの評価項目を翻訳、その意味を解説しました。この記事でも、それに引き続いて項目の翻訳と解説をしていきます。
まず「Lighthouse（ライトハウス）」の利用には、以下のアプリをブラウザにインストールしてください。
https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja
ブラウザに拡張機能を入れたら、チェックしたいURLを開き、「Lighthouse（ライトハウス）」のアイコンをクリック。新規ページで自動的にレポートが開きます。ページがブラウザですべて読み込まれるまでにかかる時間や、モバイルフレンドリーになっているか、ユーザーが使いやすい設定になっているかなど、総合的にチェック可能ですので、ぜひ一度ご自身の管理ページのチェックをしてみてくださいね。
では、ここから項目の解説をしていきます。
大きな項目の上から2番目、「accessibility」の部分からです。
１．「Accessibility」でチェックできる項目
「Accessibility」では、訪問者様の利用のしやすさがチェックされています。例えば、色覚に異常のある方や、視力の悪い方でもそのWEBサイトは使いやすいのか？などがチェックされます。
imgにalt属性が設定されているかや、文字の大きさ、文字と背景とのコントラストについてなどがチェックされています。一般的な制作をしていれば、それほど悪い評価にはなりません。
ただ、私が診断してみたところ多くのWEBサイトが引っかかっている、制作時に気をつけておかなければならない項目もありました。レポート内で”▲”が付いてピックアップされている部分が、改善余地ありの項目です。
多くのWEBサイトで改善余地ありと指摘されている項目をピックアップして、そのエラーメッセージの翻訳と、対処法についてまとめていきます。
ちなみに項目のカテゴリ分けとして”Contrast（コントラスト）”、”Names and labels（名付とラベル）”、”Tables and lists（表とリスト）”などがあります。それぞれのカテゴリの中に小さな項目が割り振られています。
【ARIA（エリア）】
○Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.
障害者の方々の理解を進めるためのrole属性。そのrole属性が設定された要素と子要素が適切な属性名でつながっているかどうか。
【Contrast（コントラスト）】
○Background and foreground colors do not have a sufficient contrast ratio.
コントラスト比が十分にないと指摘。どの部分のコントラストに問題があるかも細かく指摘してくれます。ただ、かなり厳格で、パッと見て特に問題ないと思える箇所も指摘されています。それでも見づらい方がいるという指摘なので、色の調整をしたいところです。
【Names and labels（名付とラベル）】
○Buttons do not have an accessible name
ボタンにアクセシブルな名前が付いていない。＜button＞タグにtype属性が入っていないという指摘かと思われます。このボタンがどういうものなのか、きちんと書いて表しておくようにとの指摘です。
○＜frame＞ or ＜iframe＞ elements do not have a title
＜frame＞、＜iframe＞タグにtitle属性が付いていない。ラベル付けをしてください。どの箇所に付いていないかも合わせて表示されます。
○Links do not have a discernible name
リンクに識別できる名前が付いていない。リンク先URLだけ指定すればリンクとして運用できますが、titleタグを付けてわかりやすく記述することを求められています。
例： くま▲▲
○Form elements do not have associated labels
入力フォーム内に適切なlabelが付けられているか。メールフォームだけでなく検索窓などに使われるinputなどがチェックされています。type=”search”などtypeを付けていても検出されます。labelが付いているか確認しましょう。
○Image elements do not have [alt] attributes
画像にaltが付いていない。これはCMSを使っていてもaltを入力するフォームが準備されているので漏れなく記載します。読み込みでPHPなどから出力したりプラグインを使ったりしている場合、気づかず抜けていることがあります。
【Tables and lists（表とリスト）】
○Lists do not contain only
リスト（ul、ol）内に、li要素とスクリプト対応要素以外も含まれている。こちらも改善が必要な部分は指摘されるので、それに沿って修正します。
○List items (＜li＞) are not contained within ＜ul＞ or ＜ol＞ parent elements.
リスト（ul、ol）内にli要素とscript要素、template要素以外が含まれている。スライドなどをlistで組んで色々な要素を書き込んでしまうとこのような表示が出ます。
他にもチェック項目はありますが、ほとんどのチェックで修正が必要な箇所も合わせて教えてくれます。修正もGoogleから出ているサポートページを読むとそれほど難解な部分はなく、作業漏れチェックのような感じです。少し直すだけで数値は一気に改善されますのでぜひ実践してください。
２．「Best Practices」でチェックできる項目
さて次の大きな項目は「Best Practices」です。
セキュリティや、使い勝手に関わる部分の診断が行われます。ここでエラーが出たとしても現在はそれほど大きな問題ではありません。ただ、今後問題になりそうな部分がピックアップされているので、作業時間に余裕があるときに改善しておきたいですね。
【Trust and Safety】
○Links to cross-origin destinations are unsafe
ユーザーが外部リンク（異なるドメインのWEBサイト）にアクセスすることで危険を受けるかもしれないため、外部リンクには、 `rel =” noopener “`または `rel =” noreferrer “`を追加してくださいと指示されています。
○Includes front-end JavaScript libraries with known security vulnerabilities
セキュリティに脆弱性があるといわれているJavaScriptライブラリ（jQuery）を使用しているので、是正することが求められています。jQueryの古いバージョンは深刻なセキュリティの問題があるものも。バージョンを更新することで評価は改善します。
ただ、そもそもjQueryの使用がGoogleLighthouseの評価を下げてしまうようです。余裕があればライブラリを使わずにスクリプトを書き直すとより数値が改善します。
【General】
○Browser errors were logged to the console
ブラウザーのエラーがコンソールに表示されているとの指摘です。指摘箇所を見てみるとJavaScriptのエラーがチェックされていました。どんなエラーか細かく指摘されるので、その部分を直せば良いとすぐわかります。対処しやすいです。
問題がある箇所に上記のようなエラーメッセージが出る他、以下のような項目もチェックされています。
■Displays images with correct aspect ratio
→適切なアスペクト比で画像を表示させているか
■Avoids Application Cache
→ウェブ標準ではないアプリケーションキャッシュの機能を使っていないか
■Allows users to paste into password fields
→ユーザーにパスワード欄でのコピー&ペーストを許可していないか
■Page has the HTML doctype
→HTMLでdoctypeの指定をしているか
どんなユーザーでも利用しやすいように配慮をしなさいというGoogleからのメッセージが込められたチェック項目ですね。現時点では大きな問題でなくとも、推奨されている形ではないので、少しずつ改善していきたいですね。
３．「SEO」でチェックできる項目
このGoogle「Lighthouse（ライトハウス）」はSEOツールの側面があるので、チェック項目にもSEOに関する部分が明確に組み込まれています。基本的な部分のチェックなので、少しSEOの知識があれば100点が取れます。
いくつかのカテゴリに分けてチェックされ、改善が必要な点についてエラーメッセージが表示されます。そのメッセージと対処法をまとめていきます。
【Content Best Practices】
○Document does not have a meta description
ヘッダー内に＜meta name=”description”＞を記述し、そのページの概要を入れてくださいとの指摘です。WordPressを使っていれば、WEBサイトの概要、ページごとの概要など入れる欄がありますのでそこの欄を埋めるようにします。
○Image elements do not have [alt] attributes
画像にaltが付いていない。これはCMSを使っていてもaltを入力するフォームが準備されているので漏れなく記載します。読み込みでPHPなどから出力したりプラグインを使ったりしている場合、気づかず抜けていることがあります。
○Links do not have descriptive text
リンクに適切なテキストが当てられていない。例えば、”MORE”や、”リンク”、”link”など、意味を持たない言葉にリンクが貼られているとチェックされます。このリンクから飛ぶと先に何があるのかわかるようにする必要があります。
【Mobile Friendly】
○Tap targets are not sized appropriately
スマートフォンやタブレットからタップ（タッチ）する領域が狭いリンクがあると指摘されています。タップ領域は、48x48px以上が必要です。余白（padding）を付けて、狭くならないようにしましょう。特にグローバルメニューなど注意が必要です。
○Document doesn’t use legible font sizes
ページ内のフォントサイズが使いづらいとチェックされています。12px以下のフォントサイズは小さすぎて判別できないため”pinch to zoom（指でズームする）”必要があるとのし的です。ズームしないと読みづらいページは面倒ですよね。フォントサイズを全体的に大きく設定しなおしましょう。
上記の他、以下のような項目もチェックされています。
■Page has successful HTTP status code
→サーバーが正しくHTTPのステータスコードを返せているか
■Page isn’t blocked from indexing
→検索エンジンに対してインデックスを禁止していないか（大丈夫と思いきや、制作時に”インデックスさせない”設定にしたまま忘れてしまっていることも…）
■robots.txt is valid
正しいrobots.txtファイルがサーバーにあるか
SEOの評価ツールとして考えると少し物足りないチェック箇所ではあるのですが、抜け漏れがないか確認するには十分使えます。これから項目も増える可能性がありますので、期待したいところです。
6．まとめ
Google「Lighthouse（ライトハウス）」のAccessibility、BestPractice、SEO項目についてエラーメッセージとその対処法について解説をまとめました。
数十のWEBサイトを「Lighthouse（ライトハウス）」でチェックした結果、前回解説したPerformance項目に比べると、それほど低評価診断を受けているWEBサイトはなく、平均して85〜90%程度はOKでした。また、細かく警告箇所がわかるようになっていますので、少しずつ手直ししていけば数値は改善されます。
特にコーディング、WEBサイト制作を1人でされている方にとっては、チェックツールがあることで抜け漏れ防止になり、納品物のクオリティを上げられると思います。このツールで高評価を目指すことでクライアント様にとっても、訪問者様にとっても使いやすいWEBサイトになることは間違いありません。直せるところから修正していきたいですね。