Cocoonで１カラムにするとPageSpeed Insightsで「 見出し要素は降順になっていません」と指摘されたので改善する

サイトを１カラムにしてPageSpeed Insightsをやってみたところ、次の指摘が出るようになりました。

具体的に指摘されたのはフッター部ウィジェットの見出し。 CocoonはウィジェットのタイトルにH3がつく仕様になっています。 どうやらそれがまずいらしい。

愚痴っても仕方ありません。
ユーザー補助の項目なのでSEOへの悪影響はないと思うのですが。 放置するのも気持ち悪いので改善することにしました。

なお、Cocoonの１カラムで必ずこの問題が発生するかはわかりません。
あくまで私の環境であることは付しておきます。
ただ、サイトやスキンがそれぞれ別でも本件問題は発生しています。

「 見出し要素は降順になっていません」への対処法３つ

Cocoonのサイドバー・フッターウィジェットのタイトルには自動でH3タグが付与されます。 １カラムでは、このH3が原因でPSIから指摘されます。 つまりH3をウィジェットタイトルから何らかの方法で除外すれば解決できます。

方法１　PHPをカスタマイズする

根本的に対処するならPHPをカスタマイズします。 次のいずれかの方法をとります。

1. 子テーマにlibフォルダを作ってwidget-areas.phpをアップロードして編集。
2. 該当の関数を外して、子テーマのfunction.phpで新しい関数を書きます。

１は親テーマのアップデートに対応できなくなります。
その時は何もなくとも、後でどんなトラブルを引き起こすかわかりません。

２はサイトの高速化施策のためにやることはありますが。
H3タグを削るためだけにそこまでしたくありません。
興味ある方は公式サポートフォーラムでもトピックがありますので読んでみてください。

方法２　タイトルを入れない

この問題が最初に発生したのは、こちらのサイトでした。

ひさの隠れ家

マリーサーバー（鞠鯖）で不定期に活動するミレシアン「ひさちん」のマビノギ日記ブログ

mabinogi.kimoota.net

MMOマビノギのファンサイト。
元々は過去日記の倉庫として作ったもの。
今後更新する予定はなかったので１カラムで適当に作ったら発生したものです。

それだけラフに作ったサイトでしたから、ラフな方法で対処しました。

タイトルを入れなければ怒られることもありません。
原始的かつ確実な方法です。

画像はこんな感じになります。

方法３　自分でタイトルを作ってCSSで対応する

今回はフッター部のウィジェットのタイトルからH3タグを外せばいいだけです。
それも数は２つしかありません。
だったら自分でタイトルのhtml書いてCSSで飾るのがベストプラクティスだと思います。

１　カスタムhtmlウィジェットを設置して編集する

まず、タイトルを削除して空欄にします（「!」をつけての非表示は試してません）。

タイトル部となるカスタムhtmlを設置します。
タイトルに当たるhtmlにクラス名をつけて入力します。

<div class="fbelletitle">管理人：天満川鈴</div>

親サイトの例です。
既にウィジェットエリア内の先頭にカスタムhtmlを配置しているので、その中で編集しています。

２　style.cssを編集する

お好みのCSSでカスタマイズします。
元のデザインと同じがよければ検証で調べてスタイルを記述します。

スキンgrayishだとこうなります。
検証から設定をそのままコピペして、自分でフォントサイズを調整すればOKです。

.fbelletitle {
border-bottom: 1px solid var;
margin: 22px 0;
padding: 4px 0;
display: block;
font-size: 18px;
}

作業している過程の画像です。
上がウィジェットタイトル、下がカスタムhtmlウィジェットです。
フォントサイズを変えればほとんど変わらなくなります

終わったらサイト表示を確認して完成。
完成した画像です。
PSIから怒られなくなりました。

まとめ

方法２はもちろん、方法３の方法でもそんなに時間はかからないはずです。