小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

Cocoonでナビ(メニュー)の高さを調整してLighthouseのSEOスコアを上げる

Cocoon
この記事は約3分で読めます。

本稿はCocoonセッティングにおけるTipsです。

ナビ(メニュー)の高さがLighthouseのSEOスコアに影響を与えることもある

とりあえずLighthouseでチェックしてみましょう。
もし引っ掛かっていたら対処しましょう。
作業自体は1分掛からないと思います。

スポンサーリンク
この記事を読む方へのオススメ

Lighthouseとは?

Lighthouseは、ざっくり言うとGoogle謹製のサイトチェックツール。
サイト速度やSEOなどについて調べられます。
本稿はLighthouseについて知っていることを前提に記していますので、これ以上の説明は割愛します。
知らなかった方はこちらをどうぞ。

Lighthouse によるウェブアプリの監査  |  Tools for Web Developers  |  Google Developers
Lighthouse を設定してウェブアプリを監査する方法について説明します。

Chromeにインストールしておくと便利です。

スポンサーリンク

Tap targets are not sized appropriatelyの指摘

Lighthouseで当サイトを検証したところ、SEOで指摘をされました。

LighthouseのSEO項目でTap targets are not sized appropriatelyを指摘される

Tap targets are not sized appropriately=サイズが不適格

ざっくり言うと、

今回の場合は「メニューの高さが足りていない」ということです

指摘では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のデベロッパーツールそのまま。
面倒くさかったからなのは内緒です。

スポンサーリンク

修正結果

指摘が消えて、スコアが1上がりました。

ちなみに「Links are not crowlable」は無視してOKです。
(SNSシェアボタンのリンク先が辿れないという指摘なので)
参考URLはこちらです。

Lighthouseの”Links are not crawlable”という注意喚起を削除する方法を教えてください。

スポンサーリンク

まとめ

ぶっちゃけ、あまり気にすることもないと思います。
でも、ナビの高さを修正するだけのこと。

手間は掛かりませんし、もし引っ掛かっていたら修正しておきましょう

アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
Cocoon
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました