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

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

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

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

hタグとは？

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

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

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

hタグの種類

hタグには6つの種類があり、見出しの重要度に合わせて使い分けます。それぞれの概要を表にまとめました。

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

見出しごとに適切なhタグを使用して、重みづけを行います。なお、h1タグはタイトルと重複することも多く、必ずしも使用する必要はないとされています。

そのため、多くの場合メインで使うのはh2タグになります。また、Webページの階層構造が深くなりすぎるとかえって読みづらくなるため、h5タグとh6タグは基本的に使いません。

それぞれのhタグの役割を覚えて、適切に扱えるようにしましょう。

hタグのSEO効果

hタグの使用が検索順位に直接、影響を与えることはありません。しかし以下2つの効果により、間接的に良い評価を得られる要因になります。

• 検索エンジンにページの構造を伝えやすくなる
• ユーザビリティが向上する

それぞれの効果について、詳しく解説していきます。

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

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

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

ユーザビリティが向上する

hタグには基本的に、章ごとの内容を要約した見出しを設定します。適当な見出しが設定されていると、ユーザーは本文を読まなくてもある程度、内容が予測できるようになります。

知りたい情報を素早く見つけられるようになるため、ユーザー体験を向上させることが可能です。また、視覚障害者などがスクリーンリーダーを使ってページを閲覧する際にも、内容をわかりやすく伝えられます。

すべてのユーザーに対して、整理された情報を提供できるようになるため、ユーザー行動の活性化が期待できるでしょう。

hタグの使い方

hタグの使用には、以下のようなルールが存在します。

• h2をメインで使う
• 上下関係を間違えない
• 階層が深くなりすぎないように注意する

上記を守らないと、かえって内容がわかりづらくなり、SEOに悪影響を与えるおそれがあるため注意が必要です。

それぞれの概要を説明した上で、hタグの記述方法についても解説していきます。

h2をメインで使う

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

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

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

上下関係を間違えない

hタグは、数字が小さいほど重要度の高いと認識されます。そのため、数字の大きいhタグに対して、数字が小さいhタグを入れ子にすると階層構造がおかしくなってしまいます。

また、h2タグの直下に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>

hタグごとの役割や上下関係を理解した上で、適切にコーディングしましょう。

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

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

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

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

hタグの記述方法

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

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

なお、WordPressを使っている場合は「見出し2」「見出し3」などの装飾を使うと、自動的に同じ数字のhタグが割り当てられます。

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

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

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

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

装飾目的で使用しない

閲覧環境や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つになるように意識し、自然な文章になるように心がけましょう。

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

強調タグとは、検索エンジンやユーザーに重要な文章を伝えるための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タグの使い方を理解し、誰が読んでもわかりやすいコンテンツ作りに励んでみてください。