皆様、こんにちは。
この話題については既に議論は行われている内容となりますが、補足事項などがありますので改めてまとめさせていただきました。
はてなブログでブログを書いている方向けのエントリーとなります。
はてなブログの大見出しh3問題
はてなブログで大見出しを選択するとHTMLのタグとしては<h3>が挿入され、それがSEO的にも悪い影響を及ぼしているのでは？という問題があります。
このあたりの議論については既に他の方が多数解説していただいていますので貼っておきます。
一応、わかりやすく画像で示すとこんな感じです。
各エントリーにおいてはタイトルがh1、そして見出しがh3から始まるため、h2がなく歯抜けになってしまっているということが問題視されています。
ちなみに私の見解を述べておきますと、SEOがどうとか言うより、単に「気持ち悪い」です。だって抜けているんだもの。
jQueryで動的に書き換える方法
そして動的な変換方法も既に他の方が公開されています。丁寧に解説されていますので、コードの貼り付け場所等が不明な場合はこちらをご覧ください。
※本エントリー内では割愛させていただきます。
こちらのものを少し応用（1行足しただけ）したものが以下のコードです。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function(){ if (!document.querySelector('.entry-content h2')){ $('.entry-content h3').replaceWith(function() { $(this).replaceWith('<h2>'+$(this).html()+'</h2>'); }); $('.entry-content h4').replaceWith(function() { $(this).replaceWith('<h3>'+$(this).html()+'</h3>'); }); $('.entry-content h5').replaceWith(function() { $(this).replaceWith('<h4>'+$(this).html()+'</h4>'); }); } }); </script>
1行目に関してはjQueryの読み込みなので、既にどこかしらに記載されているのであれば省略可能です。
これをヘッダか記事上か記事下にまるっとコピペすれば以下のようになるはずです。スマホでも一緒です。
大見出しがh2、中見出しがh3、小見出しがh4に書き換わりました。
トップページの記事一覧からの見た目も変更させたい場合はヘッダに入れればいけるはずです（制限事項は後述）。
足した部分はif文の判定だけですが、これはエントリー内にh2タグがあるかどうかの判定をしています。つまり、過去に自力で書き換えた記事があった場合や、今まで頑張って書き換えていたけどこれからは自動化したいという人向けの判定文となります。
これがないと以下のように、過去に自分で書き換えた記事に不具合が起こります。
h3と書いてある部分のCSSがh2と一緒になっています。書き換える必要のない記事まで書き換えてしまっているということです。
私は過去にいくつか手動でh3からh2に書き換えてしまっていたため、この判定を入れました。
留意事項
いくつか留意事項がありますので書いておきます。
h3タグに要素を追加している場合
基本ないと思いますが、h3タグを手動で書き換えている場合はうまく動作しません。<h3 class="hoge" id="piyo">みたいな感じで。
<h3>の場合のみ動作します。
トップページの装飾も変えたい場合
こちらは上述したとおりヘッダに入れればトップページにも適用されます。但し、トップページで表示される記事が全て手動でh2書き換えを行っていない場合に限ります。
つまり何もしていなければ大丈夫です。
トップページは通常いくつかの記事がまとまって表示されると思いますが、その中に1つでも過去にh2に書き換えているものが入っていると動きません。
作りこめば回避できると思いますが、正直個人的にはトップページはどうでもいいと思っていますので本当に気になる人は気をつけてください。
Adsenseの文中配置を行っている場合
これ結構見かけますが、広告を記事の途中に配置している場合は影響が出る可能性があります。
具体的にはこちらです。
これ凄く良くて、私も使わせていただいています。超オススメです。
こちらのカスタマイズのコード中に、var $target = $('.entry-content p + h3,h4,h5');のように、hタグが登場する場合があります。
この部分をvar $target = $('.entry-content p + h2,h3,h4');のように繰り上げておかないと正しく動作しなくなる可能性がありますのでご注意ください。
たまたま私はこのカスタマイズを行っていたので気づきましたが、他にもタグに何かしらのカスタマイズを施している場合は同様です。
まとめ
jQueryを使って動的に大見出しを<h3>から<h2>に書き換える方法をご紹介しました。
ここまでして書き換える必要はないと言っている方もいらっしゃいますが、私は「気持ち悪い」から書き換えています（笑）
まぁ取り外しは気軽にできますので、迷っている方は1度お試しあれ。
一応書いておくと、自己責任でお願いします。
ちょっとこの辺の言語に明るくないので誤り等あった場合はコメントやお問い合わせフォーム等で教えていただけるとありがたいです。ちなみに質問は答えられる自信がありません！
最後までご覧いただきありがとうございます。
んだば、まだ。