hタグとは？h1・h2・h3の違いと使い分けをわかりやすく解説

h1・h2・h3の違いは、文字の大きさではなく「見出しの階層」です。結論から言うと、h1はページ全体の主題（タイトル）、h2はその中の章、h3は章の中の小見出しに使います。番号が小さいほど上位の見出しで、h1から順に入れ子にしていけば、使い分けはこれで足ります。

hタグ（見出しタグ）とは、HTMLで見出しを表すh1〜h6の6種類の要素のことです。ページの内容がどのような構造になっているかを、読者と検索エンジンの両方に伝えます。

今回は、h1〜h6の違いと使い分け、SEO効果、Googleが説明している見出しのルール、HTMLとCSSでのデザイン例までを解説します。「h1は1ページに1つだけでなければならない」「見出しは多いほど良い」といった古い言い伝えも、Googleの現在の説明に沿って整理しました。あわせて、当社がSEOラボの記事247本の見出しを集計した結果も載せています。

hタグ（見出しタグ）とは？h1〜h6の違い

「h」はheading（見出し）の頭文字で、後ろの数字は見出しのレベルを表します。h1が最上位、h6が最下位です。ブラウザは何も指定しなければh1をいちばん大きく、h6をいちばん小さく表示しますが、これはブラウザの初期スタイルにすぎません。CSSを書けば、h3をh1より大きく見せることもできます。それでもGoogleやスクリーンリーダーが読み取るのは、見た目ではなくタグの番号です。

本の目次に当てはめると使い分けが決まる

迷ったときは、ページを1冊の本に見立てます。書名がh1、各章の題がh2、章の中の節の題がh3です。書名は1冊に1つ、章はいくつもあり、節は章の中に収まります。この記事なら、「hタグのSEO効果」が章（h2）、その中の「アクセシビリティにも効く」が節（h3）です。

この関係から外れる使い方が、よくある間違いのもとになります。

• 大きく表示したいという理由で、章の見出しにh2ではなくh1を使う
• 見た目を小さくしたいという理由で、章の見出しをh2からh4に変える
• 見出しの役割を持つ文を、hタグではなく太字のpタグやdivタグで作る

いずれも、見た目は整っていても構造が伝わりません。MDN（Mozillaの開発者向けリファレンス）も、「テキストの大きさを変えるために見出し要素を使用しないでください。代わりに CSS の font-size プロパティを使用してください。」と説明しています（<h1>–<h6>: HTML セクション見出し要素 – MDN）。見出しの番号は構造を示すためのもので、見た目の調整には使いません。この1点を守るだけで、h1〜h6の選び方で迷う場面はほとんどなくなります。

SEOラボでの使い分けの実例

当社のSEOラボでは、記事タイトルをh1、章をh2、章の中の小見出しをh3にしています。この記事をHTMLで書くと、次のような形です。

記事の冒頭にある目次は、このh2とh3から自動で作られています。見出しの階層が正しければ、目次もそのまま正しい構造になります。

なお、h1に何を入れるかはページの種類で変わります。ブログや記事ページでは記事タイトルがh1です。一方、サイトのトップページではサイト名やサイトの説明がh1になるのが一般的です。「そのページがいちばん伝えたいこと」がh1、と考えると判断しやすいです。

SEOラボの記事247本の見出しを集計した結果

2026年10月12日に、SEOラボで公開中の記事247本の本文に含まれる見出しを当社で集計しました。結果は次のとおりです。

• 本文の中にh1を書いている記事は0本。SEOラボでは本文にh1を書かず、記事タイトルがh1になる作りにしています。公開ページのh1は記事タイトルの1つだけです
• 1記事あたりの見出しの数は、h2が6個、h3が10個（いずれも中央値。記事を見出しの数の順に並べたときに真ん中に来る記事の値）
• 見出しのレベルを飛ばしている記事（h2の次にいきなりh4があるなど）が13本
• 本文の最初の見出しがh3以下になっている記事が8本

記事が増えると、1本ずつ気を付けていても抜けは出ます。見出しの階層は、書くときだけでなく、サイト全体をまとめて見直す対象でもある、というのがこの集計から得た教訓です。h2が6個、h3が10個という数は結果にすぎず、目標ではありません。見出しの数の決め方は後の章で説明します。

hタグのSEO効果

結論から言うと、hタグを付けただけで検索順位が上がるわけではありません。hタグがGoogleに対してしていることは、次の2つです。

• ページがどの話題をどの順番で扱っているかを、構造として伝える
• 検索結果に表示されるタイトル（タイトルリンク）の情報源の1つになる

1つ目について、Googleは検索エンジン最適化（SEO）スターター ガイドで、読みやすく整理された文章の条件として「長い文章は段落や章などに分け、全体を見通せるように見出しを付けてください。」と説明しています。見出しの目的は、読者が全体を見通せるようにすることです。順位を上げるために使うものではありません。

2つ目のタイトルリンクについては、Google 検索結果のタイトルリンクの変更で、情報源として「<title> 要素（タイトル テキストとも言います）やページ内の見出しに使われている言葉など」を挙げ、おすすめの方法として「タイトルのテキストをページで最初に目立つ <h1> 要素に配置する」ことを示しています。titleタグとh1の内容がかけ離れていると、Googleが検索結果のタイトルを書き換える原因になります。

記事を見直すときは、順位を見る前に、titleタグと記事タイトル（h1）が同じ内容を指しているかを確かめておくと安心です。titleタグの付け方は「SEOに強いtitleタグの付け方」で解説しています。

見出しにキーワードを詰め込む方法は、おすすめしません。見出しは、その下に続く内容を表す言葉にします。ページの主題となるキーワードがh1に自然に入り、各章の内容を表す言葉がh2に入る、という状態が目指す形です。キーワードの決め方は「SEOキーワード選定のやり方」、見出しから本文を書く手順は「SEOライティングとは」をご覧ください。

アクセシビリティにも効く

見出しの階層が正しいページは、スクリーンリーダー（画面の文字を音声で読み上げるソフト）を使う人にとっても使いやすいページです。MDNは、「スクリーンリーダーの利用者にとって一般的なナビゲーション技法として、ページのコンテンツを判断するために、すばやく見出しから見出しへジャンプすることがあります。このため、見出しレベルを飛ばさないようにすることが重要です。」と説明しています（<h1>–<h6>: HTML セクション見出し要素 – MDN）。

スクリーンリーダーは、ページ内の見出しを一覧にして読み上げることもできます。目次と同じ役割です。見出しを正しく使うことは、SEOとアクセシビリティの両方に同じ形で効きます。別々の対策をする必要はありません。

hタグの使い方（h1〜h6の使い分けルール）

hタグの使い方で押さえるのは、次の7点です。上の3つが階層に関するルール、残りはマークアップの実務です。

h1はページの主題を表す見出しを1つ置く

h1には、そのページ全体の主題を書きます。記事ページなら記事タイトルです。WordPressなど多くのCMSでは、テーマが記事タイトルをh1として出力するので、本文の中にh1を書く必要はありません。SEOラボもこの作りです。

一方、「h1は1ページに1つだけでなければならない」というルールはありません。Googleのスターターガイドにも、見出しの数に決まりはないと書かれています（次の項で引用します）。h1が2つあること自体を理由に、評価が下がるとは説明されていません。

それでも当社が1つをおすすめするのは、実用上の理由があるからです。Googleはタイトルリンクの説明で、「ページの大見出しが複数あり、ページのどのテキストがメインのタイトルであるかが明確でない場合」に、検索結果のタイトルがページの意図と違うものになる問題が起きると述べています（Google 検索結果のタイトルリンクの変更）。MDNも、複数のh1は「HTML 標準では認められていますが（入れ子でない限り）、これはよい習慣とはみなされません。」としています。h1は複数でも問題はありませんが、1つにしておくと迷いが生じません。

見出しのレベルを飛ばさず、順番に使う

h1の次はh2、h2の中の小見出しはh3、と1段ずつ下げます。h2の直下にh4を置く、h1の次にいきなりh3を置く、といった飛ばし方はしません。

ここで押さえておきたいのは、これが順位のためのルールではないことです。Googleはスターターガイドの「見出しの数や順序」の項で、「見出しを意味的な順番にすることは、スクリーン リーダーにとっては素晴らしいことですが、Google 検索にとっては順番どおりに使われていなくても問題ありません。」と説明しています（検索エンジン最適化（SEO）スターター ガイド）。

つまり、順番が崩れていてもGoogleは内容を理解できます。それでも順番に使うのは、読者、とくにスクリーンリーダーで見出しを移動する人のためです。飛ばしは、下位の見出しを見た目の都合で選んだときに起きやすく、本文を読んでいるだけでは気づきにくいものです。書き終えたら見出しだけを抜き出して番号を確かめる習慣にしておくと防げます。

見出しの数は内容の区切りに合わせる

「1ページにh2は3つまで」「h3は各h2に2つ以上」のような決まりはありません。Googleは同じ項で、「ページごとに魔法の見出し数や理想的な見出し数といったものが存在することもありません。」と述べています。

では何で決めるかというと、書く前に見出しだけを先に並べてみるのが近道です。読者の疑問を順に書き出し、疑問が変わるところにh2を、1つの疑問の中で手順や観点が分かれるところにh3を置きます。参考までに、SEOラボの記事では、h2が6個前後、h3が10個前後でした（中央値）。

見出しの文言は、その下に続く内容を一言で表すものにします。目次を読んだだけで記事の流れが分かる状態が目標です。見出しの直下に本文がなく、見出しだけが連続する形は避けます。

hタグには画像ではなくテキストを使う

見出しに画像を使うこともできますが、おすすめしません。画像の文字は、検索エンジンもスクリーンリーダーも直接は読めません。alt属性で代替テキストを付ける必要があり、画像を差し替えるたびにaltも直すことになります。

Googleは画像の SEO ベスト プラクティスで、代替テキストは「スクリーン リーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を見ることができないユーザー向けの補助機能としても役立ちます。」としつつ、「alt 属性にキーワードを羅列すること（キーワードの乱用とも呼ばれます）は避けてください。」と注意しています。見出しはテキストで書き、装飾はCSSで付けるのが基本です。デザインの方法は後半のサンプルで紹介します。

hタグの入れ子（中に入れられる要素）

hタグの中には、span・a・img・strong・emなど、文章の一部として扱われる要素（HTML5のフレージングコンテンツ、HTML4でのインライン要素）を入れられます。逆に、p・div・ul・tableなどの段落やブロックを作る要素は、hタグの中に入れません。

見出しの番号や装飾用のアイコンを付けたいときは、spanを入れるか、CSSの::beforeで付けます。見出しの中身は「見出しの文言」だけにしておくと、目次の自動生成やスクリーンリーダーの読み上げも乱れません。

hタグの改行

見出しの途中で改行したいときは、brタグを使います。

デザイン例

brタグを入れた位置で折り返されます。ただし、改行したくなるほど長い見出しは、まず短くできないかを考えます。見出しは一目で内容が分かる長さが基本です。スマートフォンでは画面幅で自動的に折り返されるので、brで固定した改行位置が不自然に見えることもあります。

hタグのリンク指定

見出しにリンクを付けるときは、hタグの中にaタグを入れます。記事一覧ページで各記事のタイトルを見出しにし、記事へのリンクを付ける場合などに使います。

リンクの文言（アンカーテキスト）は、リンク先の内容が分かるものにします。見出しがそのまま記事タイトルなら、この条件は自然に満たせます。

目次からのページ内リンクのように、見出しをリンクの「移動先」にする場合は、hタグにid属性を付け、リンク元で「#」を付けて指定します。

目次のように見出しへのページ内リンクを並べても、検索順位に悪い影響はありません。読者が読みたい場所に移動できるので、長い記事では目次を付けることをおすすめします。

HTMLとCSSでhタグをデザインする（サンプル例）

見出しの見た目は、CSSで整えます。デザインで押さえるのは1点だけです。h1がいちばん目立ち、h2、h3と下がるにつれて控えめになるようにします。タグの序列と見た目の序列がそろっていれば、読者は見出しを見ただけで構造をつかめます。

※このサンプルでは、Webアイコンフォントを表示するため「Font Awesome」のCSSを別途HTMLファイルのheadタグ内で読み込んでいます。

汎用的なhタグをデザインする

サイト全体で共通して使うh1・h2・h3のデザイン例です。

HTML記述例

CSS記述例

デザイン例

h1は左の太い線、h2は下の太い線、h3は下の細い線とアイコン、と装飾の強さを順に弱めています。h3のアイコンは::beforeで付けているので、HTMLの見出しの中身は文言だけです。

色やフォントサイズを調整する

見出しの色は「color」プロパティ、文字の大きさは「font-size」プロパティで指定します。

CSS記述例

デザイン例

WordPressのテーマなど、別のCSSが先に効いていて色が変わらない場合は、値の後ろに「!important」を付けると最優先になります。ただし、!importantが増えるとあとで管理しにくくなるので、まずはテーマ側の指定を探して直すほうが安全です。

フォントサイズは、h1がいちばん大きく、h2、h3と順に小さくします。スマートフォンでは画面幅が狭いので、パソコン向けの30pxをそのまま使うと見出しが何行にもわたることがあります。メディアクエリ（画面幅ごとにCSSを切り替える書き方）で、小さい画面には小さめの値を指定します。

背景画像・背景色を付ける

背景画像は「background-image」、背景色は「background-color」で指定します。

リストマークのように見出しの左にワンポイントで画像を置くときは、「background-repeat: no-repeat」で繰り返しを止め、「background-position」で位置を決め、paddingで文字と画像が重ならないように余白を取ります。背景画像が表示されないときは、まず画像へのパスを確かめます。背景色にグラデーションを使う場合は「linear-gradient()」を使います。

ボーダーを付ける

見出しの左に太い線、下に細い線を付ける、よく見るデザインです。左の線が目に留まりやすく、下の線で本文との区切りがつきます。

線を付けたら、paddingで文字と線の間に余白を取ります。線の太さはh1は太く、h3は細く、とそろえると構造が見た目にも出ます。

位置（中央揃え・右寄せ）を調整する

hタグはブロック要素なので、「text-align」プロパティで中の文字の位置を変えられます。

hタグに関するよくある質問

h1とh2の違いは何ですか

h1はページ全体に1つ、h2は章ごとに置く見出しです。迷ったら、その見出しを取り除いてもページの主題が残るかで見分けます。残るならh2、残らない（それがページ名そのもの）ならh1です。目次の項目になるのはh2で、h1が目次に並ぶことはありません。

h1は1ページに複数あってもいいですか

Googleは、複数あっても問題ないと説明しています。見出しの数に決まりもありません。ただし、どれがページのメインタイトルかが分からなくなると、検索結果のタイトルがページの意図と違うものになることがあります。当社は1ページに1つをおすすめします。

WordPressやブログサービスではh1はどこに付いていますか

テーマによって違います。多くのテーマでは、トップページはサイト名、記事ページは記事タイトルがh1です。ご自身のサイトで確かめるには、ブラウザの開発者ツール（Chromeなら右クリック→「検証」）で見出しのタグを見ます。記事ページでサイト名がh1、記事タイトルがh2になっているテーマもあるので、一度は確認しておくと安心です。

見出しにキーワードは入れるべきですか

入れるために見出しを作ることはしません。ページの主題となるキーワードはh1に自然な形で入り、h2・h3には章の内容を表す言葉が入ります。キーワードを置くためだけに作った見出しは、その下に書くことがなく本文が薄くなりがちです。見出しは内容の構造を示すものであり、キーワードを置く場所ではありません。

まとめ

ご自身のページの見出しは、次の3つを見れば状態が分かります。ブラウザの開発者ツール（Chromeなら右クリック→「検証」）で「h1」「h2」と検索すると、見出しのタグをたどれます。

• h1が1つだけで、その内容がtitleタグと同じことを指しているか
• h2だけを上から順に読んで、それだけで記事の流れが分かるか
• h2の次にh4、h3の次にh5のように、番号が飛んでいる箇所がないか

当社が247本を集計したときも、13本に番号の飛びがありました。公開してから時間がたったページほど、一度見ておく価値があります。