hタグとは？h1～h6の正しい使い方とSEOに効果的な使い分け！

hタグとはWebサイトの見出しを設定するときに使用するHTMLタグですが、何となく設定しているだけで、どのような効果があるか知らない方も多いのではないでしょうか。

結論からお伝えすると、hタグを正しく使うことで「SEO評価の向上」と「読みやすいページが作成できる」という2つの効果が期待できます。

本記事では、hタグの具体的な効果を解説するとともに、より効果的な使い方やh1～h6タグの使い分けについてもご紹介しますので、ぜひ最後までチェックしてみてください。

hタグの役割は主に2つ

hタグは「SEO評価の向上」と「読者に分かりやすいページを作成する」という2つの役割があります。HTMLタグを用いて適切に設定することで検索エンジンと読者の両方にメリットがあり、SEO効果が期待できます。

hタグを効率的に使い分けることによって、より見やすく検索エンジンに評価されやすいコンテンツが作成できるため、ぜひチェックしてみてください。

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

hタグを効果的に使用することで、検索エンジンにコンテンツの構造を正確に伝わりやすくなりサイトの評価を高めることにつながります。

Google・Yahooといった検索エンジンは、ユーザーの利便性を特に重視しています。hタグが適切に使用され、重要なトピックが整理されたページを作成することで、検索エンジンに「利便性が高いページ」であることが伝わりやすくなります。

また、hタグを適切に使用し情報が整理されたページは、読者の利便性も高まるため、結果的にサイトの評価が上がり検索順位が上昇するSEO効果が期待できます。

hタグを使うことで読者の目にも分かりやすいページを作成できる

hタグを使うことで見出しを本文よりも大きく表示できるため、記事のテーマが読者に伝わりやすくなります。

例えば、ページ内に目次を設置することで、読者は知りたい情報をすぐに確認できるようになります。目次が設置されていることで、読者が必要な箇所だけかいつまんで読むことができるため、コンテンツのユーザビリティの向上につながるわけです。

ちなみにWordPressには、h1タグ～h6タグを基に目次を自動生成する拡張機能(プラグイン)が存在するため、html不要で簡単に目次が作成可能です。

h1タグ～h6タグの使い方と役割

hタグとは別名「見出しタグ」とも呼ばれるHTMLタグで、h1タグ～h6タグの6種類が存在しますが、それぞれ役割が異なります。

見出しの使い方にはルールがあり、ルールを守って正しく使うことで、読者が分かりやすく検索エンジンにも評価されやすいページの作成が可能です。

本項目では、h1タグ～h6タグそれぞれの役割と使い分けについて詳しく解説しますので、確認してみましょう。

h1タグは検索エンジンにページの主題を伝える

h1タグはページの主題やテーマを表すために使用し、読者や検索エンジンにコンテンツのメインテーマを簡潔に伝える役割があります。

よって、h1タグは見出しタグの構造の中では最上位に位置し、タイトルタグと並ぶ重要なタグです。

h1タグの使い方は効果的な使い方について詳しくご紹介しますので、ぜひ参考にしてみてください。

h1タグは画像ではなくテキストに使うのが一般的

前項でも解説した通り、h1タグはサイトの主題を表す最も重要なhタグであるため、画像ではなくテキストに使用するのが一般的です。

検索エンジンは、画像よりもテキストを読み取りやすく、正確にページのテーマを伝えることができ、SEO効果が期待できるためです。

また、テキストの見出しは読者にも重要なポイントを伝えやすいため、特別な理由がない限りh1タグはテキストに使用することをおすすめします。

h1タグとタイトルタグのテキストは統一させる

h1タグとタイトルタグはSEOの観点から見たときに、ページ内で最も重要なテキストを表しています。

厳密に言えば、h1タグは見出しとしてすでにページを読んでいる方に向けて表示され、タイトルタグは検索結果としてページを読む前の方に向けて表示されます。

しかし、h1タグとタイトルタグの本質的な役割は狙いのキーワードを記載することであるため、テキストの内容は統一させることが望ましいでしょう。

SEO対策はメディアエクシードへお任せ！
お問い合わせはこちらから

h2タグ～h6タグはページ内の見出しとして使う

h2タグ～h6タグは、h1タグと同様に本文中の見出しとして使用するhタグです。

具体的には、h2タグは大見出しとしてh1タグに次いで重要なテキストに用い、h3タグは中見出しとしてh2タグの中の特にポイントとなる文章に使用します。

h4タグ～h6タグはh2タグ・h3タグで文章がまとまらないときに補足として使うhタグですが、使用回数に制限はないため必要に応じて使い分けましょう。

【基礎編】h1タグ～h6タグの正しい使い方

ここまで、h1タグ～h6タグそれぞれの役割と使い分けについて解説しました。

hタグとはどのようなタグであるか理解したところで、本項目では実際にh1タグ～h6タグの使い方についてご紹介します。

まずは、hタグの使用回数や使う順番などの基礎的な使い方について解説しますので、正しくhタグを使い分けて検索で上位表示されるサイトを目指しましょう。

h1タグ～h6タグはページ内の見出しを設定するために使う

h1タグ～h6タグは、ページ内のコンテンツに見出しを設定するために使うのが基本です。

使い方のコツとしては、まずページ内のコンテンツを重要な箇所とそれ以外に分け、どこに見出しを設定するかを明確にすることです。

また、hタグの使用回数には制限はありません。しかし、hタグ乱用すると情報が整理しづらくなり、本当に重要な個所がユーザーに伝わりづらくなってしまうため、意味のあるポイントに絞ってhタグを設定しましょう。

加えて、hタグの使用回数が多いからSEO効果が高いというわけではありません。

h1タグ～h6タグは数字が小さいものから順番に使う

hタグの使い方で気を付けなければならないのが使用する順番で、h1タグ～h6タグは小さい数字から順番に使うことが重要です。

理由として、hタグとはコンテンツの階層構造を正しく示すために使用するものであり、文字の大きさや見た目の都合がよいからと順番を飛ばすことは読者の混乱を招き、SEOにマイナスの影響を与えます。

以下の通り、Googleは公式に「順番は検索に影響しない」としていますが、あえて順番を守らずに読みにくいページを作る意味はないため、階層構造を守り読者に分かりやすいサイトを作成しましょう。

見出しを意味的な順番にすることは、スクリーン リーダーにとっては素晴らしいことですが、Google 検索にとっては順番どおりに使われていなくても問題ありません。

出典:検索エンジン最適化（SEO）スターター ガイド

h1タグの使用回数は1ページにつき1回のみとする

hタグの中でもh1タグの使用回数は、1ページに対して1回のみとすることが望ましいです。

前項でもご紹介した通り、h1タグはページ内で最も重要なテキストに使用するタグであるため、ページ内に複数のh1タグが存在すると読者にとって分かりにくいページになってしまいます。

Googleは「1ページに複数のh1タグが存在しても問題はない」としていますが、ページの主題が検索エンジンに伝わりにくくなる可能性があるため、h1タグの使用は1ページにつき1回に留めておく方が無難です。

ページごとに魔法の見出し数や理想的な見出し数といったものが存在することもありません。ただ、リンクの数が多すぎると感じる場合、実際にそうである可能性が高いと言えます。

出典:検索エンジン最適化（SEO）スターター ガイド

h1タグのテキストは32文字程度で作成する

h1タグを設定するテキストの適切な文字数は決められていませんが、記事タイトルにh1タグを設定する場合は、検索した際の見え方などを考慮して32文字程度で作成することをおすすめします。

32文字程度が望ましい理由は、検索結果に表示される文字数が30文字～35文字程度であるためです。

冗長なタイトルは狙いのキーワードが分かりにくくなるため避けた方がよいですが、長文になる場合はキーワードを検索結果に表示される32文字までの部分に記載しましょう。

h1タグには必ず狙いキーワードを入れる

h1タグを設定するときは、必ず狙いキーワードを検索エンジンと読者に分かりやすいように簡潔に入れましょう。

記事のターゲット層に合った狙いキーワードをh1タグに含めることで、コンテンツの内容を検索エンジンや読者に伝えることができます。

ただし、テキストが長くなりすぎたり、キーワードを盛り込みすぎて文章が不自然になったりすると、Googleからの評価が下がる可能性もあるため注意が必要です。

h2タグにも自然な範囲で狙いキーワードを入れる

h1タグにキーワードを入れたら、h2タグにも不自然にならない範囲で可能な限り狙いキーワードを入れ込みましょう。

h1タグは読者と検索エンジンに記事の主題を伝えるために狙いキーワードが必須ですが、h2タグ以下は読みやすさが重要なので必ずしもキーワードを入れる必要はありません。

しかし、h2タグにキーワードを入れられるようならSEO効果も期待できるため、できる限り入れるように心掛けてみてください。

【応用編】h1タグ～h6タグの効果的な使い方

前項ではh1タグ～h6タグの基本的な使い方や使い分けをご紹介しましたが、さらに工夫することで読者がより読みやすくSEO効果の高いページの作成が可能です。

そこで本項目では、hタグの使い方の応用編として、h1タグ～h6タグの中にインライン要素を含める方法や内部リンクを設定する方法をご紹介します。

初心者には多少難しい内容も含まれますが、SEO効果を高めるために覚えておいて損はありませんので、一緒にチェックしてみましょう。

hタグの中にインライン要素を含める

インライン要素とは、テキストの一部として使用される要素で、hタグの中に含めることでスタイルの変更や装飾が可能です。

hタグの中に適切なインライン要素を含めることは、検索エンジンがサイトの内容を正しく理解するために役立ちますが、過度な使用や誤った使い方は逆効果となるため注意しましょう。

以下の表に主なインライン要素をまとめていますので、ぜひ参考にしてみてください。

主なインライン要素

インライン要素一覧

要素名	分類	説明	DTD
子要素はインライン要素のみ			Str	Tra	Fra
<span>	I	範囲の指定（インライン）	〇	〇	〇
<em>	I	強調	〇	〇	〇
<strong>	I	より強い強調	〇	〇	〇
<abbr>	I	略語（全般）	〇	〇	〇
<acronym>	I	略語（頭字語）	〇	〇	〇
<dfn>	I	定義する用語	〇	〇	〇
<q>	I	短文の引用（インライン）	〇	〇	〇
<cite>	I	引用元（出典・参照先）	〇	〇	〇
<sup>	I	上付き文字	〇	〇	〇
<sub>	I	下付き文字	〇	〇	〇
<code>	I	ソースコード	〇	〇	〇
<var>	I	変数・引数	〇	〇	〇
<kbd>	I	入力する文字	〇	〇	〇
<samp>	I	出力サンプル	〇	〇	〇
<bdo>	I	書字方向	〇	〇	〇
<font>	I	フォントのサイズ・色・種類	×	△	△
<big>	I	大きめの文字	〇	〇	〇
<small>	I	小さめの文字	〇	〇	〇
<b>	I	太字	〇	〇	〇
<i>	I	イタリック体	〇	〇	〇
<s>	I	取り消し線	×	△	△
<strike>	I	取り消し線	×	△	△
<u>	I	下線	×	△	△
<tt>	I	等幅フォント	〇	〇	〇
<a>	I	リンクのアンカー	〇	〇	〇
<label>	I	部品とラベルの関連付け	〇	〇	〇
子要素はブロックレベル要素とインライン要素			Str	Tra	Fra
<object>	I	オブジェクトの埋め込み	〇	〇	〇
<applet>	I	Javaアプレットの埋め込み	×	△	△
<iframe>	I	インラインフレーム	×	〇	〇
<button>	I	ボタン	〇	〇	〇
子要素は文字列のみ			Str	Tra	Fra
<textarea>	I	複数行の入力欄	〇	〇	〇
子要素は特定の要素のみ			Str	Tra	Fra
<select>	I	セレクトボックス	〇	〇	〇
子要素は空			Str	Tra	Fra
<basefont>	I	基準となるフォントサイズ	×	△	△
<img>	I	画像の埋め込み	〇	〇	〇
<br>	I	改行	〇	〇	〇
<input>	I	フォームの部品	〇	〇	〇
子要素はスクリプトのみ			Str	Tra	Fra
<script>	I	スクリプト	〇	〇	〇
その他			Str	Tra	Fra
<ｍap>	I	イメージマップ	〇	〇	〇

子要素はインライン要素のみ
インライン要素（および文字列）のみを直接の子要素として配置できる要素。
子要素はブロックレベル要素とインライン要素
ブロックレベル要素、およびインライン要素を直接の子要素として配置できる要素。
子要素は文字列のみ
文字列のみを配置できる要素。
子要素は特定の要素のみ
特定の要素のみを直接の子要素として配置できる要素。
子要素は空
内容を持たない要素。
子要素はスクリプトのみ
スクリプトのみを配置できる要素。スクリプト内では、ブロックレベル要素、インライン要素ともに配置が可能。
その他
area要素、およびブロックレベル要素を直接の子要素として配置できる要素。
※この一覧には、ブラウザ独自の拡張要素は掲載していません。

出典:TAG index

マークの意味

項目	マーク	意味	説明
分類	B	ブロックレベル要素	ひとつのまとまりを構成する要素
	I	インフラ要素	文章中の一部として扱われる要素
	–	その他の分類	上記の2つに分類されない要素
DTD
	Str	Strict DTD	厳密型
	Tra	Transitional DTD	移行型
	Fra	Frameset DTD	フレーム設定用
	〇	使用可	そのDTDで使用できる要素
	△	非推奨	使用できるが推奨されない要素
	×	そのDTDでは使用できない要素	使用不可

hタグに飛ばす内部リンクを設定する

h1タグ～h6タグに飛ばす内部リンクを設定することで、ページの利便性が向上します。

内部リンクの設定は、移動先に「id」を設定し、リンク元に「#移動先のid」を付けて指定します。

見出しに内部リンクなどを設定することでユーザビリティが向上するほか、間接的なSEO効果の向上にも繋がるため、必要に応じて設置しましょう。

CSSを使ったhタグのデザインとSEO効果

大きさや色を変えたり背景を設定したりと、hタグを設定したテキストを目立たせたい場合にはCSSを用いることをおすすめします。

CSSとはサイトのスタイルやデザインを指定するプログラミング言語で、HTMLだけで記述されたシンプルな構成にデザインを施すことが可能です。

本項目では、CSSを使ったhタグのデザイン例や使い分け方をご紹介しますので、自分好みにカスタマイズして使ってみてください。

見出しテキストのサイズやカラーを設定する

見出しテキストのサイズを設定する場合はCSSの「font-size」プロパティ、色を設定する場合は「coler」プロパティで値を設定し、好みのサイズとカラーに調整します。

テキストサイズの指定方法には「px」「em」「%」などが存在し、色は「red」などカラーネームで指定する方法と「#FF0000」などカラーコードで指定する方法があります。

また、テキストのサイズは、最も重要なh1タグのサイズを基準に徐々にサイズを落としていく設定がおすすめです。

見出しテキストの配置を設定する

見出しテキストの配置を調整したい場合は、配置を変更するプロパティ「text-align」を使用することでテキストを水平方向へ移動可能です。

配置を指定しない場合は自動的に左寄せになり、中央寄せにしたい場合は「center」を、右寄せにしたい場合は「right」をそれぞれ指定します。

また、「text-align」プロパティは水平方向への移動のみが可能であり、垂直方向への移動はできないことに注意が必要です。

見出し背景にカラーをつける

背景色を変更することで、見出しを強調してより目立たせることが可能です。

見出し背景にカラーをつけるCSSプロパティは「background-color」もしくは「background」で、文字色と同様にカラーネームかカラーコードで色を指定します。

背景色は単色のみではなく2色以上のグラデーションの設定も可能なため、サイトのデザインに合わせて活用してみてください。

見出し背景を装飾する

見出しの背景に線を引いたり装飾したりすることで、サイトの視覚的な印象を向上させ、重要な情報をより強調する効果に期待できます。

例えば、見出しに線を引きたい場合はCSSに「border」プロパティを使用し、線の要素に色や太さを記述します。

背景を装飾したい場合には「background」プロパティを使用して、背景の要素に色や画像を記述することでさまざまな装飾が可能です。

見出し背景に画像を表示させる

見出し背景に画像をレイアウトしたい場合は、画像のプロパティや値を記述したCSSファイルを読み込み、必要に応じて透明度や大きさなどのデザインを調整します。

同じ画像を繰り返し表示したい場合には「background-repeat」プロパティを使用し、画像の開始基準位置を調整したいときには「background-position」プロパティを使用します。

複数のプロパティと値を組み合わせることでさまざまなデザインの作成が可能であるため、最大限に活用し読者にとって魅力的なサイトを作成しましょう。

SEO効果を高めるhタグの正しい使い方・使い分け｜まとめ

本記事では、hタグとはどのようなタグなのかについてご紹介するとともに、SEO効果を高めるhタグの正しい使い方や使い分けについて解説しました。

hタグとは適切な使い方・使い分けをすることでSEOの評価を高める重要なタグですが、正しく使わなければ逆効果となるため専門家に任せるのも1つの手です。

株式会社メディアエクシードは、SEO対策のプロによる記事作成代行からライティング指導まで幅広いサービスを取り揃えていますので、SEO対策に悩んでいる方はぜひご相談ください。

SEO対策に関する無料相談はこちらから