hタグの使い方とは？記述のルールやSEO効果について解説

hタグは見出しを指定するためのHTMLタグで、検索エンジンやユーザーにWebページの内容を正しく伝えるために、設定が必須です。

SEOとの関わりも深く、使い方や役割を理解しておかないと、成果を上げるのが難しくなります。

この記事では、hタグのSEO効果や記述方法、設定の際の注意点について解説しています。上位表示ができずに悩んでいる方は、ぜひ参考にしてください。

SEO対策とは？具体的な施策手順や注意点を解説

hタグとは？

hタグとは、Webページ内の見出しを示すHTMLタグです。hは「headline（見出し）」の頭文字からきており、文章の構造を整えるために使われます。

適切に使用すれば、人間にもコンピューターにもページの構造がわかりやすくなるため、SEOにも間接的に良い効果をもたらします。

ページの滞在時間が増加したり、読了率が上がったりとコンバージョンにつながるようなユーザー行動を増やす効果も期待できるでしょう。

関連記事：SEO対策に有効なコーディングとは？HTMLタグの書き方も解説

hタグの種類と役割

hタグには6種類あり、それぞれの概要は以下のとおりです

タグ	意味
<h1>	ページ内で最も重要な見出し（大見出し）
<h2>	主要な章の見出し（中見出し）
<h3>	<h2>の補足になる見出し（小見出し）
<h4>	<h3>の補足になる見出し（超小見出し）
<h5>	<h4>の補足になる見出し（超小見出し）
<h6>	<h5>の補足になる見出し（超小見出し）

hタグを使用することでページ内が整理されて見やすくなり、検索エンジンは記事内容を正しく理解できます。

ただし、階層を間違えると検索エンジンにページ内容が正しく認識されないおそれがあります。ユーザーの流入にも直結するため適切に使用してください。

また、hタグの使い方について、とくに押さえておきたいポイントは以下の2点です。

• h1タグ：1ページにつき1回が原則
• h2〜h6タグ：使用回数に上限はない

続いて、各見出しの詳細を見ていきましょう。

h1タグ：1ページにつき1回が原則

ページ内で最も重要な見出しに対して使用します。

また、h1タグはタイトルと重複する場合が多く、使用されないケースもあります。ただし、タイトル（titleタグ）とh1タグには以下のような違いがあります。

	表示される箇所	対象ユーザー
titleタグ	検索結果の画面	検索ユーザーにリーチする
h1タグ	Webページ内	ページ内のユーザーにテーマを伝える

使い分けるケースもありますが、ページのテーマをユーザーや検索エンジンに伝える目的は同じです。

1ページに1回という原則のみ押さえておきましょう。

h2〜h6タグ：使用回数に上限はない

h2〜h6タグは、1つのページで複数回使用しても問題ありません。階層構造間違えないよう注意しましょう。

なお、h5タグやh6タグはあまり使われません。補足情報が増えて階層が深くなる場合は、見出しを分けるのがおすすめです。

たとえば、以下のとおりです。

【Before】 <h2>〇〇のメリット・デメリットを解説 　<h3>〇〇のメリット 　　<h4>メリット1 　　<h4>メリット2 　　<h4>メリット3 　<h3>〇〇のデメリット 　　<h4>デメリット1 　　<h4>デメリット2 　　<h4>デメリット3

 

【After】 <h2>〇〇のメリット 　<h3>メリット1 　<h3>メリット2 　<h3>メリット3 <h2>〇〇のデメリット 　<h3>デメリット1 　<h3>デメリット2 　<h3>デメリット3

hタグはシンプルな構造になるように使用しましょう。

hタグのSEO効果とメリット

hタグを使用すると、SEOにおいて有利にはたらく可能性があります。とくに、hタグには3つの利点があるので活用してください。

• 検索エンジンにページの構造を伝えやすくなる
• 読みやすいコンテンツになる
• 目次を作りやすくなる

hタグはSEOとユーザビリティの両方の観点から有効です。「hタグを何のために使うのか分からない」という方は確認しましょう。

検索エンジンにページの構造を伝えやすくなる

検索エンジンは、クローラーが集めてきた情報をデータベースに保管し、世界中のページと比較した上で表示するページを決めています。

hタグを適切に使っていると、クローラーがページの情報を読み取りやすくなるため、プラスの評価につながります。またhタグの中に対策キーワードを含めることで、ページの内容と検索クエリの関連性を検索エンジンに伝えることができます。

読みやすいコンテンツになる

hタグを使用しない場合は、自身の知りたい情報をページの上から順に探していかなければなりません。一方、hタグで見出しを作ると、本文よりも大きく強調されるため視覚的にも見やすくなるでしょう。

本文を読む前に知りたい情報がページ内にあるか確認できるため、ユーザビリティの向上につながります。

目次を作りやすくなる

hタグで見出しを設定しておくと、そのまま文字の大見出し・中見出し・小見出しに設定されます。また、WordPressなどで記事を入稿する際、hタグで見出しを設定していると自動で目次を作成できるプラグインがあります。

目次を使用することでユーザビリティの向上につながり、検索エンジンからの評価されやすくなるでしょう。

hタグの効果的な使い方

hタグは、適切な使い方によって効果を発揮します。使用する際のポイントは以下の8点です。

• 順番を守って使う
• コンテンツの要所に使う
• h2をメインで使う
• 上下関係（入れ子構造）を間違えない
• 階層が深くなりすぎないように注意する
• 改行する際はbrタグを併用する
• リンク指定する際はaタグを含める
• フォントサイズ・色も調整できる

 

hタグを使用する場合は、必ず上記の内容を確認しましょう。

順番を守って使う

hタグは使用する順番が重要です。ページ内ではおもにh2タグからh4タグを使いますが、h2の次にh4が出てくるなど順番は間違えないようにしてください。

hタグはh2やh3など数字が大きくなるほど階層が深くなります。h2からいきなりh4やh5に飛ぶといった使い方は不適切のないため注意しましょう。

ただし、Googleのジョン・ミューラー氏は、「hタグが必ずしも正しい順番である必要はない」と述べています。

参考元：English Google Webmaster Central office-hours hangout

hタグの順番を間違えてもSEOに対して直接的な影響はありませんが、ページは見にくくなります。ユーザービリティが下がってユーザーの離脱につながるため、。

とくに理由がなければ、hタグは1から6まで順番に使用しましょう。

コンテンツの要所に使う

hタグは数が多すぎると、かえって読みにくいコンテンツになります。hタグはテーマを分けて要所ごとに使用してください。

また、見出し内の文章が長くなりすぎる場合は、補足情報ごとにh3・h4タグを分けるとよいでしょう。

h2をメインで使う

h1タグは、最も重要な見出しに対して使うタグです。使用回数に制限はありませんが、使いすぎると大事な見出しを判別できなくなるため、効果が弱くなります。

そのため、h2タグをメインに使用します。h2タグを起点に、補足がある場合はh3タグ、より重要な見出しにはh1タグといったように使い分けましょう。

ただし、Googleは検索結果に表示するタイトルリンクにh1タグを使用していると明言しているため、タイトルとして表示させたい見出しにはh1を使用するのがおすすめです。

参照 : Google 検索セントラル | Google 検索結果のタイトルリンク（見出し）の変更 

上下関係（入れ子構造）を間違えない

hタグは使用する順番だけでなく、上下関係も重要なポイントです。h2～h6まで、数字が大きくなるほど下層になると覚えておきましょう。

h2の下層にh3を配置し、さらにh3の下層にh4を設定します。悪い例と良い例はそれぞれ以下のとおりです。

悪い例	<h3>SEO対策のポイント</h3> <h2>コンテンツの品質を上げる</h2> <h4>良質なコンテンツを作るポイント</h4> <h2>ユーザビリティを意識する</h2> <h2>Webサイトの内部構造を最適化する</h2> <h3>SEO対策を行う際の注意点</h3>
良い例	<h2>SEO対策のポイント</h2> <h3>コンテンツの品質を上げる</h3> <h4>良質なコンテンツを作るポイント</h4> <h3>ユーザビリティを意識する</h3> <h3>Webサイトの内部構造を最適化する</h3> <h2>SEO対策を行う際の注意点</h2>

良い例だと、h2のテーマを補足するように階層が深くなっていきます。

悪い例のように、誤ってh2の上位にh3やh4を設定すると、ユーザーが読んだときに混乱を招く可能性があるので注意しましょう。

階層が深くなりすぎないように注意する

階層構造が深くなりすぎると、内容がかえってわかりづらくなるため、h5とh6タグは基本的に使用しません。

そもそも、よほど専門的な内容でない限り、見出しはh4までで事足ります。そのためh5以降を使う場合は、文章の構造がわかりづらくなっている可能性が高いです。

構成から見直し、より簡潔な内容にする方法がないか考えてみましょう。

改行する際はbrタグを併用する

hタグ内で改行する場合はbrタグを使用し、記述の例は以下のとおりです。

<h3>【hタグを使用する際のポイント】<br>改行する際はbrタグを併用する</h3>

ただし、hタグ内は可能な限り簡潔な内容にしましょう。上記の例だと、見出しは以下のように変更可能です。

<h3>改行する際はbrタグを併用する</h3>

hタグはユーザーに端的に内容を伝えられるように記載してください。

リンク指定する際はaタグを含める

hタグ内でリンク指定する方法を、以下の2点に分けて解説します。

• 通常のリンク指定について
• ページ内リンクの指定について

目次から、それぞれの見出しにアンカーリンクを飛ばす際などに活用できます。ユーザーの利便性向上につながるため押さえておきましょう。

通常のリンク指定について

見出しに別のページへのリンクを貼る場合、記述方法は以下のとおりです。

<a href=”httpsからはじまるURLを記述”>見出しのテキストを記述</a>

設定されたリンクをクリックすると、aタグに記載したページへと遷移します。

ページ内リンクの指定について

目次から指定の見出しにリンクを貼るなど、ページ内リンクの記述方法は以下のとおりです。

リンク元（目次など）	<p><a href=”#link1″>リンク指定する際はaタグを含める</a></p>
リンク先（目次など）	<h1 id=link1″>リンク指定する際はaタグを含める</h1>

リンク元の目次にaタグと#からはじまるidを記載し、リンク先にはidを設定することで飛ばせます。

フォントサイズ・色も調整できる

hタグは、CSSの「color」プロパティや「font-size」プロパティで値の調整が可能です。フォント・色を変えられるため、ユーザーにとってより見やすい形式に変更しましょう。

h1が最もフォントサイズが大きく、階層が深くなるほどサイズを落とすなど、ユーザーに階層を分かりやすくする際に有効です。

hタグの記述方法

hタグは、見出しとなるテキストを下記のようにそれぞれのタグで囲む形で記述します。

<h1>hタグの使い方について</h1> <h2>hタグの使い方について</h2> <h3>hタグの使い方について</h3> <h4>hタグの使い方について</h4> <h5>hタグの使い方について</h5> <h6>hタグの使い方について</h6>

また、hタグの記述方法を紹介します。

正しい記述方法

hタグの正しい使い方の例は、以下のとおりです。

<h2>hタグのメリット</h2> 　<h3>ユーザビリティの向上</h3> 　<h3>SEOで有利にはたらく</h3> <h2>hタグの使い方</h2> <h2>hタグ使用時の注意点</h2> 　<h3>上下関係を間違えない</h3> 　<h3>h1はページにつき1回</h3>

テーマごとに入れ子構造になっており、上位の階層を補足するように下層のhタグが設定されています。

誤った記述方法

誤った例は以下のとおりです。

<h2>hタグのメリット</h2> <h2>ユーザビリティの向上</h2> <h2>SEOで有利にはたらく</h2> <h4>hタグの使い方</h4> <h2>hタグ使用時の注意点</h2> <h3>hタグを使う場合の注意点を解説します。</h3> <h3>h1はページにつき1回までにしてください</h3>

上下関係や順番が間違っているだけでなく、見出し内に本文が記載されています。見出しは本文やページのテーマを端的に伝えられるよう記述しましょう。

hタグを使う際に守ったほうがよいルール

hタグは以下のルールを守ることで、より効果的に使用できます。

• h1タグは1ページにつき1回
• 装飾目的で使用しない
• hタグ内のテキストは長くなりすぎないようにする
• hタグに画像をいれる際は、alt属性（代替テキスト）を設定する
• キーワードを盛り込みすぎない
• 強調タグとの併用を割ける
• hタグごとにCSSで装飾する

それぞれ詳しく解説していきます。

h1タグは1ページにつき1回

h1タグはページ内で最も重要性が高く、そのページのテーマを伝える場合などに使用します。そのため、使用は1ぺージにつき1回に留めましょう。

h1タグについてはこちらのページで詳しく解説しています。
関連記事：SEO対策におけるh1タグの効果やメリットを解説

装飾目的で使用しない

閲覧環境やCSSの設定にもよりますが、hタグを使用するとフォントサイズが大きくなったり、太字になったりします。WordPressなどのCMSを使っている場合、簡単に見出しを設定できるため、見出しではない部分にhタグが使われていることもよくあります。

一見、読みやすく装飾されているように感じますが、検索エンジンにとってはその限りではありません。検索エンジンなどのコンピューターは、ソースコードを読み取ってページの内容を判別するため、文中に突然見出しが出現したと判断します。

ページの内容を正しく読み取れなくなり、SEO評価に悪影響を与えるおそれがあるため、絶対にやめましょう。

hタグ内のテキストは長くなりすぎないようにする

見出しの役割は、ユーザーに本文の内容を端的に伝え、利便性を向上させることです。長文の見出しは一目で内容を理解しづらいため、ユーザビリティを下げるおそれがあります。

また、近年ではスマートフォンからWebサイトを閲覧する人が多いです。PCに比べて画面が小さいため、文章が長いと必要以上に改行が生まれ、見出しが画面を占有してしまいます。

hタグ本来の目的が失われてしまうため、できるだけ短いテキストを設定しましょう。

hタグに画像をいれる際は、alt属性（代替テキスト）を設定する

hタグには、画像を設定しても問題ありませんが、alt属性の設定を忘れないようにしましょう。alt属性とは、画像の内容を説明するためのテキストのことで、以下のように設定します。

<img src=”img/sample.png” alt=”画像の説明文”>

Googleの検索エンジンは、画像の内容を読み取ることができないといわれており、alt属性がないと内容を判別できません。ページの内容を正しく読み取ってもらえなくなるおそれがあるため、必ず設定しましょう。

キーワードを盛り込みすぎない

見出しに対策キーワードを含めると、検索クエリとの関連性が検索エンジンに伝わりやすくなるといわれています。しかし、過剰にキーワードを盛り込むと、本当に重要なキーワードがわからなくなります。

また、関連性の低いキーワードを無理に入れ込むなども同様で、検索エンジンとユーザーの双方に内容が伝わりづらくなるため注意が必要です。

そもそも、過剰なキーワードの詰め込みはブラックハットSEOの一種であるため、SEO的にも不適切です。キーワードを入れ込む際は、1つの見出しに対して1つになるように意識し、自然な文章になるように心がけましょう。

関連記事：SEOの基本はキーワード選定から！選び方やツールまで徹底解説

強調タグとの併用を割ける

強調タグとは、検索エンジンやユーザーに重要な文章を伝えるためのHTMLタグのことで、以下の2つが挙げられます。

HTMLタグ	役割	タグが当たった文章の装飾
<strong>	検索エンジンに文章内の重要な箇所を伝える	強調タグ
<em>	ユーザーに文章内の重要な箇所を伝える	強調タグ

それぞれのタグを使うと、テキストが視覚的に変化するため、以下のようにhタグとセットで使いがちです。

<h2><strong>強調タグとは</strong></h2>

しかしhタグは上記両方の役割を持っているため、改めて設定する必要はなく、装飾目的で使うのは誤った使い方です。

装飾を行いたい場合はCSSを使用するか、以下いずれかのHTMLタグを使いましょう。

HTMLタグ	役割	タグが当たった文章の装飾
<b>	太字にする	強調タグ
<i>	文字を斜めにする	強調タグ

hタグごとにCSSで装飾する

hタグごとにCSSで以下のような装飾を行えば、ページにメリハリをつけられます。

• hタグは文字サイズを大きくする、目立つ色をつける
• h3はh2より少し控えめに主張する
• h4はh3よりさらに控えめに装飾する

重要度が一目で判別できる装飾を行えば、ページ内の大事なポイントをユーザーに伝えやすくなります。文章が読みやすくなるため、ページの滞在時間や読了率も増加し、SEOに間接的な良い影響が期待できるでしょう。

hタグにおすすめのCSSプロパティ

hタグの装飾におすすめのCSSプロパティを表にまとめました。

プロパティ名	意味	例
color	文字の色を変える	h2 { color:#333333; }
background-color	文字の背景色を変える	h2 { background-color:#C5EDFF; }
padding	要素内の上下左右の余白を調整する	h2 { padding: 10px; }
margin	要素外の上下左右の余白を調整する	h2 { margin:20px; }
border	要素の境界を装飾する	h2 { border: 1px solid #333333; }
font-size	文字の大きさを変える	h2 { font-size:24px; }
line-height	行の高さを調整する	h2 { line-height:1.7 };

また、上記を組み合わせて下記のように記述することも可能です。

h2{ color:#FFFFFF; background-color:#333333; margin:16px 0 24px }

hタグは使用するCSSプロパティ次第でブラウザ上の見た目が大きく変わります。

ページの視認性や可読性に影響を与えるため、Webサイト全体のデザインと調和を図った上で最適なレイアウトを探ってみてください。hタグごとに適切な装飾を行えば、ユーザビリティの向上が期待できます。

まとめ：hタグを上手に使ってわかりやすいコンテンツを作成しよう！

hタグは、見出しを設定するためのHTMLタグです。適切に使えば文章構造がわかりやすくなるため、ユーザーと検索エンジンの双方にページの内容を伝えやすくなります。

SEOに直接的な影響を与えることはありませんが、ユーザー行動の改善が期待できるため、間接的に良い効果が期待できます。一方で使い方を誤るとかえって文章がわかりづらくなり、ページが正しく評価されなくなるおそれがあります。

この記事を参考にhタグの使い方を理解し、誰が読んでもわかりやすいコンテンツ作りに励んでみてください。

SEOを外注に依頼したい、どの会社にしたらいいかわからないという方は以下の記事をぜひ参考にしてください。

【関連記事】

東京・全国のおすすめSEO会社37選！業者の選び方や注意点も解説

SEO対策を外注するメリットは？外注すべきタイミング、業者の選び方、費用を解説

弊社のSEOサービス「ランクエスト」では、お客様ごとに専任のコンサルタントがつき、戦略立案からコンテンツ制作、効果測定まで、すべて対応いたします。SEO対策にお悩みの方は、お気軽にご相談ください。