見出しタグって？順序や注意点、活用方法をご紹介！

2025/01/10

アクセス分析

Webページを作成する際、正しい見出しタグ（h1, h2, h3, …）の使用は、アクセシビリティやSEOにおいて非常に重要です。見出しタグはページの構造を明確にし、ユーザーや検索エンジンが内容を理解しやすくする役割を果たします。
本コラムでは見出しタグの基本から使用上の注意点、活用方法までを解説します。見出しタグを効果的に活用し、読みやすく、SEOにも強いWebページを作りましょう！

見出しタグの基本

「h1」タグとは？

「h1」タグは、ページ全体の主題を示すために使用される最も重要な見出しタグです。1ページに1つだけ使用することが主流です。Googleは公式動画でh1タグをいくつ使用しても問題ないとしていますが※、アクセシビリティや構造を理解しやすくする為には、h1タグは1つの利用が無難です。
※出典：English Google Webmaster Central office-hours from September 27, 2019

使用例

「h1」タグはページのタイトルやメインテーマに使用します。例えば、当ページでは「見出しタグって？順序や注意点、活用方法をご紹介！」がh1タグにあたります。

「h2」タグとは？

「h2」タグは、「h1」の下位に位置する主要なセクションの見出しとして使用されます。ページ内の各セクションの主題を示し、内容を整理する役割を果たします。h2タグは、いくつ使用してもかまいません。各段落の内容がわかりやすく、キャッチ―なものにすることをおすすめします。

使用例

各セクションのタイトルや製品ページの特徴説明などです。当ページでは「見出しタグの基本」「見出しタグの順序の重要性」「使用上の注意点」「見出しタグの活用方法」「まとめ」がセクションタイトルにあたります。ただし、当ページではh2ではなくh3を使用しています。

見出しタグ使用上の注意点

構造の順序を守る

見出しタグ（h1, h2, h3, …）は、文章やWebページの内容を整理するために使います。読む人が内容を理解しやすくなるよう、見出しタグは順序通りに使用することをおすすめします。
「h1」タグはページ全体のタイトルとして主に1ページに1つ使用し、「h2」は各段落の見出しとしてh1の配下に配置します。「h3」は、h2の中の更に小さなセクションの見出しとして使用します。このように順序を守ることで内容が整理され、読みやすくなります。

飛ばして使用してもOK

h3を飛ばして使用せず、h2の配下にh4を使用しても問題ありません。一方でh3の配下にh2が来るような順序に逆行した使用はできません。
段落内で文字を大きくして主張したい事項がある場合は、文字の大きさや太さを調整し、見出しタグで文字サイズを調整することは避けましょう。音声読み上げで不具合が出る可能性があり、アクセシビリティの観点で好まれません。また、SEOにおいても、正しい見出しタグの使用は検索エンジンの評価を高める要素となります。

見出しタグを目次として活用

h2以降の見出しを冒頭で目次としてまとめると、ユーザーが一目でページの構造を理解し、内容を理解しやすくなります。また、冒頭の目次にアンカーリンクを埋め込み、興味のある章まですぐに辿り着けるようにすることで、アクション率や滞在時間が改善し、SEO上優位であることも確認されています。

まとめ

見出しタグの正しい使用は、WebページのアクセシビリティとSEOにおいて非常に重要です。見出しタグを適切に使うことで、ページの構造が明確になり、ユーザーや検索エンジンが内容を理解しやすくなります。
基本的なルールを守りつつ、柔軟に活用し、より読みやすく、検索エンジンにも強いページを目指しましょう！

※本コラムは2024年11月現在の情報をもとに作成しています

コラム