hタグ(h tag)とはHeadingの略で、見出しを意味します。見出しはその重要性に応じて、h1~h6までの6段階でレベル分けされています。
HTMLは文書構造と言って本に例えられます。本にはタイトルだけでなく、内容に応じた見出しがある様に、ウェブページにも情報に合った見出しが必要です。
h1が最上位の見出し(大見出し)で一番重要性が高く、以下数字が小さくなるにつれて下位の見出し(中見出し・小見出し)となり、 h6が最下位の見出しです。
hタグのルール
HTMLの文書構造は本に例えられます。正しい文書構造は検索エンジンがページ情報を正確に読み取る上で重要です。
h1から順に見出しレベルに応じてh2、h3へと続きます。h2からh4など、レベルをいきなり飛ばした記述は間違いです。
また、h1~h6のすべてを使う必要もありません。
<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が沢山あると結局どれが重要度が高いキーワードなのか伝わりにくくなりますよね。
W3Cの考えでは、同じページにh1タグは1つだけとされています。一方、Googleでは特に気にせず、本当に必要ならその様にすればよい、といったスタンスです。
とは言え、やはりh1タグは1つだけにする方が自然であると思います。
よくあるケースとしては、
サイトのTOPページにあるロゴはh1で記述し、下層ページではロゴはimgタグで記述。下層ページではより具体的な情報が入っているはずなので、その大見出し1つに対してh1タグを設定するといった方法です。
例えば、WordPressなどのブログでは初めからその様な設定になっているものが殆どだと思います。
h1に限らずですが、Googleが言う通りグローバルメニューなど重要度の高い情報は、基本的にテキストが望ましいと思います。
ですが、サイトのロゴやキャッチーな見出し等はデザイン的な理由から画像を使いたい時もあると思います。
こういった理由で見出しタグを画像で設定するか悩む時は、次に紹介する事を参考に判断して下さいね。
SEO的な理由で言えば、検索エンジンに情報を的確に伝える事の方が大事です。性能が日々進化している検索園児と言えど画像のすべてを理解することは出来ません。
大事なキーワードが画像としてデザインされていても、検索エンジンに理解されていなければ意味がありませんよね。
これはhタグだけの話ではありませんが、「画像にするか」「テキストにするか」の判断基準になります。
「見た目のデザインは大事だけどやはり情報も大事・・・」といった選択と判断は常に求められます。もし画像を使うならば必ずやるべき事がありますので紹介します。
hタグを画像にするなら絶対やるべき設定はコレ
h1やh2などレベルが高めのhタグを画像で設定してもコーディング規約に反する訳ではありません。ですが、テキストで記述するよりもSEO的には評価が低くなる可能性はあります。
少しでも評価を下げない為にも、hタグを画像で設定する際は、以下のポイントに注意しましょう。
- altタグを必ず設定する
- 画像ファイル名を意味のあるものにする
それぞれについて詳しく解説します。
altは必ず設定する・画像ファイル名も付ける!
alt(オルト)属性とは、imgタグに設定する属性情報のことで、画像の代替テキストとして画像情報の補足に使われます。
何らかの理由で画像が表示されなかった際、画像の内容を説明する情報としてこの代替テキストが使われます。
これにより検索エンジンは画像の中身を理解出来ますし、ユーザーにも内容が伝わります。
hタグ(見出し)だけでなく、情報として意味のある画像には必ずalt属性の設定をしましょう。
alt属性の考え方については以下の記事で詳しく解説しています。ウェブサイト・ブログに限らず、alt属性は重要度が高いので参考にして下さいね。
ちなみにhタグのレベルとブラウザでの見た目は関係ありません。ブラウザが持つ独自のCSSスタイルが適用されているだけです。