うるとらすーぱーえくすぷれす

技術を尽くして全力で遊ぶ

はてなブログの記事の大見出しがh3だった

はてなブログで記事を書いていると気になることがあった。

大見出しがh3タグなのである。

そこで、はてなブログの見出しについて階層構造を大雑把に調べてみた。

 

 前提

  • W3C準拠
  • hタグは複数回使用してもオッケーだよ!

トップページの階層構造

トップページの大雑把な階層構造はこんな感じ。

<header> 
<h1>ブログのタイトル</h1>
<h2>ブログの説明文</h2>
</header>
<div>
<section>
<h1>記事のタイトルA</h1>
</section>
<section>
<h1>記事のタイトルB</h1>
</section>
</div>

トップページのheaderタグの中には

h1タグでタイトルが、h2タグでブログの説明文が記述されている。

また、h1タグにはid=titleが付与されている。

 

次にdivタグの中にもh1タグが複数あるけどsectionタグの中にそれぞれ記述されているので問題なし。

 

ブログ記事表示時の階層構造

ブログ記事を表示しているページの階層構造は大まかにこんな感じ。

ブログの名前と説明文はトップと同じなので省く。

<article>
<div>
<header>
<h1>記事のタイトル</h1>
</header>
<div>
<h3>大見出しA<h3>
<h3>大見出しB<h3>
</div>
</div>
</article>

 articleタグの中を見てみる。

やっぱり大見出しがh3タグになっている。

 

構造的にはh1タグで記事のタイトルが表示されているので

検索エンジンのクローラーが間違って本文などをタイトルとしてインデックスすることはなさそう。

また、h3も秩序だって配置されているので筆者が意図的にhタグをぐちゃぐちゃに配置しない限りは、読者に優しい章立てになる。

 

適当にgoogleで検索すると、上位に表示されるブログやホームページの中には

h1タグの後にh4タグが使用されている例などが散見される。

このことはh1タグの次にh3タグが使用されているとしても特に修正する必要がないことを示唆する。

 

でも連番じゃないのはなんとなく気持ち悪いなあ……