「hタグについてあまり意識せずに設定しているけど、設定する目的や効果がよくわからない」というサイト運営者の方もいるのではないでしょうか。

適切にhタグを設定すれば、SEO対策やユーザビリティ向上に繋がります。本記事では、hタグの役割やメリット、正しい記述方法について解説します。

hタグとは？

hタグとは、Webサイトの見出しを示すときに使うHTMLタグです。「h」はheadingの略で、見出しという意味を持っています。

h1〜h6まで6つのhタグがあり、数字が小さいhタグほど階層の高い見出しとなります。h2の中にはh3を、h3の中にはh4を設定するなど、入れ子構造のように数字が小さいhタグの中に次に数字の大きいhタグを設定することがルールです。

hタグのメリット

hタグを適切に設定すると、検索エンジン・ユーザーどちらに対してもメリットがあります。ここでは主な3つのメリットを解説します。

SEO評価が上がる

hタグに対策キーワードを含めることで、ページ内容とキーワードの関連性を検索エンジンに正しく伝えることができるため、SEO評価の向上が期待できます。

たとえば、「SEOツール」というキーワードでコンテンツ作りをするなら、「SEOツールの選び方」「SEOツール導入のメリット」など関連キーワードを含めたhタグを設定しましょう。

文章が読みやすくなる

トピックごとに見出しを作ることで、コンテンツの読みやすさが格段に上がります。hタグで囲まれたテキストは本文よりも大きく表示され、視覚的に情報が得やすいためです。

ユーザーが読みやすいコンテンツになり、ユーザビリティの向上に繋がります。読みやすいコンテンツを作成するポイントは、hタグで囲むテキストをトピックの簡潔なサマリにすることです。hタグを簡潔に記載すると、見出しを見ただけでコンテンツの概要を掴みやすくなります。

ただし、見出しと本文の主張が異なっていたり、不自然に対策キーワードを詰め込んだりすると、要点の分からない読みづらいコンテンツになりかねません。対策キーワードを含むことは重要ですが、ユーザーにとって分かりやすい見出しになっているかを重要視しましょう。

目次を作りやすくなる

hタグで見出しの設定をしておくと、目次が作りやすくなります。例えば、WordPressにはhタグをもとに目次を自動生成できるプラグイン機能があり、導入部分に簡単に目次を表示させることができます。

目次が最初にあれば、ユーザーはコンテンツの概要を大まかに把握し、自分の知りたい情報が記載されているか判断することができます。

目次があることで、コンテンツのボリュームが大きい場合でも、ユーザーが読みたい部分に絞って読むことができるため、ユーザビリティが向上します。

hタグの役割

hタグには、h1〜h6まで6つのタグがあります。h1タグとその他のタグで重要度が異なるため、それぞれの役割や使い分けについて確認しましょう。

h1タグ

h1タグは、コンテンツのテーマを表します。titleタグと本質的な役割が同じであるため、似通った内容になっても問題ありません。

検索エンジンにとっても、h1タグで囲まれたテキストはコンテンツの内容・階層を理解するために重要な要素とされています。そのため、必ず対策キーワードを含むようにしましょう。

文字数制限はありませんが、長くなり過ぎるとキーワードの重要度が薄まるだけでなく、読みづらくなるため30～50文字に収めるのが理想的と言われています。

また、「h1タグの使用回数に制限はあるのか」という議論がありますが、結論は必要な数だけ使用して問題ありません。Googleのジョン・ミュラー氏は「必要なだけ記載を」とTwitterで言及しました。

Googleのジョンミュラー氏のツイート

Googleの公式ガイドにおいて「ページ内で見出しタグを過度に使用する」ことは避けるべきと明言されているため、「ページの内容を簡潔に表現する」という役割を持つh1タグは、1つに絞るのが望ましいです。

Google「検索エンジン最適化（SEO）スターター ガイド」

h1タグとは？SEO効果と5つの使い方を解説h1タグとは？SEO効果と5つの使い方を解説

h2～h6タグ

h2〜h6タグは、本文中の見出しとして活用します。それぞれのhタグの使い方は以下の通りです。

h2（大見出し）	h1の次に重要なテキストに使用
h3（中見出し）	h2の中のポイントとなるテキストに使用
h4〜h6（小見出し）	h3で内容がまとまらないときに、補足的に使用

 

h2~h6も1つのページ内に複数使用しても問題ありません。ただし、順序に気をつけて、見出し内の構造が整理されるように設定しましょう。

hタグの記述方法

hタグを設定するにあたり、基本的な記述方法を理解しましょう。

また、色やフォントサイズの調整方法もご紹介しますので、Webページ全体の見栄えや読みやすさも考慮して設定してみてください。

基本の記述方法

hタグの記述方法は以下の通りで、h1~h6まで同様です。

h1タグ	<h1>テキスト</h1>
h2タグ	<h2>テキスト</h2>
h3タグ	<h3>テキスト</h3>
h4タグ	<h4>テキスト</h4>
h5タグ	<h5>テキスト</h5>
h6タグ	<h6>テキスト</h6>

 

色・フォントサイズの調整

hタグの色やフォントサイズは、CSSで調整しましょう。フォントサイズは「font-size」、色は「color」指定します。CSSの記述方法は以下を参考にしてください。

文字の大きさを変える場合は「26px」を変更。

h2 {
font-size: 26px;
}

色を変える場合は「#0000ff」を変更。

h2 {

    color:#0000ff;

}

それぞれまとめて書いて問題ありません。

h2 {

    font-size: 26px;

    color:#0000ff;

}

サイトの雰囲気に合う色や読みやすいフォントサイズに調整しましょう。Webサイト運営で必要なコーディングについては、以下のページで詳しく解説していますのでご参照ください。

『SEOに効果的なHTMLタグのコーディング方法とは？』

記述の順番

hタグは数字が小さいほど大きな見出しになり、h1~h6の順番は入れ子構造を守りましょう。実際に記述するときは、以下のような使い方をします。

<h2>hタグの種類</h2> <p>（本文）</p> <h3>①h1タグ</h3> <p>（本文）</p> <h4>h1タグを使うときのポイント</h4> <p>（本文）</p> <h3>②h2タグ</h3> <p>（本文）</p> <h4>h2タグを使うときのポイント</h4> <p>（本文）</p>

 

h2の次にh4を使ったり、重要なテキストだからといってすべてh1タグにしたりすることは避けましょう。

hタグの注意点

hタグのメリットを最大限発揮するために、3つの注意点があります。

間違った使い方をすると、ユーザビリティやSEO対策に悪影響を与えかねないので、十分注意して設定しましょう。

Webデザインとhタグの記述は切り分けて考える

Webデザインとhタグの記述は切り分けて考えましょう。

スタイルを整える目的でテキストにhタグを設定すると、フォントサイズが大きくなったり、目立つ装飾がついたりするため、ユーザーの目を引くことができます。

しかし、hタグの目的は検索エンジンのクローラーにページ構成やコンテンツ内容を伝えることなので、テキストを目立たせる目的で使わないようにしましょう。

不必要なhタグがたくさんあると、クローラーがコンテンツ内容を正確に理解できないので、SEO評価に悪影響を与えてしまいます。本文中のテキストのサイズや装飾は、CSSで設定して読みやすいコンテンツを作りましょう。

hタグに画像を使う場合はalt属性を設定する

そもそもalt属性とは、画像の説明を行うテキスト情報のことで、次のように記載します。

<img src="〇〇.jpg" alt="画像の説明"">

▼alt属性について詳しく知りたい方はこちら
alt属性を記述するメリットとは？SEO効果や記述のコツを解説

クローラーはテキストでコンテンツを認識しており、hタグに画像のみ入れてもクローラーに認識されません。

そのため、hタグに画像を用いる際はalt属性で画像の説明を行うテキスト情報を付与し、クローラーに認識してもらえるようにしましょう。

仮にh1タグにテキストが記載された画像を用いたとしても、alt属性でテキスト情報が付与されていなければ、空白としてクローラーに認識されてしまいます。

見出しは改行しても良いが長さに注意する

対策キーワードが長いなど、見出しが長くなる場合は改行しても問題ありません。しかし、Googleの公式ガイドでは「非常に長い見出しを使用する」ことは避けるように記載されています。

Google「検索エンジン最適化（SEO）スターター ガイド」

SEO観点とは別に、人が認識しやすい文字数の目安として、Yahoo!ニューストピックスでは見出し文字数を14.5文字に設定しています。

人が一目で理解できる最大文字数は13文字と言われており、コンテンツ概要を説明するhタグには長いテキストは適していません。

一方で、内容をより正確に認識できる文字数は15文字以上とも言われており、コンテンツの内容によっては15文字を超える場合もあるでしょう。基本的には13〜15文字程度、やむを得ない場合でも20文字程度に収まるようにしましょう。

読売新聞広告局ポータルサイト「ヤフー・ニュースの見出し編集 クリックしたくなる 13文字を」

まとめ

本記事では、hタグの役割やメリット、記述方法について解説しました。

今までhタグについてあまり意識せず設定していた方も、hタグに関する正しい知識を得て正しく設定することで、SEO評価の高いコンテンツを作成できるようになります。

hタグは検索エンジン・ユーザーどちらにとっても重要であるため、既存のコンテンツを見直して不備があった場合には正しい形に修正しましょう。

▼SEOで重要なその他のタグについて詳しく知りたい方はこちら

SEOに効果的なHTMLタグのコーディング方法とは？