前回に引き続いて今日も書籍「HTML5&CSS3レッスンブック」を読み進めています。
その中で「見出しとセクション」という説明(P.59)があり、昔は1ページ全体を<h1>から順番にマークアップするというルールだったそうです。
セクション毎にH1が使える
しかしそれですと不便なのでHTML5からは、「セクション」毎に<h1>以下を使って良いことになったとのこと。
構造的には…
<body>⇒セクション(すべてのセクションの親となる特殊セクション)
<h1>ブログタイトルなど</h1>
<article>⇒セクション
<h1>記事タイトル</h1><h2>見出しA</h2><h3>見出しB</h3>…
</article>
</body>
その他にもセクションには、<nav>(=ナビゲーション)、<aside>(=ブログパーツ等)、<section>(=その他一つのまとまりにしたい部分)などがあります。
はてなブログではどうなっているだろう?
早速はてなブログでどうなっているか見てみました。Firefoxの「要素を調査」を活用します。
1行目にDOCTYPE宣言(<!DOCTYPE html>)があり、次にオレンジ枠の<head></head>があって、その次に赤枠の<body></body>があります。
この<body>の内部にブログのコンテンツは収まっています。<body>タグの左に付いている三角マークをクリックして展開するとbody内部が、どわっと出現します。
内部にはたくさんの<div>があり、その中の<div id="content">→id="content-inner"→id="wrapper"→id="main"→id="main-inner"の奥地に<article>タグを発見することができました。
この<article>内部に、いまご覧になっているブログコンテンツの本文が収納されています。
(実際に記事部分の構造を探る様子を以下の動画に収めました。動画を「全画面」ボタンで最大化して頂きますと細部を確認できて易々具合です)
はてなブログにはh2がない
HTML5では、セクション内で<h1>からはじめてもOKということらしいので、セクションの一つである<article>内部は<h1>から始められます。
<article>内部を見てみるとまず先頭、ブログ記事のタイトルが<h1>に指定されています。
さらに「class="entry-content"」というクラスがあり、そこを展開するといよいよテキスト本文が現れます。
ここは私達がいつもブログを書いている部分です。「大見出し」を入れると<h3>が入ります。「中見出し」は<h4>、「小見出し」が<h5>。
ここで気づきます、「あれ?h2はどこへ行ったの」と。
此れが世に言う「はてなブログ見出し騒動(?)」です。
<h1>から<h2>が飛んで大見出しで<h3>になっている。通常大見出しは<h2>になるはず。これはなんで?SEO的にどうなの?という私の中では有名な騒動です。
とても気になって、一時<h3>タグを<h2>タグへ手書きで書き換えたりしていました。Javascriptを使って一気にHタグを変更する人もおられます。
毒氏のブログでは、はてなサポートに聞いた方がいらっしゃるという記事が掲載されていました。
なんでも大見出しがh3から始まっているのは、はてなダイアリー(はてなブログの前身)の大見出しがh3だったから…だそうでその影響が今も残るという理由でした。
ブラタモリで言うところの江戸時代のお堀のカーブが今の道路にも影響している風な理由(笑)です。
これについては様々なはてなブログ諸先輩方が考察を重ねています。が、結論から言うと「あまり気にしなくて良い」と思うようにしました。
それは様々なブログをたどり以下のブログを読んで納得行ったのです。
無理やりにまとめますと「セオリー通りにHタグを並べたとしてもそのことだけでランキングが変化することはない(Hタグの構造によってペナルティーがあることはないとGoogleの中の人が言っている)」とのこと。
結局H3のまま行くことに
結局デフォルトのまま、はてな推奨の大見出しで何も触らないことにしました。
普段はもちろんH2を飛ばすようなことはしませんが、本書をきっかけにして割とじっくり調べてみてすっきりした気分です。