SEOに重要なHタグ（h1～h6）の基本的な使い方とポイントを、初心者の方にも分かりやすいように図を使って解説します。
hタグに関する記事は沢山ありますが、この記事ではhタグが入れ子になった時の使い方。hタグを見た目で使ってはいけない理由など、いざ自分で記事を執筆する立場になるとやっぱり迷うポイントが中心です。
記事を書くコチラ側の人間の目線で書きましたので、是非ご参考下さい！
hタグはh1～h6を順番に使うと言われても良く分からない方必見！…かな？
この記事の目次
初心者向け：hタグ（h1～h6）の使い方
本題に入る前に、まず今回の記事はSEOをある程度無視しています！
多分この記事は検索上位に表示されません・ｗ・
が、駆け出しの初心者ブロガーの方など“同業者”の方のためになればと思い、実際に記事を執筆するコチラ側の人間の立場に立ってHタグの基本的な使い方と、使用時のポイントをまとめました。
こんな人におすすめ
- 実際の執筆時にhタグの使い方に迷う方。
- hタグが入れ子になった時に迷う方。
- hタグを見た目で選んで使っている、使いたいと思う方。
- WordPressで記事冒頭に使うのがh1かh2か分からない方。
hタグにはh1～h6までの６種類が存在し、h1→h2→h3…となるように順番に使うのですが、これだけだと実際に記事を書く時に「あれ？これで使い方あってる？」と迷うことがあるはずです。
そんなかゆいところの悩み解決に役立てればと思い当記事を書きました。
ここで過去に○○万PVの実績あり！と自己紹介してもアレなので本題に入ります。
では、参りましょう・ｗ・
各hタグのSEOに対する影響
「hタグとは？」というテンプレは省略したいのですが、軽く触れます。
hタグは記事の「見出し」で、記事内の各話題のタイトルです。
例えば当サイトなら、こんな感じ（↓）のがhタグです。
hタグとは？
コスパ最強のxx
xxのおすすめの使い方
デザインはどうあれ、各サイトに必ずありますね！
hタグは閲覧者にはもちろん、検索エンジンにページの内容を伝えてインデックス登録（検索結果に登録）してもらうのに必須のHTMLタグです。SEOの基本中の基本です。
ある程度の検索ボリューム（類似記事）が既にネット上に存在すれば、Hタグが全く無い記事は検索結果に表示されないことでしょう…多分。
hタグの使い方とポイントの前に、まずはH1～H6がそれぞれどの程度SEOに影響するのかをざっくり整理しましょう。
留意点
※当然SEOはブラックボックスなので、当サイト見解です。
h1～h6の各タグのSEOへの影響は以下の表のようなイメージです。
| ～各hタグが及ぼすSEOへの影響イメージ～ | ||
| 項目 | SEOへの影響 | 補足 |
| h1タグ | 特大 | 基本は記事タイトルで、１ページにつき１つが定石。 |
| h2タグ | 大 | 必ずキーワードを入れる。サイトによってはh1とh2のみの構成も。 |
| h3タグ | 中 | 検索結果にはh3までが表示される。キーワードは含めなくてもOK。 |
| h4タグ | 小 | h3内を細分化する時に使用。h4以降は使っていないサイトも多い。 |
| h5タグ | ほぼ無し | SEOに影響はほぼなし。使っているサイトは殆ど見たことがない。 |
| h6タグ | ほぼ無し | h6までなるとpタグなどで代用可能か。 |
| titleタグ | - | h1タグは閲覧者用。titleタグは検索エンジン用。 |
SEOへの影響はh1→h2→h3→h4→h5→h6と番号順に影響力が低くなります。
上記は調べればいくらでも似たような内容がヒットするはずです。
なのでこの記事ではtitleタグについて補足しましょう。
実は「ページタイトル」＝「h1タグ」が検索結果に表示されると思っている方が多いのですが、実はこれが違います。
基本はtitleタグというものに設定してある文字が検索結果に登録されます。
ページタイトルだけではなく、サイト名なども加えた「ページタイトル｜サイト名」のような形が検索結果に登録されるのはtitleタグのおかげということです。
人気CMSのWordpressでは、titleタグにはページタイトルが自動挿入されることもあり、あまり話題になりませんが覚えておきましょう。
HTMLにおける各hタグの記述箇所
HTMLのコードで見ると各タグの存在箇所は以下のようになります。
<html>
<head>
<title>タイトルタグ</title>
</head>
<body>
<h1>h1タイトル</h1>
ほげほげ・・・
<h2>h2見出し</h2>
ほげほげ・・・
</body>
</html>実際はもっと複雑なコードが混じった構成になりますが、基本はこれです。
WordpressなどのCMSを使っている場合はHTMLの構造を意識する必要はありませんが、各hタグはサイトコンテンツである<body>から</body>の間に使うと頭の片隅に置いておいて下さい。
記事本文であるサイトコンテンツはh1タグ（基本ページタイトル）から始まり、その次の見出しがh2（大見出し）。さらに必要ならh3…h4…h…5…h6と深い階層を追加していく感じです。
【図解】hタグの基本的な使い方
Webサイトのページは、記事タイトルのh1タグから始まり、次の見出しがh2、さらに必要ならh3…h4…と深い階層を追加していく感じに作成するのが基本です。
この階層というのが独特で、作文の「段落」のようなものではないので初心者の方には難しく感じるでしょう…ということでhタグの構造を図にしてみました。
hタグはh1→h2→h3と階層化する
例えば、h1～h4までを使ったサイトのhタグの構造は上の画像のようになります。
h1がそのページの最大見出しで、基本ページタイトルです。
そして続く見出しがh2、必要ならその中にh3やh4を入れていく感じですね。
これをHTMLのコードで書くと以下のようになります。
<body>
<!-- ここからサイトコンテンツ（記事） -->
<h1>ページタイトル（Wordpressなら自動挿入）</h1>
<h2>h2見出し①</h2>
１つめのh2の内容（文章）
<h3>h3見出し①</h3>
１つめのh2の詳しい内容（文章）
<h4>h4見出し①</h4>
１つめのh3のさらに詳しい内容（文章）
<h3>h3見出し②</h3>
１つめのh2の内容（↑のh3、h4と内容が変わる）
<h2>h2見出し②</h2>
２つめのh2の内容（１つめのh2と内容が変わる）
<h2>h2見出し③</h2>
３つめのh2の内容（１、２つめのh2とは内容が変わる）
<h3>h3見出し③</h3>
３つめのh2の詳しい内容（文章）
<!-- ここまでサイトコンテンツ（記事） -->
</body>こんな感じにWebページではh1から順番に必要なだけhタグを順番に使います。
例えば、上のhタグ構成で「自動車免許 AT MT」というキーワードを意識してページを作るなら、h1～h4タグには以下のような文章を入れます。
（例）
h1：自動車免許を取るならAT限定とMTのどちらがお勧め？
h2：AT限定免許とMT免許の違い
h3：マニュアル車に乗るならMT免許が必須
h4：今後自分がマニュアル車を運転する可能性はあるか？
h3：現在は軽トラにもATモデルが増えている
h2：AT限定免許を限定解除する方法
h2：AT限定免許を取るのにおすすめの方法
h3：学生なら免許合宿がおすすめ！
ポイント
h1タグとh2タグには検索にヒットしてほしいキーワードを自然に入れます。
h3タグには無理にキーワードは入れなくてもOK！
h4以降のタグはユーザー目線で決める感じでOK！
ページタイトルは３０字程度、各見出しは文章にならないように簡潔にまとめるetc…といったテクニックは慣れもあるので初めのうちはあまり意識しなくても良いかも。
経験を積めば、こうすれば検索エンジンにインデックス（登録）される、上位に表示される…という感覚が自分の中で分かってきます。
とにかく初心者の方はhタグの使い方だけまず覚えましょう。大切です。
よくある間違ったhタグの使用例
続いてhタグを使う際に気を付けたいNG例のご紹介です。
hタグは必ずh1から順番に使う必要があります。
後述しますが、hタグに見た目は関係ありません。
これも図を使って分かりやすく解説していきます。
h2タグが無い悪い例
h2タグの見た目が嫌いだから、この記事はh3タグから始めよう…
という事は出来ません。
h1→h3タグのような使い方はNG
h3タグを使うにはその前にh2タグを使う必要があります。
h3タグを飛ばしている悪い例
h3タグを飛ばしてh4を使っているNG例です。
ページの下層でh2→h4の構成があるNG例
先ほどのh2が無い悪い例と似ていますが、２つめのh2タグの中でh3タグを飛ばしてh4タグを使ってしまっている悪い例です。
ここではh3タグを飛ばした例ですが、他のタグでも同じです。
hタグは必ずh1→h2→h3→h4→h5→h6と順番に使いましょう。
見出しタグh2を再び使う時の例
hタグはh1から順番に使うのですが、記事の中で話題が変わる時は上部階層のhタグを使い直す必要があります。
話題が変わっているのに、同じ見出しに入れ子になっているのはおかしいからです。
この場合はhタグの順番が飛びます。
別の見出しh2に戻る時は順番を飛ばしてもOK！
h1→h2→h3→h4と書き進めた後、話が変わってまたh2タグに戻る時の例が上の画像です。この場合はhタグの順番を飛ばして最初の見出しh2に戻ります。
これ伝わりますかね…下の階層に行く（詳しく書く）時はhタグは順番に使い、上の階層に揃える時は順番に使わないという事なのですが…
例えば、１つの記事をh1→h2→h3→h4→h5→h6と順番に使って書いた時、h1を細分化した最後の項目がh6という感じになります。これはページの構成的に、ページの最後までず～とページタイトルの内容を詳細に説明していっている形になるのです。
大体は関連する内容を見出しに分けるので、こんなページは殆どないはずです。
h1タグの複数回使用には注意が必要
今までの例では、基本ページタイトルが入るh1タグは１個というのが前提でした。
h1タグも他のhタグ同様に複数回使用することはGoogleも認めており、OKなのですがページタイトルに使われることが多いので複数回の使用は注意が必要です。
h1タグを２つ使った時のイメージ
特に初心者の方はh1タグは１つ、それ以降はh2タグを使うというスタンダードな方法の方が色々お勧めです。
SEOに対する明確な意図がない限りh1タグは１ページにつき１つにしましょう。
初心者注意！hタグは見た目で使用しない
ここで初心者の方にhタグの見た目について注意喚起です。
hタグはh1から順番に使う必要があり、見た目で使ってはいけません。
h1～h6の見た目はCSSという装飾によって変更されているだけです。
例えば、Wordpressならテーマを変えるだけでhタグの見た目が変わります。
hタグの見た目（デザイン）はテーマごとに違う
-
- Twenty Twenty-One
-
- Twenty Twenty-Two
-
- Cocoon
-
- 当サイト
以前h1タグが一番大きい！という内容を目にしたのですが、hタグの見た目を決めているのはCSSという装飾があるためで、プレーンなh1～h6の見た目は全て同じです。
どういうことか？テーマ「Twenty Twenty-One」を使って解説します。
Twenty Twenty-One
まず、各hタグはTwenty Twenty-Oneでは上のような見た目になっています。
Twenty Twenty-OneのCSS読み込み停止
ここでテーマで読み込まれているCSS（装飾）の読み込みを停止してみます。
Twenty Twenty-OneのCSS（装飾）の読み込みを停止した様子
すると上のような画像になります。hタグの見た目が随分変わりました。
しかしまだブラウザのデフォルト装飾（user agent stylesheet）が読み込まれているため、h1の方がh6よりも大きい見た目となっています。
user agent stylesheetも使わない場合
続いて、ResetCSSを読み込んで、ブラウザのデフォルト修飾さえも適用されないようにしてみましょう。
h1～h6は全て同じ見た目
いかがでしょう？
CSS（装飾）が全く適用されていないプレーンなhタグは全て同じ見た目です。
同じ見た目になりましたが、タグ自体はh1はh1。h2はh2です。
このように見た目（デザイン）とhタグの使い方は関係ありませんので、hタグの見た目でどのhタグを使うかを決めるようなことはしないようにしましょう！
ポイント
h1～h6で文字の大きさや、見た目が気に入らないタグがあるなら、そのhタグのCSS（装飾）を当て直して使う必要があります。
h3以降のタグの使い方
ここまで色々見てきましたが、それでもh3以降のタグをどのタイミングで使用すれば良いのか分からないと思います。ので、具体的な目安を書いておきます。
ぶっちゃけh4以降のタグはSEOにはほとんど影響しませんので、使っていないサイトも多いです。なので、h4以降のタグは無理して使う必要はありません。
経験上のフィーリングとしては記事の文字数が5000字を超えるくらいのボリュームなら、h4以降のタグがあるとより見やすい記事になるかな？という感じです。
あまり記事を書いたことがない初心者の方など、h3タグ以降の使い方が良く分からない人はh1（記事タイトル）とh2タグ（見出し）のみに絞るのも個人的にお勧めです。
h2タグは結構SEOに効きますので、見出しを減らしてh2のみにするという感じです。
実際、検索上位のサイトでもh1とh2しか使っていないところは沢山あります。
WordPressはh2タグから使う
最後にWordPressを使っている方への補足です。
Wordpressの場合は記事タイトルからh1タグが自動的に出力されます。
なので、記事冒頭は基本h2タグから書き始めることになります。
h1タグから書くと、h1タグが１ページに２つ存在する形になるのでご注意下さい。
こちら、詳しくは別の記事（↓）に書きました。
記事冒頭で触れた「titleタグ」についても解説していますので、そちらが気になる方も是非お読みいただければと思います。
まとめ
hタグの基本的な使い方とポイントでした。
自分が初心者の頃に「え？hタグの使い方これであってる？」と感じた内容を解説したつもりなのですが、うーん何というか見にくいね…
超大作になって疲れたので、また時間があるときにリライトします・ｗ・
最後に、この記事のhタグは結構適当なので参考にしないで下さいｗ
たまには書きたい事をユーザー目線で書いても良いではないか！
