はじめに
ウェブサイトの制作において見出しはとても重要な要素です。適切な見出しを付けることで、ユーザーがコンテンツの内容を理解しやすくなるだけでなく、検索エンジンにとっても解析の手がかりとなります。
HTMLでは見出しをマークアップする際にh1～h6といった見出しタグを使用しますが、誤った使い方をすると検索エンジンにコンテンツの内容を正しく伝えることはできません。
この記事では、検索エンジンにコンテンツの内容を正しく理解してもらうための見出しタグの使い方と、見出しタグにとって重要な概念であるアウトラインについて解説します。
この記事の対象者
- ウェブ制作を基礎からしっかり学びたい方
- 見出しのレベルの付け方で迷うことがある方
- アウトラインについて知りたい方
この記事の目標
- 適切に見出しレベルを使い分けられる
- 暗黙的なアウトラインを理解する
見出しタグを使う理由
見出しタグはHTMLでも初歩的な部分なので、使い方についても既に知っているという方がほとんどだと思います。ここでは、見出しタグがどうして必要なのかについて解説します。
見出しタグを使うメリットとアウトラインについて
見出しタグを使用しなくても、CSSの知識があればデザインどおりの見た目になるようにコーディングを行うことができます。ならば見出しタグを使わなくても問題ないのかというと、それは間違いです。見出しタグを使用することで以下のような効果があります。
- コンテンツの階層化
- SEOへの影響
- アクセシビリティの向上
HTMLには文章の階層構造としてアウトラインという概念があり、検索エンジンはアウトラインから文章の内容を解析します。
h1～h6といった見出しタグはアウトラインを暗黙的に形成します。適切にマークアップが行えていれば、意図したとおりの階層構造を検索エンジンに伝えることができます。検索エンジンはコンテンツの重要な部分を理解しようとするため、アウトラインを正しく形成することはSEOにとって良い影響を与えます。
また、アウトラインが正しく形成されていれば、スクリーンリーダーを使用しているユーザーにとっても求める情報にアクセスしやすくなります。ウェブサイトはどのようなユーザーでも情報が得られるように構築することが基本なので、こういったアクセスビリティにも気を配る必要があります。
見出しのレベル
見出しはh1～h6までのレベルを定義することができます。ウェブページでは一般的に以下のような使い方をします。
- h1：通常、1ページに1つだけ使用します。コーポレートサイトではheader要素の会社ロゴ、ブログ等では記事タイトルに使用することが多いです。SEOとしての重要性が高く、ページの内容を要約する役割を果たします。
- h2：アウトライン上でh1の下層に配置され、メインコンテンツのセクションを区切る際に使用します。h1と同様にSEOの影響を与えますが、h1よりも重要性は低いと解釈されます。
- h3：アウトライン上でh2の下層に配置され、h2の内容を補足する際に使用します。SEOへの影響はh2よりも更に低くなります。
- h4：アウトライン上でh3の下層に配置され、h3の内容をさらに細かく区分する際に使用します。
- h5, ｈ6：あまり使用しませんが、他の見出しタグと同様にコンテンツの構造化を果たす役割を持ちます。
見出しタグはそれぞれ、上のレベルの内容を区分する際に使用します。同じレベルの見出しタグはアウトライン上で区別され、それぞれ違う内容を示すものとして個別に階層構造を構築します。
h1が1ページに1つだけの理由
h1はページ全体の主題を示すため、複数のh1を使用するとそのページの目的が分散してしまいます。
コーポレートサイト制作でヘッダーの会社ロゴにh1タグが使用される理由として、コーポレートサイトは会社を知ってもらうことが目的で制作されることが多いため、会社名が最も重要な見出しであると考えることができます。
また、ブログ記事のように、サイト名よりも記事の内容が重要な場合は記事タイトルにh1タグを使用することもできます。適切な文書構造を持っている内容であれば、1つの記事に複数の記事タイトルを配置するようなことにはならないので、これも適切な使い方と考えることができます。
見出しタグはアウトラインを暗黙的に形成するので、h1より下位のレベルであるh2をセクションタイトルに使用することで、h1が示すコンテンツの内容を細分化することができます。さらにh3、h4と細かく区切ることができ、h1はその全ての見出しを内包するものになります。
また、アウトライン上でh1の直下にh3～h6の見出しが形成されることは望ましくありません。そのような構造になってしまう場合は、適切なセクショニングができているかを見直す必要があります。
暗黙的なアウトラインとはなにか
見出しタグが形成する暗黙的なアウトラインについて、例を交えて解説します。
以下のようなHTMLがあるとします。
<body>
<h1>メイン見出し</h1>
<p>見出しタグの暗黙的なアウトラインについて解説します。</p>
<h2>サブ見出し1</h2>
<p>サブ見出し1の内容です。</p>
<h2>サブ見出し2</h2>
<p>サブ見出し2の内容です。</p>
<h3>サブサブ見出し1</h3>
<p>サブサブ見出し1の内容です。</p>
<h3>サブサブ見出し2</h3>
<p>サブサブ見出し2の内容です。</p>
<h2>サブ見出し3</h2>
<p>サブ見出し3の内容です。</p>
</body>
この例は、暗黙的に以下のようなアウトラインを形成します。
メイン見出し（h1）
- サブ見出し1（h2）
- サブ見出し2（h2）
- サブサブ見出し1（h3）
- サブサブ見出し2（h3）
- サブ見出し3（h2）
ポイントは、全ての見出しはHTML上で全て同じ階層に記述されていますが、サブサブ見出しがサブ見出し2の内容として扱われているところにあります。暗黙的なアウトラインは見出しタグのレベルを判別し、次の同じレベルの見出しタグが記述されている箇所までの内容が、その見出しの示すコンテンツだという扱いになります。
また、暗黙的なアウトラインはHTMLの階層構造そのものを考慮しません。ウェブページのコーディングを行う際はCSSでスタイリングするためにdivタグをよく使用しますが、divタグはセクショニングを行うための意味は無いのでアウトラインに影響を与えません。なので、以下のような場合も上記の例と同じになります。
<body>
<h1>メイン見出し</h1>
<p>見出しタグの暗黙的なアウトラインについて解説します。</p>
<h2>サブ見出し1</h2>
<p>サブ見出し1の内容です。</p>
<!-- divで囲ってもアウトラインは変わりません。 -->
<div>
<h2>サブ見出し2</h2>
<p>サブ見出し2の内容です。</p>
</div>
<h3>サブサブ見出し1</h3>
<p>サブサブ見出し1の内容です。</p>
<h3>サブサブ見出し2</h3>
<p>サブサブ見出し2の内容です。</p>
<h2>サブ見出し3</h2>
<p>サブ見出し3の内容です。</p>
</body>
サブ見出し2とそれに続くpをdivでグルーピングしていますが、divで囲われていないサブサブ見出しもサブ見出し2の内容として解釈されます。これは、場合によっては意図通りの文書構造にならない可能性があります。
アウトラインはsectionタグを使用することで明示的に示すこともできます。divタグではなくsectionタグを使用すると、section内のコンテンツを明確にすることができます。
<body>
<h1>メイン見出し</h1>
<p>見出しタグの暗黙的なアウトラインについて解説します。</p>
<h2>サブ見出し1</h2>
<p>サブ見出し1の内容です。</p>
<!-- divの代わりにsectionを使用します。 -->
<section>
<h2>サブ見出し2</h2>
<p>サブ見出し2の内容です。</p>
</section>
サブ見出し1の内容と解釈されます。
<h3>サブサブ見出し1</h3>
<p>サブサブ見出し1の内容です。</p>
<h3>サブサブ見出し2</h3>
<p>サブサブ見出し2の内容です。</p>
<h2>サブ見出し3</h2>
<p>サブ見出し3の内容です。</p>
</body>
ポイントとして、サブサブ見出しはsection内に含んでいないのでサブ見出し2の内容としては解釈されません。これらは暗黙的にサブ見出し1の内容として解釈されることになります。
このように、意図したとおりのアウトラインを構築するためにsectionタグを使用することがHTMLの基本です。sectionタグについては以下の記事で詳しく解説しています。
最後に
検索エンジンにコンテンツの内容を正しく理解してもらうための見出しタグの使い方と、見出しタグにとって重要な概念であるアウトラインについて解説しました。
ウェブ制作において適切に見出しをマークアップできることは基本中の基本ですが、アウトラインを意識してコーディングを行えるとアクセシビリティの向上にもなるので良いと思います。