見出しをどう付けるか迷った経験は、記事を書く人にもサイトを組む人にもあるはずです。HTMLのhタグはh1からh6まで6段階あり、書き方そのものは1行で終わります。ところが実際のサイトを見ていくと、階層が途中で飛んでいる記事、見た目を整えるためだけに使われたh4、CMSの設定と出力されるHTMLがずれているページが、驚くほど頻繁に見つかります。
hタグは装飾ではなく、ページの構造を機械にも人にも伝えるための要素です。ここを取り違えると、目次が意味をなさなくなり、検索エンジンはページの主題を読み違え、スクリーンリーダーの利用者はページ内を移動できなくなります。裏を返せば、原則を数個押さえるだけで、記事の読みやすさと構造の正しさは同時に手に入るということ。
本記事では、数多くのSEO記事を制作してきた立場から、hタグの基本、h1〜h6の使い分け、SEOへの影響の正しい捉え方、そして実務でつまずきやすい箇所までを順に整理します。
- hタグ（h1〜h6）が何を表す要素で、文字の大きさとは何が違うのか
- h1は1ページ1つという原則の根拠と、階層を飛ばしてはいけない理由
- hタグがSEOに効く仕組みと、順位に直結しない部分の切り分け
- 見出しだけで内容が追える構成にするための設計手順
- CMSの見出し設定とHTMLの出力がずれるという、公開後に気づきにくい問題
まずは、多くの人が疑問に思う「h4より下は何のためにあるのか」というところから見ていきます。
経営者記事の見出しは、h2とh3を交互に使えばいいと思っていました。h4やh5まで用意されているのは、何のためなのでしょうか。
Writers-hub編集部
h4以下は、階層がそこまで深くなる文書のために用意されたものです。仕様として6段階あるだけで、記事コンテンツでh4が必要になる場面はほとんどありません。むしろh4が出てきたときは、その前のh2の切り方が粗すぎないかを疑ったほうが早く直せます。
HTMLのhタグ（見出しタグ）とは
hタグは、文書の見出しを表すHTMLの要素です。h1からh6まで6段階あり、h1が最上位、h6が最下位という序列を持ちます。headingの頭文字を取ってhタグ、日本語では見出しタグと呼ばれます。
書き方は、開始タグと終了タグで見出し文を挟むだけ。
<h1>HTMLのhタグとは</h1>
<p>本文が入ります。</p>
<h2>h1からh6の使い分け</h2>
<p>本文が入ります。</p>
<h3>h1は1ページに1つ</h3>
<p>本文が入ります。</p>6段階それぞれの位置づけを整理すると、次のようになります。
タグ | 位置づけ | 記事での使いどころ |
|---|---|---|
h1 | 最上位の見出し | ページ全体の主題。原則1ページに1つ |
h2 | 大見出し | 記事を構成する章 |
h3 | 中見出し | h2の内容を分けた項目 |
h4 | 小見出し | h3をさらに分ける必要が出た場合 |
h5・h6 | 最下層 | 仕様書や技術文書など、階層の深い文書 |
ブラウザで表示すると、h1が大きく、h6に向かって小さくなります。ただしhタグは文字の大きさを指定する要素ではありません。大きさはブラウザの初期スタイルがそう見せているだけで、本来の役割は「ここからこの見出しの内容が始まる」という区切りの宣言にあります。
見出しの序列を読み取るのは、人間の読者だけではありません。検索エンジンのクローラーはhタグからページの主題と構成を推測し、スクリーンリーダーは見出しを一覧にしてページ内の移動に使います。目次を自動生成するCMSやプラグインが参照しているのも、やはりhタグ。正しく組んでおけば、ページを読み取る機械の側にも同じ目次が渡ります。
※ hタグの仕様上の定義と使用上の注意は、MDN Web Docsの見出し要素のページにまとまっています。
関連記事：SEO記事の書き方完全ガイド｜上位表示を実現する18のテクニックと対策
h1〜h6の使い分けと階層のルール
hタグでつまずくのは、たいてい書き方ではなく順序のほうです。押さえるべき原則は、3つに絞れます。
h1は1ページに1つに絞る
h1は、そのページ全体が何のページなのかを示す見出しです。HTMLの仕様上、複数のh1を置くこと自体が禁じられているわけではありません。ただしMDNは、1つのページに複数のh1要素を使用しないことを明確に推奨しています。理由は単純で、最上位が2つあるとページの主題が一意に決まらなくなるためです。
なお、section要素を入れ子にすればh1を何度使っても階層が自動的に決まる、という解説を見かけることがあります。この考え方のもとになった文書アウトラインの仕組みは、結局どのブラウザにも支援技術にも実装されませんでした。見出しのレベルは自分で正しく指定する前提で組むほうが安全でしょう。
階層は1段ずつ下げる
h2の次にh4を置くように、レベルを飛ばす書き方は避けます。表示上は問題なく見えても、見出しだけを拾って構造を組み立てる機械の側では、h3が欠けた不完全な階層として扱われるためです。スクリーンリーダーの見出しジャンプも、この階層を頼りに移動先を決めています。
戻るときは飛ばして構いません。h3の次にh2が来るのは、章が終わって次の章に移ったという自然な流れになります。
※ 見出しレベルを論理的に使うことと、支援技術が見出しをページ内の移動に使うことは、MDN Web Docsの解説でも触れられています。
分けるなら2つ以上に分ける
h2の下にh3が1つだけ、という構成もよく見かけます。1つしかないなら、それは分割になっていません。h3を立てるのは、そのh2の内容が2つ以上の項目に分かれるときだけ。1つにしかならないのであれば、h3を消して本文に統合するか、h2の切り口そのものを見直したほうが、読み手がたどる階層は浅くなります。
- h1が2つ以上あり、ページの主題が特定できない
- h2の直後にh4が来て、間のh3が抜けている
- h2の下にh3が1つだけぶら下がっている
- 見出しがないまま本文が数千文字続く
関連記事：h1タグを使わないとどうなる？SEOへの影響と直すべきケースの見分け方
hタグはSEOにどう影響するのか
「hタグにキーワードを入れると順位が上がる」という説明は、半分は正しく、半分は誤りです。hタグ単体で順位が動くわけではありません。効いているのは、見出しが検索エンジンにページの主題と構造を伝えているという部分にあります。
検索エンジンは本文を読んだうえで、どの部分が何について書かれているかを判断しています。見出しは、その判断の手がかりの1つ。関連する語が自然に入っている見出しは手がかりとして働きますが、同じ語を全見出しに詰め込んだところで手がかりが増えるわけではなく、むしろ何について書かれた章なのかがぼやけ、読者の離脱を招きます。
見出しにキーワードを「入れる」と考えると、詰め込みに向かいます。そうではなく、その見出しが答える検索意図を素直に書くと、結果として必要な語は自然に含まれます。順序が逆になっていないかを確認してみてください。
h1については、もう1つ実務的な論点があります。検索結果に表示される見出し（タイトルリンク）は、基本的にtitle要素をもとに生成されますが、Googleはページ内の主要な見出しなど、title以外の情報を使って書き換える場合があると説明しています。h1とtitleの内容が大きく食い違っているページでは、意図しない文言が検索結果に出ることもあり得るでしょう。
※ タイトルリンクの生成元については、Google検索セントラルのドキュメントに記載があります。
一方で、hタグを整えれば順位が上がるという話でもありません。見出しの設計は、内容そのものの品質を前提にした上乗せ分。中身の薄い記事の見出しをいくら整えたところで、評価は動かないと考えたほうが現実的です。
検索で読まれる見出しの設計手順
ここまではHTMLとしての正しさの話でした。ここからは、読まれる記事にするための見出しの決め方に移ります。制作の現場では、見出しは執筆前に確定させ、書きながら足さないというのが原則になっています。書いてから見出しを直すと本文の論理まで組み直すことになり、修正の範囲が広がってしまうためです。
狙うキーワードで検索する人が何を知りたいのかを、疑問の単位まで割ります。「html hタグ」であれば、書き方を知りたいのか、SEOへの影響を知りたいのか、順番のルールを確認したいのか。この単位が、そのままh2の候補になります。
分解した疑問を、読者が読む順に並べます。前提を知らない人でも上から読めば理解が積み上がる順序かどうかが基準。ここで並べ替えるコストは、執筆後に並べ替えるコストの数分の1で済みます。
h2の内容が2つ以上の項目に分かれるものだけ、h3を立てます。1つにしかならないh2は、h3を作らず本文で書き切ります。
h2とh3だけを並べ、それだけを読んで記事の内容が追えるかを確認します。読者は目次を見て読むかどうかを判断するため、この状態で意味が通らない構成は、本文が良くても読まれません。
確定した見出しを変えるのは、書いている途中で明らかな抜けが見つかった場合だけ。書き手が複数いる体制では、この固定がそのまま品質の下限になります。
見出しだけを抜き出して読む工程は、単純なわりに拾える問題が多いところです。体言止めばかりで内容が読み取れない、隣り合う見出しが同じことを言っている、順序が入れ替わっている。こうしたずれは、本文と一緒に読んでいると気づけません。
関連記事：SEOに強い記事構成の作り方7ステップ！上位表示のコツとテンプレート
制作現場で差し戻しになる見出しの典型例
外部のライターから上がってきた原稿を確認していると、指摘する箇所はある程度決まってきます。頻度の高いものから挙げます。
よくある状態 | なぜ問題か | 直し方 |
|---|---|---|
文字を大きく見せたくてh3を使った | 構造に無関係な見出しが目次に混ざる | CSSで文字サイズを指定する |
見出しに見えるがpタグで組まれている | 目次にも構造にも反映されない | 見出しとして扱うならhタグに直す |
見出しがすべて体言止めで内容が読めない | 目次を見た読者が中身を判断できない | 何が書かれているかがわかる文にする |
全部の見出しに同じキーワードが入っている | 見出しごとの違いが消える | その見出しが答える疑問を書く |
見出しの直後に次の見出しが来る | 章の入り口の説明がなく唐突になる | 数行でも導入の本文を置く |
装飾目的のhタグは、公開した直後には問題が見えません。ところが目次を自動生成する仕組みを入れた瞬間、本文中の強調がすべて目次に並ぶという形で表面化します。あとから直そうとすると、対象は公開済みの全記事に及びます。
見出しを空にする、あるいは画像だけを入れて文字を持たせないという状態は避けてください。hタグの中身が空だと、構造だけが宣言されて内容が伝わりません。デザイン上どうしても画像を使う場合は、alt属性に見出しの文言を入れます。
見出しの階層が毎回崩れて、確認と差し戻しに時間がかかっていませんか
見出しの設計は、書き手のセンスではなく手順で揃えられる領域です。合同会社Writers-hubでは、検索意図の分解から見出しの確定までを制作工程に組み込み、構成の段階でレビューを通してから執筆に入っています。
見た目とCMSに関する落とし穴
hタグは、HTMLを直接書く場面よりも、CMS上で記事を作る場面のほうがつまずきやすい要素でもあります。代表的な2つを取り上げます。
デザインはCSSで作り、hタグは構造のためだけに使う
「h2の見た目が好みではないからh3にする」という判断は、構造をデザインの都合に合わせることになります。見た目は、次のようにCSSで指定します。
h2 {
font-size: 1.5rem;
border-left: 4px solid #1f3a5f;
padding-left: 12px;
}見出しの装飾を変えたいという要望が出たときは、hタグの選択ではなくCSSで解決できないかを先に確認してください。デザインと構造を切り離しておくと、あとからテンプレートを差し替えるときにも本文へ手を入れずに済みます。
CMSの「見出し2」がHTMLのh2とは限らない
CMSのエディタで選ぶ見出しレベルと、実際に出力されるHTMLのhタグは、テーマやテンプレートの実装によってずれることがあります。サイト名やロゴがh1として組まれているテーマでは、記事本文でh1相当を選んだ瞬間、1ページにh1が2つ並ぶ結果になります。公開後に気づきにくい部類の問題でしょう。
確認の手順は難しくありません。公開ページをブラウザで開き、検証ツールかソース表示でh1がいくつあるかを見るだけ。記事を量産する前に、テンプレート1つ分だけ確認しておけば済みます。
hタグについてよくある質問
hタグまわりで質問を受けることの多い項目を、まとめて整理します。
仕様として禁じられているわけではなく、複数あってもページが壊れることはありません。ただしMDNは1ページに複数のh1を置かないことを推奨しており、ページの主題を一意に伝えるうえでも、1つに絞るほうが確実です。
必要が出たときだけ使えば十分です。記事コンテンツでh4以降まで求められる場面は多くありません。h4が増えているときは、その上のh2やh3の切り方が粗い可能性を先に疑ってください。
HTMLの仕様上の制限はありません。目安としては、目次に並んだときに一目で内容が判断できる長さに収めます。長すぎる見出しは、1つの見出しに複数の話題を詰め込んでいるサインでもあります。
表示の調整として改行を入れること自体は可能です。ただし意味が変わるわけではないため、改行が必要なほど長い見出しになっていないかを先に見直すほうが建設的でしょう。
可能ですが、その場合はalt属性に見出しの文言を必ず入れてください。alt属性がないと、機械の側からは中身のない見出しとして扱われます。
まとめ
hタグは、ページの主題と構造を人にも機械にも伝えるための要素です。順位を直接動かす要素ではないものの、構造が崩れていれば内容の伝わり方まで損なわれます。公開前に確認したい項目を、最後に並べます。
- h1がページに1つだけになっている
- h2からh3へ、階層を飛ばさずに1段ずつ下がっている
- h3は2つ以上あり、h2の内容を分けたものになっている
- 見出しだけを読んで記事の内容が追える
- 文字を大きく見せる目的でhタグを使っていない
- CMSの見出し設定と、出力されるHTMLのhタグが一致している
見出しの設計は、書き出しよりも前に終わらせておく工程です。ここが決まっていれば、執筆は決まった枠を埋める作業に近づき、書き手が複数いても構成のばらつきは小さくなります。逆にここを飛ばすと、原稿が上がってから構成の議論が始まり、修正の範囲が本文全体に広がってしまいます。
合同会社Writers-hubでは、検索意図の分解から見出しの確定、執筆、公開までを一つの工程として設計しています。自社で書ける体制を作りたい場合は、見出し設計のルールづくりから支援することも可能です。
関連記事：hタグとは？h1〜h6の役割とSEOで評価される見出しの付け方
見出し設計のルールを社内に定着させたいなら
書き手が代わるたびに構成の質が変わるなら、必要なのは書き手の教育よりも、判断の基準を文書にしておくことです。Writers-hubの内製化支援では、見出しの設計手順を含めた制作ルールの整備と、運用が回るまでの伴走を行っています。
