本稿はCocoonセッティングにおけるTipsです。
ナビ（メニュー）の高さがLighthouseのSEOスコアに影響を与えることもある
とりあえずLighthouseでチェックしてみましょう。
もし引っ掛かっていたら対処しましょう。
作業自体は１分掛からないと思います。
Lighthouseとは？
Lighthouseは、ざっくり言うとGoogle謹製のサイトチェックツール。
サイト速度やSEOなどについて調べられます。
本稿はLighthouseについて知っていることを前提に記していますので、これ以上の説明は割愛します。
知らなかった方はこちらをどうぞ。
概要 | Lighthouse | Chrome for Developers
Lighthouse でウェブアプリの監査を行う方法について説明します。
developer.chrome.com
Chromeにインストールしておくと便利です。
Tap targets are not sized appropriatelyの指摘
Lighthouseで当サイトを検証したところ、SEOで指摘をされました。
ざっくり言うと、
今回の場合は「メニューの高さが足りていない」ということです
指摘では48px48pxが必要とありますが、当サイトは40pxしかない。
よって対処します。
修正方法
子テーマのstyle.cssに次の記述をします。
#navi .navi-in>.menu-mobile li {
width: 50%;
height: 50px;
line-height: 50px;
}
@media screen and (max-width: 834px){
.navi-footer-in>.menu-footer li.menu-item {
min-height: 50px;
}
}
ヘッダーとメニューの高さを50px（以上）にするというCSSです。
セレクタ指定はChromeのデベロッパーツールそのまま。
面倒くさかったからなのは内緒です。
修正結果
指摘が消えて、スコアが１上がりました。
ちなみに「Links are not crowlable」は無視してOKです。
（SNSシェアボタンのリンク先が辿れないという指摘なので）
参考URLはこちらです。
Lighthouseの”Links are not crawlable”という注意喚起を削除する方法を教えてください。
まとめ
ぶっちゃけ、あまり気にすることもないと思います。
でも、ナビの高さを修正するだけのこと。
手間は掛かりませんし、もし引っ掛かっていたら修正しておきましょう
コメント