はてなブログの大見出しが、h3から始まっているってご存じでしたか？
通常は、h1、h2、h3と順番に並んでいるはずなのに、なぜかはてなブログではh1、h3、h4・・・という順番になっていて、h2がないのです！
なぜ・・・？このままでいいの？
対処するならば、どんな対処法があるの？
どうやって対処したらいいの？
紹介しますね！
はてなブログの見出しとは？
見出しとは、文章のタイトルとして書かれている部分のことです。
このタイトルがあることで、どんなことが書いてあるのかわかりやすくなりますよね。
大見出し
中見出し
小見出し
↑これですね。
ブログの画面では、こんな風になってます。
タイトル部分について、ＨＴＭＬ編集で見ると・・・
あれ？ｈ2がない！！
本来は、h1→h2→h3・・・と順番に並ぶはずなのに、h2がないのです！
なぜ、はてなブログにh2がないの？
本来はあるべきh2がないなんて、ブログとして大問題！です。
でも、ないまま、現在に至るならば、何か理由があるのかも知れません。
そこで、調べてみました。
すると、なぜh2がないのか、はてなブログに問い合わせてらっしゃる方がいらっしゃいました。
はてなブログさんからの回答は、
はてなダイアリーでは記事のタイトルをh3としているため、
はてなダイアリーの仕様と合わせるためにh3となっております。
えーーー！？
前の仕様と合わせるためだったのね・・・。
そこをなんとかできなかったのか・・・！
いや、どうしてもできなかったから、今に至るんだよね。そうだよね・・・。
変えられなかったのは仕方ないにしても、このh2が存在しない状態は、ＳＥＯ的にも問題ありという意見もあります。
しかし、問題ないという意見もあるので、どちらが正しいかはよくわかりません。
はてなブログの運営側が変更していないので、大きな問題はないのではないかとも考えられます。
ただ、この状態が適切ではないため、気になる！という方は、h2を加える変更を行なっているようです。
では、どんな対処があるのか？
見てみましょう！
対応は４つ！
いろいろ調べてみると、手順は大きく４つあるようです。（自己責任でお願いいたします。）
手動で書き換える
はてなブログの「HTML編集」でh３→h2に１つ１つ変えていく方法です。
記事が少なければ問題ありませんが、記事数が多い場合は大変です・・・！
Markdownモードで書く
はてなブログでは、３つの編集モードで書くことができます。見たままモード、はてな記法モード、Markdownモードです。
このうちのMarkdownモードを使うと、大見出しをh2から始めることができるそうです。
手順は、はるなぴさんのブログに詳しく書かれています。私がh2問題を知るきっかけにもなったブログです・・・！
ただ、こちらの手順も、すでに記事がたくさんある方にとっては、ちょっと難しい対処法だと思います。
GoogleChromeの拡張機能を利用する
GoogleChromeの拡張機能を利用すると、h2タグの見出しを簡単に作ることができます。
ツールの「h2」ボタンを押下することで、h2タグが作れるようです。
こちらが使えるのは、見たままモードで書いている方のみとのこと。
とても便利ではありますが、すでに記事がたくさんある場合には、１つ１つ修正していく必要がありそうです・・・。
使い方は、こちらが参考になります。
affiliate-couple.hatenablog.com
jqueryを利用する
jqueryという機能を使うと、自動的に書き換えてくれるそうです。
こちらは、既存の記事にも対応してくれます！
手順は、CSSを書き換えることになります。
私がとった対策はjquery
検討した結果、私も対処を行なうこととしました！
なぜなら、やっぱりh2がないというのが気になるから。
では、どの方法をとる？
私は、jqueryにしました！
すでに大量の記事があったので、それらを手作業で直していくのは大変です・・・。
既存記事も自動的に修正してくれるということで、jqueryを選択しました。
手順は？
タグを書き換えるソースをコピーし、はてなブログのデザインー設定ーフッタに貼り付けます。
既存のソースは保存するなどして、データを保存しておいてくださいね。
ソースはこちらを参考にしました。ありがとうございます！
そして、CSSなどでh2に関する処理を書いていた場合は、それらのソースをすべて修正する必要があります。h3→h2に、h4→h3に・・・という感じですね。
私の場合、
・CSS（見出しの加工処理）
・記事下（アドセンスの広告追加の処理）
・スマホ用
を修正しました。
こちらも、既存のソースは念のため保存しておいて、修正を行なってみてくださいね。
修正したら、プレビューで確認して、問題ないか見てみましょう！
予想外の場所に変化があったら・・・？
プレビューで見てみたら・・・
あれ？タイトル下のサブタイトル表示も変わっている！
私は、大見出しを吹き出しにする処理をCSSに書いていたため、タイトル下のサブタイトルも吹き出しになってしまったのです・・・！
ど、どうしたらいいの・・・？
調べたら、こちらが参考になりました！
私が書いていた処理は、「ブログ全体のh2全部のデザインを変更してね」という処理だったようです。
ここを「記事内のh2だけのデザインを変更してね」という処理に変えればOKとのことでした。
.entry-content h2 { デザインコード }
「.entry-content」が「記事の中」を表しているとのことです。
これに基づいてCSSを修正したら・・・、元に戻りましたー！
よかった・・・！
CSSを修正すると、思わぬところに影響がでてくることもあります。
修正後は、きちんと確認したいですね。
気になる方はh2を追加して、正しい順番に変更しよう！
はてなブログにｈ2がない問題は、はてなブログ運営側が修正をしていないので、そんなに気にしなくてもよいのかもしれません。
Googleのジョン・ミューラー氏も、「h1タグ、h2タグ、h3タグの順番が間違っていたら問題になりますか？」という質問に対して、
実際には問題にならない。ページの内容を理解するために見出しタグを多少は使っているが、厳密に正しい順番である必要はない。
と回答しているそうです。
でも、「多少は見出しタグを使っている」とのことですし、Google以外のサイトが見だしタグを使っている可能性もあります。
私が気になっていたのは、今回のjqueryの修正では、HTMLそのものが変わるわけではないということです。
ですから、Googleなどのサイトが、jQueryも適切に読み込んでくれるのか？ということが気になっていました。
調べてみると、読み込んでくれるという情報を見つけたのですが、なんとサイトを保存しておくのを忘れて、今となっては見つからず・・・。
調べた中では、こちらのサイトに、
JavaScriptもjQueryも適切にレンダリングして、コンテンツを評価しています。
と記載がありました。
そこで、私はh2がないことが気になったため、対応した方がよいと考えて、対応を入れてみました。
はてなブログのh2がない問題。
気になる方は、こうして修正することも可能です！
自分の判断に基づいて、必要であれば、できる範囲で対応していきたいですね。
