今回は、HTML文書で見出しを表すタグであるhタグについて、その意味や使い方、SEO効果などを詳しく解説します。hタグを正しく使うことで、文章の構造や内容を明確にし、読者や検索エンジンにとって分かりやすくすることができます。hタグの基本的な知識から応用的なテクニックまで、ぜひ参考にしてください。

hタグを設定するメリット

hタグを設定することには、以下のようなメリットがあります。

読者にとって分かりやすい文章になる

hタグを使うことで、文章の構造や階層を視覚的に表現できます。見出しには重要なキーワードや要約を入れることで、読者が興味を持ちやすくなります。また、見出しをスキャンすることで、文章の全体像や流れを把握できます。

目次を簡単に作成できる

hタグを使うことで、文章の見出しを自動的に抽出して目次を作ることができます。目次は、読者が目的の箇所に素早くアクセスできるようにするだけでなく、文章の構造や内容を一目で伝える役割も果たします。

SEO評価が上がる

hタグを使うことで、検索エンジンに文章の構造や内容を伝えることができます。検索エンジンは、hタグに含まれるキーワードや見出しの順序などを分析して、文章の重要度や関連性を判断します。hタグを正しく使うことで、検索エンジンから高い評価を得ることができます。

hタグの役割

hタグには、h1からh6までの6種類があります。数字が小さいほど重要度が高く、大きいフォントサイズで表示されます。それぞれの役割は以下の通りです。

• h1タグ

文章の最も重要な見出しです。文章の主題やテーマを表します。一つのHTML文書には一つだけh1タグを使うべきです。

• h2～h6タグ

文章のサブ見出しです。h1タグよりも細かい内容やカテゴリーを表します。h2～h6タグは階層的に使うべきです。例えば、h2タグの下にはh3タグを、h3タグの下にはh4タグを使います。

hタグの記述方法

基本の記述方法

hタグは、以下のように記述します。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

色・フォントサイズの調整

hタグはデフォルトでは特定の色やフォントサイズで表示されますが、CSS（Cascading Style Sheets）という言語を使って自由に変更することができます。例えば、以下のように記述すると、

<style>
  h1 {
    color: red;
    font-size: 36px;
  }

  h2 {
    color: blue;
    font-size: 24px;
  }
</style>

以下のように表示されます。

<h1 style="color: red; font-size: 36px;">見出し1</h1>
<h2 style="color: blue; font-size: 24px;">見出し2</h2>

記述の順番

hタグは階層的に記述する必要があります。例えば、以下のような記述は間違っています。

<h1>見出し1</h1>
<h3>見出し3</h3>
<h2>見出し2</h2>

この場合、検索エンジンは文章の構造や内容を正しく理解できません。正しくは以下のように記述するべきです。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

hタグを設定する際の注意点

Webデザインとhタグの記述は切り分けて考える

Webデザインとは、Webページの外観やレイアウトなどを決めることです。Webデザインでは色やフォントサイズなどを自由に変更することができますが、それはCSSで行うべきです。HTMLでは、文章の意味や構造を表すために適切なタグを使うべきです。例えば、大きい文字だからといって必ずしもh1タグを使わなければいけないわけではありません。大きい文字でも文章の主題ではない場合は他のタグ（例えばpタグ）を使うべきです。

hタグに画像を使う場合はalt属性を設定する

画像も文章の一部として扱われる場合があります。例えばロゴやアイコンなどです。この場合、画像も適切なレベルのhタグで囲む必要があります。しかし、画像だけでは検索エンジンや視覚障害者に画像の内容を伝えることができません。そこでalt属性というものを使って画像に代替テキスト（altテキスト）を設定する必要があります。altテキストは画像が表示されなかったり読み込めなかったりした場合に代わりに表示されるテキストです。altテキストは画像の内容や意味を簡潔に説明するものです。
例えば以下のように記述します。

<h1><img src="logo.png" alt="ロゴ"></img></h1>

見出しは改行しても良いが長さに注意する

見出しは改行しても良いですが、長すぎると読みづらくなります。また、検索エンジンも長すぎる見出しは切り捨てて表示する場合があります。一般的には60文字以内程度が目安です。

h1タグの複数使用について

一つのHTML文書に一つだけh1タグを使うべきだというルールは、昔は厳格に守られていました。しかし、HTML5では、sectionタグやarticleタグなどのセクショニング要素を使って文章を分割することができるようになりました。セクショニング要素は、それぞれが独立した文章として扱われるため、それぞれにh1タグを使うことができます。例えば以下のように記述することができます。

見出し1

本文1

見出し2

本文2

この場合、見出し1と見出し2は同じレベルの見出しとして扱われます。しかし、このような記述方法はまだ一般的ではなく、検索エンジンも対応していない場合があります。そのため、現在は一つのHTML文書に一つだけh1タグを使うことを推奨します。

まとめ

今回は、hタグについて、その意味や使い方、SEO効果などを詳しく解説しました。hタグを正しく使うことで、文章の構造や内容を明確にし、読者や検索エンジンにとって分かりやすくすることができます。hタグの基本的な知識から応用的なテクニックまで、ぜひ参考にしてください。あなたのWebサイトがより良いものになることを願っています。

---

関連サービス

• SEO対策
• SEOコンサルティング
• SEO設計
• 内部SEO対策
• コンテンツSEO
• コンテンツマーケティング
• SEO内製化支援
• UI/UX改善コンサルティング