Hタグとは何か
Webページを構成するHTML要素の中で、文章の構造を示す役割を担っているのがHタグです。Hはheadingの頭文字で、日本語では「見出し」を意味します。新聞や雑誌で大きな文字の見出しがあると、読者はその記事の内容をひと目で把握できますが、Webページにおいても同様の役割をHタグが果たしています。
Hタグにはh1からh6までの6段階があり、数字が小さいほど重要度が高くなります。h1は最も重要な大見出しとして使われ、ページ全体のテーマを示します。h2は大きなセクションの区切りに、h3はh2の中をさらに細分化するときに使用します。この階層構造によって、検索エンジンもユーザーも、ページの内容を論理的に理解できるようになります。
HTMLの基本を学び始めた方にとって、Hタグは最初に覚えるべき要素の一つです。正しく使いこなせるようになると、読みやすい記事が作れるだけでなく、SEOの観点からも大きなメリットを得られます。26年以上Web制作に携わってきた経験からも、Hタグの重要性は年々高まっていると実感しています。
h1からh6までの基本的な役割
h1タグはページ全体の主題を表す最上位の見出しです。書籍でいえばタイトルにあたる部分で、そのページが何について書かれているかを端的に示します。検索エンジンはh1タグの内容を重視してページのテーマを判断するため、キーワードを含めつつ、ユーザーにとってわかりやすい表現にすることが大切です。
h2タグは章にあたる見出しで、記事の大きなセクションを区切る役割があります。長い記事では複数のh2が使われ、それぞれが独立したトピックを扱います。h3タグはh2の中をさらに細かく分けるときに使い、節のような役割を果たします。h4以降はより細かい分類に使いますが、実際のブログ記事ではh3までで十分なケースがほとんどです。
| タグ | 役割 | 使用例 |
|---|---|---|
| h1 | ページ全体の主題（タイトル） | 記事タイトル、ページの大見出し |
| h2 | 大きなセクションの区切り（章） | 主要なトピックの見出し |
| h3 | h2内の細分化（節） | サブトピックの見出し |
| h4〜h6 | さらに細かい分類 | 詳細な項目分け（使用頻度は低い） |
見出しの階層を正しく守ることで、スクリーンリーダーを使用する視覚障害のある方も、ページの構造を把握しやすくなります。アクセシビリティの観点からも、Hタグの適切な使用は欠かせない要素となっています。
見出しタグがWebページで果たす意味
見出しタグは単なる文字の装飾ではありません。HTMLの仕様において、文書の論理構造を定義するセマンティックな要素として位置づけられています。CSSで文字を大きくしたり太くしたりすることはできますが、それだけでは検索エンジンやスクリーンリーダーに「これは見出しである」という情報は伝わりません。
Webページにおいて見出しタグは、コンテンツの骨格を形作る重要な存在です。ユーザーがページを訪れたとき、まず見出しに目を通して全体像を把握し、興味のある部分を読み進めるという行動パターンが一般的です。適切な見出しがあることで、ユーザーは必要な情報にすばやくたどり着けます。
検索エンジンのクローラーも、見出しタグを手がかりにしてページの内容を理解します。見出しの階層構造が明確であれば、そのページが扱っているトピックや、各セクションの関係性を正確に把握できます。これがSEOにおいてHタグが重要視される理由です。
h1タグとh2タグの違いを理解する
h1タグとh2タグは見た目上は大きな見出しと中見出しの違いに見えますが、その役割は明確に異なります。h1タグはページ全体のテーマを表す唯一無二の存在であり、原則として1ページに1つだけ使用します。一方、h2タグは記事の主要なセクションを示すもので、複数使用することが一般的です。
h1タグには、そのページで最も伝えたいメッセージを込めます。検索結果に表示されるtitleタグと同様に、ユーザーと検索エンジンの両方に対してページの主題を明示する役割があります。ブログ記事の場合、記事タイトルがh1タグで囲まれることがほとんどです。
h2タグは目次の項目にあたる存在です。ユーザーがページをスクロールしながら情報を探すとき、h2タグが道しるべとなります。記事の構成を考える段階でh2タグの内容を決めておくと、論理的で読みやすい記事を書きやすくなります。
h1タグを1ページに1つにすべき理由
HTML5の仕様では技術的には複数のh1タグを使用できますが、SEOの観点からは1ページに1つが推奨されています。複数のh1タグがあると、検索エンジンがページの主題を判断しにくくなり、意図したキーワードでの上位表示が難しくなる可能性があります。
ユーザー体験の面でも、h1タグは1つが望ましいです。複数のh1タグがあると、ページを訪れた人が「結局このページは何について書いてあるのか」と混乱してしまいます。書籍のタイトルが複数あったら読者が困るのと同じことです。
Googleのジョン・ミューラー氏も、h1タグを複数使用しても技術的な問題はないとしつつも、1つに絞ることでページの焦点が明確になると述べています。実務においては、余計なリスクを避けるためにも1ページ1つのh1タグを徹底することをおすすめします。Rankabilityの2025年調査によると、検索上位ページの93.5%が単一のh1タグを使用しているという結果も出ています。
h2タグの効果的な使い方
h2タグは記事の骨格を形成する重要な要素です。ユーザーが記事の全体像をつかめるよう、各h2タグには明確で具体的な内容を記述します。抽象的な表現よりも、何について書かれているかが一目でわかる見出しが効果的です。
h2タグにキーワードを含めることはSEO上有効ですが、不自然な詰め込みは避けるべきです。ユーザーにとって読みやすく、内容を正確に反映した見出しを心がけましょう。検索エンジンも年々賢くなっており、キーワードの羅列よりも自然な文章を好む傾向にあります。
効果的なh2タグを作成するためのポイントは以下の通りです。
- 記事の主要なトピックを明確に表現する
- キーワードを自然な形で含める
- ユーザーが求める情報を端的に示す
- 30文字程度の簡潔な表現を心がける
h2タグの下にはh3タグでさらに細かい項目を設けることができます。ただし、内容が少ないのに無理にh3を作る必要はありません。階層構造は読みやすさを向上させるための手段であり、形式のために使うものではないことを忘れないでください。
HタグがSEOに与える影響
Hタグは検索エンジン最適化において重要な役割を果たします。Googleをはじめとする検索エンジンは、Hタグの内容を参考にしてページのテーマや構造を理解します。適切にHタグを設定することで、狙ったキーワードでの検索順位向上が期待できます。
ただし、Hタグだけで検索順位が劇的に変わるわけではありません。コンテンツの質、被リンク、ユーザー体験など、SEOには多くの要素が関係しています。Hタグはそれらの要素の一つとして、全体的なSEO施策の中で適切に位置づけることが大切です。
私が長年SEOの研究と実践を続けてきた中で確信しているのは、基本に忠実であることの重要性です。Hタグも例外ではなく、奇をてらったテクニックよりも、正しい使い方を地道に続けることが成果につながります。
検索エンジンがHタグを評価する仕組み
検索エンジンのクローラーがWebページを巡回するとき、HTMLのソースコードを解析してページの内容を理解しようとします。このとき、Hタグは「ここが重要なポイントです」というシグナルとして機能します。特にh1タグとh2タグに含まれるキーワードは、ページのテーマを判断する際に重視されます。
Googleは自然言語処理の技術を駆使して、Hタグの内容と本文の関連性も分析しています。見出しで宣言した内容と実際の本文が一致しているかどうかがチェックされ、矛盾があると評価が下がる可能性があります。見出しは本文の内容を正確に要約したものであるべきです。
検索結果のスニペットにHタグの内容が使われることもあります。特集スニペットや強調スニペットとして表示される場合、h2やh3タグの見出しがそのまま採用されるケースがあるため、簡潔でわかりやすい見出しを心がけることが検索結果での視認性向上にもつながります。
キーワードを見出しに含める際の注意点
見出しにキーワードを含めることはSEOの基本テクニックですが、やりすぎは逆効果です。すべての見出しに同じキーワードを詰め込むと、検索エンジンからスパム的なコンテンツと判断されるリスクがあります。自然な文脈でキーワードを使用することを最優先としてください。
メインキーワードはh1タグに含め、関連キーワードや共起語をh2やh3に分散させる方法が効果的です。たとえば「Hタグ」がメインキーワードなら、h2には「見出しタグの設定方法」「SEOへの影響」など、関連する表現を使うことで、より幅広い検索クエリに対応できます。
読者の立場になって見出しを読み直すことも大切です。キーワードを意識するあまり、意味が通じにくい見出しになっていないでしょうか。ユーザーファーストの姿勢を忘れず、わかりやすさと検索対策のバランスを取ることが成功への道です。
見出しに自然な形で含めるべき共起語を調査するには、形態素解析エンジンを搭載した専門ツールが有効です。品詞や原形まで詳細に分析できるため、単なるキーワード羅列ではなく、言語的に自然な共起関係を把握できます。
Hタグの正しい記述ルール
Hタグには守るべき基本的なルールがあります。最も重要なのは、見出しの階層を飛ばさないことです。h1の次にいきなりh3を使ったり、h2を飛ばしてh4を使ったりすることは、HTML的には許容されますが、ベストプラクティスとはいえません。
階層を正しく守る理由は、文書構造の明確化にあります。書籍の目次が「第1章」「第1節」「第1項」と順序立てて並んでいるように、Webページの見出しも論理的な順序で配置されるべきです。これにより、人間も機械も内容を理解しやすくなります。
実際のコーディングでは、CSSで見た目を調整できるため、デザインを理由に階層を飛ばす必要はありません。h3タグの見た目をh2より大きくすることも可能ですが、HTMLの構造としては正しい順序を維持すべきです。
正しい階層構造と間違った階層構造のHTMLコード例を以下に示します。
✓ 正しい例
<h1>ページタイトル</h1>
<h2>セクション1</h2>
<h3>サブセクション1-1</h3>
<h3>サブセクション1-2</h3>
<h2>セクション2</h2>
<h3>サブセクション2-1</h3>✗ 間違った例
<h1>ページタイトル</h1>
<h3>セクション1</h3> ← h2を飛ばしている
<h2>セクション2</h2>
<h4>サブセクション</h4> ← h3を飛ばしている
<h1>別のタイトル</h1> ← h1が複数ある見出しの階層構造を守る重要性
見出しの階層構造は、Webページのアクセシビリティに直結します。スクリーンリーダーを使用する視覚障害のある方は、見出しを頼りにページ内を移動します。h1からh2、h2からh3へと順番に遷移できることを前提とした操作が行われるため、階層が飛んでいると混乱を招きます。
WebAIMが2024年に実施したスクリーンリーダーユーザー調査（有効回答1,539件）によると、長いWebページで情報を探す際に見出しを使って移動するユーザーは71.6%に達しています。検索機能を使う13.6%やページを読み進める6.4%を大きく上回り、見出しナビゲーションが最も一般的な方法となっています。
検索エンジンも見出しの階層構造を参考にしています。論理的に整理された構造は、ページの内容を正確に伝えるシグナルとなります。逆に、階層が乱れていると、ページの品質に疑問を持たれる可能性があります。
実務では、記事を書き始める前に見出しの構成を決めておくと、階層の混乱を防げます。最初にh2レベルの大見出しを列挙し、必要に応じてh3、h4を追加していく方法がおすすめです。全体の構造が見えた状態で本文を書くと、論理的で読みやすい記事になります。
pタグとHタグの関係性
Hタグ（見出し）とpタグ（段落）は、HTMLにおいて密接に関連しています。見出しはセクションのタイトルを示し、pタグで囲まれた段落がその内容を説明します。この組み合わせによって、Webページの文章構造が形成されます。
見出しだけが並んでいて本文がないページ、あるいは見出しがなく延々と段落が続くページは、どちらもユーザーにとって読みにくいものです。適切な間隔で見出しを配置し、その下に関連する段落を置くことで、メリハリのある読みやすい構成になります。
コーディングの際は、見出しタグの直後に必ず本文を配置することを習慣づけてください。見出しだけで終わったり、見出しを連続して使ったりすることは避けるべきです。検索エンジンもユーザーも、見出しの後には説明があることを期待しています。
Hタグの設定状況を確認する方法
自分のWebサイトでHタグが正しく設定されているかを確認することは、SEO対策の基本です。いくつかの簡単な方法でチェックできるため、定期的に確認する習慣をつけることをおすすめします。
最も手軽な方法は、ブラウザの開発者ツールを使うことです。ChromeやFirefoxで右クリックして「検証」を選ぶと、HTMLのソースコードを確認できます。ここでh1、h2、h3などのタグを検索し、意図した通りに設定されているかをチェックします。
専用のSEOツールやブラウザ拡張機能を使う方法もあります。見出し構造を視覚的に表示してくれるツールを使えば、階層の問題や抜け漏れを素早く発見できます。私が開発に携わったツールでも、Hタグの分析機能を提供しています。
ブラウザの開発者ツールを使った確認手順
ブラウザの開発者ツールは、Web制作者にとって必須の確認手段です。Chromeの場合、確認したいページで右クリックして「検証」を選択するか、F12キーを押すと開発者ツールが開きます。Elementsタブでは、ページのHTML構造がツリー形式で表示されます。
開発者ツールの検索機能を使うと、特定のタグを素早く見つけられます。Ctrl+F（Macの場合はCmd+F）で検索窓を開き、h1やh2と入力すると、該当するタグがハイライトされます。見出しの数や内容、階層構造が意図通りかを確認してください。
Elementsパネルで特定のタグをクリックすると、ページ上の対応する要素がハイライトされます。これにより、CSSで見た目を変えている場合でも、どのテキストがどのHタグで囲まれているかを正確に把握できます。定期的にこの確認を行うことで、意図しない変更を早期に発見できます。
より効率的に確認したい場合は、開発者ツールのConsoleタブで以下のJavaScriptを実行すると、ページ内の全見出しタグを階層構造付きで一覧表示できます。
document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(h => {
const indent = ' '.repeat(parseInt(h.tagName[1]) - 1);
console.log(`${indent}${h.tagName}: ${h.textContent.trim()}`);
});SEOツールを活用した一括チェック
複数のページを効率的にチェックするには、SEOツールの活用が効果的です。Screaming FrogやAhrefsなどのツールは、サイト全体のHタグ構造を一覧で表示できます。h1タグが重複しているページや、h1タグがないページを素早く特定できます。
主要なHタグチェックツールの特徴を比較すると以下のようになります。
| ツール名 | 種類 | 主な機能 | 費用 |
|---|---|---|---|
| Screaming Frog | デスクトップアプリ | サイト全体のクロールとHタグ一括抽出 | 無料版あり（500URLまで） |
| HeadingsMap | ブラウザ拡張 | 表示中ページの見出し構造を可視化 | 無料 |
| Lighthouse | Chrome内蔵 | アクセシビリティ観点でのHタグ検証 | 無料 |
| Ahrefs | Webサービス | 競合分析を含む総合SEO診断 | 有料 |
無料で使えるブラウザ拡張機能も多数あります。Web Developer、HeadingsMapなどの拡張機能は、表示中のページの見出し構造を瞬時に可視化してくれます。見出しの階層が視覚的にわかるため、問題の発見が容易です。
Googleの提供するLighthouseやSearch Consoleも活用できます。LighthouseはChrome開発者ツールに統合されており、アクセシビリティの観点からHタグの問題を指摘してくれることがあります。Search Consoleでは、モバイルユーザビリティのレポートで関連する問題が報告される場合があります。
競合サイトのHタグ構造を効率的に分析したい場合は、以下の見出し抽出ツールがおすすめです。特定キーワードの検索上位サイトからH1〜H6の見出しタグを自動抽出し、競合サイトの見出し構成や平均文字数・平均見出し数などの統計データも確認できます。
見出しデザインを見やすく整える方法
Hタグは内容を正しく伝えることが第一ですが、視覚的なデザインも読みやすさに影響します。CSSを使って見出しのスタイルを調整することで、ユーザー体験を向上させることができます。
デザインの基本は、見出しの階層が視覚的にもわかるようにすることです。h1は最も大きく目立つように、h2、h3と段階的にサイズを小さくするのが一般的です。フォントサイズだけでなく、太さ、色、余白なども階層感を表現するのに役立ちます。
ブランドのトーンに合わせたデザインも重要です。企業サイトならフォーマルな印象に、個人ブログならカジュアルな雰囲気にするなど、サイト全体との統一感を意識してください。派手すぎるデザインは内容から注意をそらしてしまうため、適度な装飾にとどめることをおすすめします。
CSSで見出しスタイルを調整する基本
CSSを使った見出しのスタイリングは、HTMLとは別のファイルで管理するのが一般的です。セレクタとしてh1、h2、h3などのタグ名を指定し、プロパティでフォントサイズ、色、余白などを設定します。これにより、サイト全体の見出しデザインを一括で管理できます。
フォントサイズはpxやem、remなどの単位で指定します。レスポンシブデザインを考慮するなら、remを使うとブラウザのベースサイズに対応しやすくなります。行間（line-height）の調整も可読性に大きく影響するため、見出しには1.2から1.4程度の値を設定することが多いです。
下線や背景色を使った装飾も効果的です。h2タグの左側に太い縦線を入れたり、背景色をつけたりすることで、本文との区別がはっきりします。ただし、装飾が多すぎるとうるさい印象になるため、シンプルさを心がけてください。
スマートフォン表示を意識した見出しの工夫
現在ではスマートフォンからのアクセスがパソコンを上回ることも珍しくありません。見出しのデザインもモバイルファーストで考える必要があります。画面幅が狭いスマートフォンでは、長い見出しが何行にもわたってしまうことがあるため、注意が必要です。
メディアクエリを使って、画面サイズに応じてフォントサイズを調整することが一般的です。パソコンでは大きめのサイズ、スマートフォンでは小さめのサイズに設定することで、どちらのデバイスでも読みやすい見出しになります。
見出しの文字数自体を短く保つことも有効な対策です。スマートフォンの画面幅でも1行から2行に収まる程度の長さを目安にすると、どのデバイスでも見やすい見出しになります。内容を正確に伝えながら簡潔に表現する工夫を心がけてください。
よくあるHタグの間違いと対処法
Hタグの設定でよくある間違いを知っておくと、自分のサイトで同じ問題を起こさずに済みます。初心者だけでなく、経験者でも見落としがちなポイントがあるため、定期的に確認することが大切です。
最も多い間違いは、見た目のためだけにHタグを使うことです。文字を大きく太くしたいからといってh2タグを使うのは適切ではありません。見出しとしての意味を持たないテキストには、CSSで装飾したspanタグやdivタグを使うべきです。
逆に、見出しとして機能すべきテキストがpタグやdivタグのままになっているケースもあります。CSSで見た目を見出し風にしていても、HTMLの構造上は見出しとして認識されません。見た目と構造の両方を正しく設定することが重要です。
SEO調査によると、多くのWebサイトでh1タグの設定に問題があることがわかっています。h1タグが未設置のサイトが59.5%、複数のh1タグを使用しているサイトが51.3%という結果が報告されています。また、中小企業サイトの25%がh1タグを持っていないというデータもあります。
よくあるHタグの間違いと正しい対処法を整理すると以下のようになります。
- 装飾目的でのHタグ使用 → CSSクラスで代替する
- h1の複数使用 → 1ページ1つに統一する
- 階層の飛ばし → h1→h2→h3と順序通りに使用する
- 見出し後の本文なし → 必ず説明文を追加する
- キーワードの詰め込み → 自然な表現に修正する
h1タグの複数使用や未設置の問題
h1タグをページ内で複数使用していたり、まったく使用していなかったりするケースは意外と多く見られます。WordPressなどのCMSでは、テーマの設定によって意図しないh1タグが出力されることがあるため、実際のHTMLソースを確認することが重要です。
サイトロゴにh1タグが設定されていて、記事タイトルが別のh1になっているパターンは典型的な問題です。この場合、1ページにh1タグが2つ存在することになります。テーマのカスタマイズやプラグインで調整するか、テーマの変更を検討してください。
h1タグがまったくないページは、検索エンジンがページのテーマを把握しにくくなります。特にトップページでこの問題が起きやすいため、サイト全体をチェックする際は各種ページタイプを網羅的に確認してください。
見出し階層の飛びを修正する方法
h2の次にh4を使っているなど、見出しの階層が飛んでいる問題は、記事の構成を見直すことで解決できます。まず現在の見出し構造を紙やエディタに書き出し、階層関係を視覚化してください。
階層が飛んでいる箇所を見つけたら、h3を追加するか、h4をh3に変更するかを検討します。内容的にh3が必要ない場合は、見出しレベルを下げて調整します。デザインの問題はCSSで解決できるため、HTMLの構造を正しく保つことを優先してください。
大規模なサイトでは、この作業を手作業で行うのは現実的ではありません。Screaming FrogなどのクローラーツールでHタグ構造を一括抽出し、問題のあるページをリストアップする方法が効率的です。優先度の高いページから順に修正していくとよいでしょう。
よくある質問
まとめとして押さえておきたいポイント
Hタグは、Webページの構造を示す基本的なHTML要素です。h1からh6までの階層があり、正しく使い分けることで、ユーザーにも検索エンジンにもわかりやすいページを作ることができます。h1タグはページに1つ、見出しの階層は飛ばさない、という基本ルールを守ることが出発点です。
WebAIMの2024年調査では、見出しレベルの有用性について「非常に有用」が57.0%、「やや有用」が31.8%と、合計88.8%のスクリーンリーダーユーザーが見出しレベルを有用と評価しています。アクセシビリティの観点からも、正しいHタグの設定は欠かせません。
SEOの観点からは、適切なキーワードを自然な形で見出しに含めることが効果的です。ただし、キーワードの詰め込みは逆効果となるため、ユーザーにとって読みやすい表現を心がけてください。検索エンジンのアルゴリズムは年々進化しており、小手先のテクニックよりも本質的な品質が評価される傾向にあります。
定期的にHタグの設定状況を確認し、問題があれば修正するという地道な作業の積み重ねが、長期的なSEO成果につながります。26年以上のWeb制作経験を通じて実感しているのは、基本を徹底することの重要性です。Hタグの正しい使い方をマスターして、読者に価値を届けるコンテンツを作り上げてください。
Hタグ設定の基本チェックリストとして確認すべき項目は以下の通りです。
- h1タグは1ページに1つだけ使用しているか
- 見出しの階層（h1→h2→h3）を飛ばしていないか
- すべての見出しの直後に本文があるか
- キーワードを自然な形で見出しに含めているか
- CSSでの装飾とHTMLの構造を分離しているか
SEO Note! Team (SEO施策スタッフ)
SEOエンジニア、マーケター、ライター、編集担当からなる専門チームです。技術的なサイト最適化からコンテンツ戦略の立案、記事の執筆・編集まで、SEO施策を一気通貫で対応できる体制を整えています。10万パターン以上のキーワード対策と3万を超えるドメインの運用で培った実践的なノウハウをもとに、机上の理論だけでは得られない現場視点のSEO支援を提供しています。
関連記事
