strong / emタグの使い分けルール：HTML5リファレンス
hiroyon
FUERU
hタグの使い方とルール – 見出しタグ：HTML5リファレンス
hiroyon
記事内に商品プロモーションを含む場合があります
hタグとはHeadingの略で見出しを意味します。見出しはその重要性に応じて、h1タグからh6までの6段階でレベル分けされています。
h1が最上位の見出し（大見出し）で一番重要性が高く、以下数字が小さくなるにつれて下位の見出し（中見出し・小見出し）となり、 h6が最下位の見出しです。
hタグはページ内で特に重要度が高く、SEOの観点からも正しい使い方が求められます。例えば、titleタグと混同していたり、知らずにスパム的な使い方をしているかも知れません。
そこで今回は、基本的なhタグの使い方と気を付けるべきルールを紹介していきます。
hタグの使い方
HTMLの文書構造は本に例えられます。正しい文書構造は検索エンジンがページ情報を正確に読み取る上で重要です。
本にはタイトルだけでなく内容に応じた見出しがある様に、ウェブページにも情報に合った見出しが必要です。
検索結果にはh1タグの内容が使われる事が多く、titleタグの代わりにh1タグで書き換えられる事もあります。
WordPressなどではページのtitleタグと同じものがh1に自動的に入る様に設定されている事も多いです。
通常はページの最初の方で使われる事が多く、h1など数字が小さいほど重度が高いです。
h1から順に見出しレベルに応じてh2、h3へと続きます。h2からh4など、レベルをいきなり飛ばした記述は間違いです。
また、h1タグ～h6タグのすべてを使う必要もありません。実際によく使われるのはh1タグ、h2タグ、h3タグあたりです。
ちなみに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>sectionタグで囲む場合は見出しとしてhタグが必要です。
hタグのルール
hタグのルールには正解か不正解か悩ましいものも沢山あります。仕様として間違っていなくても運用上は好ましくない物があるのも事実です。
SEOを考慮してhタグを使う場合に気を付けたい事を掲載しました。
解説内容はあくまで一つの見解としてご判断ください。
h1タグを同じページ内で何回も使う
h1タグがページ内で一番重要なのであれば、沢山使えばいいのでは？と考える方も居るかもしれません。
大見出しであるh1タグにはそのページやコンテンツでのテーマであり主題なので重要なキーワードが含まれます。h1が複数あると、どれが一番重要な見出しなのか分かりにくくなってしまいます。
W3Cの考えでは、同じページにh1タグは１つだけとされています。一方、Googleでは特に気にせず、本当に必要ならその様にすればよい、といったスタンスです。
通常、h1タグの内容とtitleタグには同じ内容が入るケースが沢山あります。こういった事からもh1タグは1つだけにする方が自然であると思います。
他に良くないケースとして、サイトのロゴをh1タグにして全ページで使ってしまうケースがあります。
全てのページのh1で同じ内容が入っている事や、各ページで重要度が高い情報はロゴではない筈です。
例えばWordPressの中でもSEOに力を入れているテーマでは、h1の内容がtitleタグにも入る様に作られている物も有ります。
hタグを画像にして使う
h1やh2などの見出しは勿論の事、グローバルメニューなど重要度の高い情報はGoogleが言う通り、基本的にテキストが望ましいと思います。
しかし、サイトのロゴやキャッチーな見出し等はデザイン的な理由から画像を使いたい時もあると思います。
SEO的な理由で言えば、検索エンジンに情報を的確に伝える事の方が大事です。性能が日々進化している検索エンジンと言えど画像のすべてを理解することは出来ません。
大事なキーワードが画像内に書かれていても、検索エンジンに理解されていなければ意味がありませんよね。
h1タグやh2タグ、h3タグなどの特に重要度が高い見出しを画像にする場合は、次に紹介する設定を画像に対して行ってください。
hタグを画像にするなら絶対やるべき設定
h1やh2などのhタグを画像で設定してもコーディング規約に反する訳ではありません。ですが、テキストで記述するよりもSEO的には評価が低くなる可能性はあります。
テキストをCSSで画面の外に飛ばすなどの設定はペナルティを受ける可能性があります。
少しでも評価を下げない為にも、hタグを画像で設定する際は、以下のポイントに注意しましょう。
- altタグを必ず設定する
- 画像ファイル名を意味のあるものにする
それぞれについて詳しく解説します。
altは必ず設定する・画像ファイル名も付ける！
alt（オルト）属性とは、imgタグに設定する属性情報のことで、画像の代替テキストとして画像情報の補足に使われます。
何らかの理由で画像が表示されなかった際、画像の内容を説明する情報としてこの代替テキストが使われます。
これにより検索エンジンは画像の中身を理解出来ますし、ユーザーにも内容が伝わります。画像のファイル名も、画像内容に合った意味あるものを付けます。img01みたいなのは止めましょう。
hタグ（見出し）だけでなく、情報として意味のある画像には必ずalt属性を入れましょう。
alt属性の考え方については以下の記事で詳しく解説しています。ウェブサイト・ブログに限らず、alt属性も役に立ちますので参考にして下さいね。
まとめ
hタグとはページの見出しに指定するタグの事。重要度に合わせてh1タグ～h6タグまであります。
h1タグはタイトルに使われる事もある重要はタグです。適切な使い方をすればSEO効果も期待できます。
- hタグに入れるテキストではキーワードを乱用しない
- hタグのテキストをCSSでページ外に飛ばさない
- hタグ内を同じ内容で使い回さない
プロフィールの詳細へ
テキストが入ります。