hタグのルールと使い方 - 見出しタグ：HTML5リファレンス

hタグ（h tag）とはHeadingの略で、見出しを意味します。見出しはその重要性に応じて、h1～h6までの6段階でレベル分けされています。

HTMLは文書構造と言って本に例えられます。本にはタイトルだけでなく、内容に応じた見出しがある様に、ウェブページにも情報に合った見出しが必要です。

h1が最上位の見出し（大見出し）で一番重要性が高く、以下数字が小さくなるにつれて下位の見出し（中見出し・小見出し）となり、 h6が最下位の見出しです。

この記事の目次

1 hタグのルール
2 hタグによくあるQ＆Aまとめ
3 hタグを画像にするなら絶対やるべき設定はコレ
- 3.1 altは必ず設定する・画像ファイル名も付ける！

hタグのルール

HTMLの文書構造は本に例えられます。正しい文書構造は検索エンジンがページ情報を正確に読み取る上で重要です。

h1から順に見出しレベルに応じてh2、h3へと続きます。h2からh4など、レベルをいきなり飛ばした記述は間違いです。
また、h1～h6のすべてを使う必要もありません。

ちなみにhタグのレベルとブラウザでの見た目は関係ありません。ブラウザが持つ独自のCSSスタイルが適用されているだけです。

<h1>H1の見出し</h1>
<h2>H2の見出し</h2>
<h3>H3の見出し</h3>
<h4>H4の見出し</h4>
<h5>H5の見出し</h5>
<h6>H6の見出し</h6>

本と同じで、内容に合わせた見出しを使用する事がポイントです。大抵の場合、以下の様に階層構造に分けて見出しが付けられます。

■セクショニング・コンテンツによる階層構造
<body>
<h1>H1の見出し</h1>
<section>
　<h2>H2の見出し</h2>
  <section>
　　<h3>H3の見出し</h3>
  </section>
</section>
<section>
　<h2>H2の見出し</h2>
　<h3>H3の見出し</h3>
　<h4>H3の見出し</h4>
</section>
</body>

hタグによくあるQ＆Aまとめ

h1タグは同じページ内で何回使える？

h1タグがページ内で一番重要なのであれば、沢山使えばいいのでは？と考える方も居るのではないでしょうか？

見出しにはそのページやコンテンツでの重要なキーワードを入れる訳ですが、h1が沢山あると結局どれが重要度が高いキーワードなのか伝わりにくくなりますよね。

W3Cの考えでは、同じページにh1タグは１つだけとされています。一方、Googleでは特に気にせず、本当に必要ならその様にすればよい、といったスタンスです。

とは言え、やはりh1タグは1つだけにする方が自然であると思います。

よくあるケースとしては、

サイトのTOPページにあるロゴはh1で記述し、下層ページではロゴはimgタグで記述。下層ページではより具体的な情報が入っているはずなので、その大見出し1つに対してh1タグを設定するといった方法です。

例えば、WordPressなどのブログでは初めからその様な設定になっているものが殆どだと思います。

hタグを画像にしてもSEO的に大丈夫？

h1に限らずですが、Googleが言う通りグローバルメニューなど重要度の高い情報は、基本的にテキストが望ましいと思います。

ですが、サイトのロゴやキャッチーな見出し等はデザイン的な理由から画像を使いたい時もあると思います。

こういった理由で見出しタグを画像で設定するか悩む時は、次に紹介する事を参考に判断して下さいね。

hタグには画像よりテキストがSEO的におすすめ

SEO的な理由で言えば、検索エンジンに情報を的確に伝える事の方が大事です。性能が日々進化している検索園児と言えど画像のすべてを理解することは出来ません。

大事なキーワードが画像としてデザインされていても、検索エンジンに理解されていなければ意味がありませんよね。

これはhタグだけの話ではありませんが、「画像にするか」「テキストにするか」の判断基準になります。

「見た目のデザインは大事だけどやはり情報も大事・・・」といった選択と判断は常に求められます。もし画像を使うならば必ずやるべき事がありますので紹介します。