【2026年】h1タグとは？titleとの違い・見出し階層と使い方

h1タグは、ページの主題を示す最上位の見出しです。SEOでは、読者や検索エンジンがページの内容と構造を理解する手掛かりになります。設定するときは、本文の主題に合うh1と、意味の通る見出し階層をそろえることが基本です。

titleは文書のタイトル、h1は本文の主見出し、h2は節の見出しという違いがあります。文字を大きくしたいという理由でh1を増やすと、見た目は整っても内容の主従関係が伝わりにくくなります。

この記事では、法人向けの研修案内を例に、見出しの文言、階層、個数、画像の代替テキスト、CSSによる装飾を整理します。編集担当と実装担当で何を確認すればよいかまで、修正例と点検表で説明します。

h1タグの意味とtitle・h2との違いを整理する

titleは文書の名前、h1は本文の主見出し

h1のhはheading、つまり見出しを表します。HTMLにはh1〜h6の見出し要素があり、h1が最上位、h6が最下位です。h1はページで何を扱うかを示し、h2以下は、その主題を節や小節へ分けて説明します。

たとえば研修全体を案内するページなら、h1を「法人向け研修のご案内」、h2を「申込方法」「研修内容」とすると、ページの目的と説明の区切りが分かります。h1だけでは細部を説明し切れないため、節の見出しで必要な情報へ案内する構造です。

一方、title要素は文書のタイトルを指定し、ブラウザーのタブなどで使われます。本文に表示するh1とは別の要素です。文言を完全に同じにすることよりも、title・h1・本文が同じ主題を伝えることを優先しましょう。

title・h1・h2の役割と記述例

検索結果のタイトルは自動で作られる

Googleの検索結果に表示されるタイトルリンクは、title要素だけで決まるものではありません。ページ上の主見出し、h1などの見出し要素、目立つテキストなど、複数の情報源から自動生成されます。そのため、h1を変更しても、その文言が検索結果へそのまま反映されるとは限りません。

たとえばtitleが「法人研修のご案内」で、h1が「法人向け研修のご案内」なら、表現は違っても主題はそろっています。しかし、申込方法しか説明していないページに「研修の選び方から効果測定まで」と付けると、読者が期待する回答と本文がずれます。検索表示を意識するときも、まず内容との一致を確認してください。

h1を整える目的は、主題と構造を明確にすることです。タグの変更だけで検索順位が上がると考えず、必要な疑問へ本文が答えているかと合わせて判断します。

ページの内容が伝わるh1を作る

本文から対象と回答を拾う

h1の文言を決める前に、本文を読み、「誰に」「何を伝えるページか」を短く書き出します。たとえば研修を受ける人へ申込方法を伝えるページなら、対象は受講者、回答は申込方法です。この場合は「研修の申込方法」が主題を伝える見出しになります。

「研修・法人・申込・書類」という単語の羅列では、研修の内容を紹介するのか、申込方法を説明するのかが曖昧です。「法人研修の申込方法」なら、対象となる研修と読者が得られる回答を一緒に伝えられます。「必要書類」は申込方法の一部として小節に置けば、主見出しへ情報を詰め込まずに済みます。

ここで大切なのは、本文で答えている範囲をh1で約束することです。研修の対象者、内容、申込方法をまとめて案内するページと、申込だけを案内するページでは、適切なh1が異なります。

ページの範囲に合わせたh1の選び方

同じ研修を扱っていても、全体案内へ来た読者は内容や対象者を知りたいと考え、申込専用ページへ来た読者は手続きを進めたいと考えます。h1は、その違いが分かる表現にします。本文が複数の主題へ広がっている場合は、言葉を追加する前に、同じページで答える必要がある内容かを整理しましょう。

文字数よりも内容の予測しやすさで判断する

キーワードは、本文の内容に合う自然な表現で使います。「SEO h1」という検索語を意識する記事でも、語を繰り返すことより、h1の意味や使い方が分かる見出しにすることが重要です。検索語をそのまま不自然な語順で並べる必要はありません。

h1の文字数やキーワード数を、固定の合格条件にすることも避けます。短くして対象が分からなくなっても、説明を足し過ぎて要点が埋もれても、見出しとして使いにくくなります。本文を読んでいない人にh1を見せ、どんな情報が載っていると思うかを確認すると、伝わり方を点検できます。

最終的には、対象、主題、読者が得られる回答を読み取れるかを確認します。本文にない「比較」「効果」「選び方」などを、目立たせるためだけに加えないようにしてください。

見出しを本文の論理に合わせて階層化する

主題・節・小節の関係でレベルを決める

見出しの数字は、文字サイズを指定するための番号ではなく、内容の階層を表します。研修案内を主題とすると、「申込方法」と「研修内容」は主題を分ける同格の節です。「必要書類」は申込方法に含まれるため、その下の小節に置きます。

修正前の例として、研修案内、申込方法、必要書類、研修内容をすべてh1にすると、主題と部分の区別が見出しレベルから伝わりません。同格の話題は同じレベル、含まれる話題は下のレベルにそろえると、文章の構造をたどりやすくなります。

修正前後の見出しツリー

修正前
h1 研修案内
h1 申込方法
h1 必要書類
h1 研修内容

修正後
h1 研修案内
  h2 申込方法
    h3 必要書類
  h2 研修内容

必要書類を研修内容の配下へ置くと、書類が何のために必要なのかを誤解しやすくなります。レベルだけでなく、どの節に含まれるかも本文の意味に合わせて決めましょう。目次や見出し一覧から見たときも、同じ関係が伝わることが確認の目安です。

短いHTMLで構造を確かめる

<h1>研修案内</h1>
<p>研修の対象者と概要を案内します。</p>
<h2>申込方法</h2>
<p>申込手続きについて説明します。</p>
<h3>必要書類</h3>
<p>申込時に提出する書類を案内します。</p>
<h2>研修内容</h2>
<p>研修で扱うテーマを紹介します。</p>

下位へ進むときと、節を終えるときを分ける

h1の直下で小さく表示したいからh3を使う、といった見出し飛びは避けます。主題から節へ進むならh2、その節を分けるならh3という関係にします。文字の大きさはCSSで変えられるため、表示サイズに合わせて階層を選ぶ必要はありません。

一方、「必要書類」のh3を終えて、次の「研修内容」のh2へ戻ることは自然です。下位の節を閉じて、同格の新しい節へ移るためです。見出しはh1からh6まで毎回順に使い切るものでもなく、細分化が不要ならh2までで構いません。本文をどこまで分けると読者が探しやすいかに合わせます。

複数のh1と画像の見出しを点検する

一般的なページでは主題を説明するh1をまとめる

通常の案内ページや記事では、ページの内容を説明するh1を1つに整理する方針が分かりやすいでしょう。研修案内が主題なら、申込方法はh2にし、ページ全体と一部分が同じレベルにならないようにします。

ただし、h1が複数あるという個数だけで、検索順位の罰則やHTMLの不適合を一律に判断することはできません。MDNでは、入れ子でない複数のh1はHTML標準で認められる一方、一般的には1ページに主題を示すh1を1つ置くことを推奨しています。また、入れ子のコンテンツ区分要素の中でh1を繰り返す古い方法は、現在は非適合と説明されています。

つまり、仕様への適合、使い方の推奨、検索表示の分かりやすさを分けて確認する必要があります。既存ページのh1が複数なら、数を減らすことだけを目的にせず、各見出しの役割と文書内の配置を確認してください。

画面上でも主見出しが分かる強弱を付ける

HTMLの階層が整っていても、「研修案内」と「申込方法」が同じ大きさや強さで並ぶと、画面上ではどちらが主題か判断しにくくなります。主見出しを最も目立つ位置と表現にし、節の見出しはそれに従う強さへ整えます。

Googleも、タイトルリンクを作成する際に主見出しや大きく目立つテキストを参照します。主題が明確かどうかは、タグの種類と画面の見え方の両方から点検することが大切です。

画像だけの見出しには主題を伝える代替文を用意する

画像の中に「研修案内」とだけ表示して主見出しにする場合は、その内容を伝えるalt属性を用意します。altは画像の代替テキストを指定する属性です。たとえば画像内の主見出しが「研修案内」なら、代替テキストも「研修案内」とすれば、同じ主題を伝えられます。

「研修案内の青い画像」のように外観だけを書くと、見出しとして必要な情報が埋もれます。逆に、画像にない宣伝文句や無関係な検索語を詰め込むと、表示内容との対応が崩れます。画像を使うこと自体を目的にせず、文章の見出しとして伝える内容を先に決めましょう。

仕様・主見出し・代替テキストの点検表

点検結果は「h1が多い」の一言で渡さず、「申込方法は研修案内の節なのでh2へ変更」「研修案内を画面上でも主見出しとして目立たせる」のように、役割と直す場所を具体的に伝えると修正しやすくなります。

HTMLの意味とCSSの見た目を分けて修正する

HTMLの構造を保ち、CSSで装飾を調整する

HTMLは、どの文章が主見出しで、どれが節や小節かという意味を表します。CSSは、文字サイズ、色、余白などの見た目を調整します。h1が大き過ぎる場合も、主題ならh1のまま表示を直します。小さく見せるためにh3へ変更すると、文書の意味まで変わってしまいます。

たとえば「研修案内」「申込方法」「必要書類」という内容と階層を維持し、文字サイズと色だけを変える場合は、見出しへ用途の分かるクラスを付けます。次の例は、HTML側のh1・h2・h3を変えずにスタイルを指定する書き方です。

<h1 class="training-title">研修案内</h1>
<h2 class="training-section">申込方法</h2>
<h3 class="training-subsection">必要書類</h3>

.training-title {
  font-size: 2rem;
  color: #24243a;
}
.training-section {
  font-size: 1.5rem;
  color: #245b8f;
}
.training-subsection {
  font-size: 1.25rem;
  color: #24243a;
}

これは装飾の記入例です。実際のサイズや配色はサイトのデザインと表示環境に合わせます。変更前後で見出しの文言・レベル・順序が同じかを照合すれば、装飾変更で構造を崩していないか確認できます。単に大きな文字にしたい通常文は、見出しへ変換する前に、節を始める役割があるかを考えてください。

CMSの入力欄と出力されるHTMLを照合する

CMSで入力したタイトルが、ページ上では自動的にh1として出力される場合があります。その状態で本文の先頭にも同じh1を追加すると、主見出しが重複します。本文だけでなく、共通ヘッダーやテンプレートが生成する要素も含めて確認しましょう。

編集画面で「大見出し」と表示されていても、実際に出力されるタグはサイトの実装によって異なります。画面上の呼び名だけでh1やh2と判断せず、実装担当に表示ページのHTMLと対応を確認してもらいます。特定のCMSの操作を推測して進めるより、入力欄と出力結果の対応を共有する方が修正対象を特定できます。

編集担当と実装担当の役割分担

共通テンプレートへ変更を入れる場合は、研修案内だけでなく、同じテンプレートを使うページにも影響します。文言の修正で済む問題なのか、出力するタグやスタイルの修正が必要なのかを分けて依頼してください。担当が分かれていても、修正対象のURL、期待する見出しツリー、変更前後の表示を同じ資料で共有すると、認識のずれを防ぎやすくなります。

修正後の文章構造と読み上げを確認する

見出し一覧から内容をたどれるか確かめる

修正後は、本文を読む前に見出しだけを一覧にして確認します。「研修案内」の下に「申込方法」と「研修内容」があり、「必要書類」が申込方法の配下にあるかを見ます。見出しの言葉だけで、どの情報がどの節に含まれるか説明できれば、構造を判断しやすくなります。

各見出しの直後にある本文も読み、予告した内容が実際に続いているか確かめてください。見出しだけを変更しても、本文が別の話題のままなら問題は残ります。必要書類の節に研修カリキュラムが続くような場合は、見出しの変更より、文章の移動や節の再整理が必要です。

PC・スマホ表示と読み上げを照合する

PCでは主見出しがほかの見出しと区別できるか、スマホでは折り返しによって意味を読み取りにくくなっていないかを確認します。h1を短くする前に、文字サイズや表示幅の調整で解決できるかも検討しましょう。画面幅が変わっても、主題と節の関係は保ちます。

スクリーンリーダーでは、見出しへ移動しながら、文言、レベル、読み進める順序を確認します。見た目の字下げだけでなく、見出しとして認識されているかが重要です。「研修案内」「申込方法」「必要書類」をたどり、その後に同格の「研修内容」へ移れるかを点検します。

優先度と完了条件で整理する公開前チェック

不具合が複数あるときは、主題の不一致と意味を損なう階層から修正すると、装飾のやり直しを減らせます。表示調整が終わったら、出力HTMLと読み上げを再確認し、見た目を直す途中で見出しレベルを変えていないか照合してください。

検索順位が変わったかどうかだけで、h1の設定が正しいとは判断できません。文書構造と実表示の確認結果を残し、修正したページと共通テンプレートの範囲を共有しておくと、次の更新でも同じ基準を使えます。

複数ページの改善は構造と本文を一緒に整理する

自社で対応するときは、まず代表的なページの見出しツリーと出力HTMLをそろえ、同じ問題があるページを確認します。ページごとに主題が違う場合はh1の文言を個別に考え、共通テンプレートに原因がある場合は実装の修正範囲を整理します。一括で同じ見出しへ置き換えるだけでは、各ページの内容を伝えられません。

編集と実装の両方に修正が及び、社内だけでは調査や改善を進めにくい場合は、対象URL、現在の見出し一覧、困っている箇所、期待する構造をまとめて相談すると、必要な工程を共有しやすくなります。具体的なページの改善については、SEO運用代行のお問い合わせからご相談いただけます。支援の範囲や検討用の資料は、次のサービス案内で確認できます。

トミラ　SEO運用代行コンサルティング