見出し（h1〜h6）は「文字を大きくするためのデザイン部品」として使ってしまいがちです。しかし本来は、ページ内容の章立て（階層構造）を検索エンジンと読者に伝えるための情報です。

「h1は1つだけって聞くけど、なぜ？」「h2の次にいきなりh4はダメ？」「順番とSEOって関係あるの？」という疑問を、よくある間違い→直し方の順で整理して解説します。

結論：最短で直すなら「見出しの階層チェック」を先にやる

見出しタグの悩みは、まず「h1はページの主題」「h2は大見出し」「h3はh2の中の小見出し」を守れているか確認すると、短時間で改善できます。

早く知りたい人はこちら（チェックリスト）

• ページ内容を説明するh1が1つある（※原則）
• h2の配下にh3、h3の配下にh4…のように順番が飛んでいない
• 見出しの中身が「その下の内容を要約」できている
• 見出しを文字サイズ調整に使っていない（装飾はCSSで）
• 同じレベルの見出しが同じ粒度（同じ種類の話題）になっている

注意：見出し最適化は万能な「順位が上がる魔法」ではありません。ただし、構造が崩れていると内容が伝わりにくくなり、結果として評価・回遊・読みやすさに悪影響が出やすいです。

見出しタグ（h1〜h6）の役割：SEOというより「構造を伝える」ため

h1〜h6は、セクションの見出しレベルを表します。h1が最上位で、数字が大きくなるほど下位の見出しです（h2→h3→h4…）。これはHTMLの基本仕様として定義されています。

また見出しは、ユーザーエージェントが目次のような構造を作るために使える、とされています。さらに「見出しレベルを飛ばさない」ことが重要だとも明記されています（アクセシビリティの観点でも重要）。

参考： MDN: Heading elements / W3C WAI: Headings

SEO効果が出やすい理由（検索エンジン目線の「理解しやすさ」）

見出しを正しく組むと、ページの「何が主題で、何が補足なのか」が機械的にも理解しやすくなります。結果として次のようなメリットが期待できます。

• ページの主題と各セクションの要点が整理される
• ユーザーが読み飛ばししやすくなり、必要箇所に到達しやすい
• 見出しと本文の対応が良いと、内容の網羅性・一貫性が上がりやすい

アクセシビリティ面でも「見出しの順番」は重要

スクリーンリーダー利用者は、見出しジャンプでページを把握することがあります。見出しレベルが飛ぶと、利用者が「h2の次にh4？h3はどこ？」と迷いやすくなります。W3Cのガイドでも、見出しランクのスキップは避けるべき、とされています。

なぜ「h1は1つだけ」と言われるの？（結論：迷いを減らすため）

結論から言うと、HTMLの仕様上は複数のh1が必ずしも禁止されているわけではありません。一方で、実務では「1ページにh1は1つ」を基本にすると、次の理由で破綻しにくいです。

理由1：ページの主題がブレにくい

h1は「このページは何のページか」を表す看板です。h1が複数あると、主題が複数あるように見え、構造設計があいまいになりがちです。

理由2：テンプレ・CMSでも管理しやすい

ブログやCMSだと、記事タイトルが自動でh1になる設計が多いです。そこに別のh1を足すと、意図せずh1が増え、運用で崩れます。

理由3：アクセシビリティと共同作業での事故が減る

チーム制作では「h1は記事タイトル」「h2は章」という共通ルールがあると、誰が触っても一定の品質を保ちやすいです。

おすすめ運用：基本は「h1＝記事タイトルの1回」。例外を作らずに運用すると、初心者ほどミスが激減します。

h2の次にいきなりh4を使うとダメな理由（結論：構造が壊れる）

h2→h4のように見出しレベルを飛ばすと、「h3に相当する中間の話題が存在しないのに、いきなり孫見出しが出てくる」状態になります。

これはSEO以前に、読者の理解とアクセシビリティの両方で不利です。W3C WAIでも、見出しランクを飛ばすのは混乱の元なので避けるべき、とされています。

原因→対処表（よくある詰まりポイント）

よくある間違い例 → 正しい実装例（HTML/CSS最小コード）

ここからは、初心者がやりがちな「見た目でhタグを選ぶ」問題を、最小のコードで直します。

間違い例：文字を小さくしたくてh4を使う（h2→h4）

<h1>見出しタグの使い方</h1>
<h2>基本ルール</h2>
<h4>h1は1つだけ？</h4>
<p>…</p>

見た目の意図は分かりますが、構造としては「基本ルール（h2）」の直下はh3が自然です。

改善例：見出しはh3、見た目はCSSで調整する

<h1>見出しタグの使い方</h1>
<h2>基本ルール</h2>
<h3>h1は1つだけと言われる理由</h3>
<p>…</p>

/* 見た目を小さくしたいだけならCSSでOK */
h3{
  font-size: 1.05rem;
  margin-top: 1.2em;
}

間違い例：見出しが「デザイン用の部品」になっている

例えば、カードUIのタイトルを全部h2にすると、ページ内の見出しが無駄に増えて構造が崩れます。

<div class="card">
  <h2>サービスA</h2>
  <p>説明…</p>
</div>

改善例：ページ構造の見出しと、部品の見出しを分ける

カードは「部品」なので、状況によってはpやspanでも十分です（見出しが必要なら階層に合わせてh3/h4を検討）。

<h2>サービス一覧</h2>
<div class="card">
  <p class="card__title">サービスA</p>
  <p>説明…</p>
</div>

注意：「必ずpにするべき」という意味ではありません。重要なのは、ページ全体の章立て（h1→h2→h3…）が破綻しないことです。

実務で迷わない「見出し設計」3ステップ

見出しがぐちゃぐちゃになる原因は、先にHTMLを書き始めてしまうことが多いです。短い手順で整理しましょう。

ステップ1：ページの主題（h1）を1文で言い切る

h1は「このページは何か」を表します。記事なら基本的に記事タイトルがh1でOKです。

ステップ2：大見出し（h2）を章として並べる

h2は「目次の章」です。読者が流し読みしても全体像が掴める粒度にします。

ステップ3：必要な章だけh3で分解する（分解しすぎない）

h3はh2の中の小見出しです。h3が1つしかないなら、h2の文章として吸収した方が読みやすい場合もあります。

よくある質問

h1は本当に1つじゃないとSEOで不利ですか？

「h1が複数＝即NG」とまでは言い切れませんが、初心者が複数h1を使うケースは、主題が分散して構造が崩れていることが多いです。まずはh1を1つにして構造を整えるのが安全です。

h2の次にh4は絶対ダメですか？

原則おすすめしません。W3Cのアクセシビリティガイドでも、見出しランクのスキップは混乱を招くため避けるべきとされています。見た目調整ならCSSで対応しましょう。

見出しの中にキーワードを必ず入れるべきですか？

無理に詰め込む必要はありません。見出しは「その下の内容の要約」です。結果として自然にキーワードが入るのは良いですが、羅列や不自然な日本語は避けましょう。

ヘッダーのロゴはh1にした方がいいですか？

サイトトップでは「サイト名がh1」でも成立しやすいですが、記事ページでは「記事タイトルがh1」の設計が分かりやすいことが多いです。テンプレ構造によるので、まずは「1ページに主題が1つ」になるように調整してください。

見出しのデザインを変えるのはhタグを変えるべき？CSSで変えるべき？

基本はCSSです。MDNでも「見出し要素を文字サイズ変更のために使わない」旨が示されています。構造（h2/h3）と見た目（font-size等）を分離すると、SEO/保守/アクセシビリティすべてが安定します。

まとめ

見出しタグの正しい使い方は、SEO小技というよりページの論理構造を作る基礎です。迷ったら次を優先してください。

• h1はページの主題（基本1つ）
• h2→h3→h4…と階層を飛ばさない
• 見た目はCSS、構造はHTMLで分ける

次のアクションとして、今のページのHTMLを開いて「見出しだけ」を抜き出し、目次として読めるか確認してみてください。読めない場合は、見出し設計を直すと一気に改善します。

関連トピック案：section/articleの使い分け、titleタグとh1の違い、アクセシビリティの基本（ARIAと見出し）もあわせて学ぶと、マークアップが安定します。