hタグとは？役割とルールを正しく理解しよう

hタグは、HTMLで「見出し」を意味するタグです。hタグを設定することでページの概要をユーザーに対してわかりやすく提示できるだけでなく、検索エンジンがページの構造を理解するのにも役立ちます。

しかし、文字を強調する目的でhタグを使用するなど誤った使い方をされているケースも多く、SEO上マイナスになってしまうこともあります。この記事では、hタグのルールや正しい使い方、設定のコツを紹介します。

hタグとは、HTMLで見出しを表すために使われるタグです。「h」は、headingの略で文字通り見出しを意味し、見出しタグと呼ばれることもあります。hタグはh1からh6まで6種類あり、h1が最も重要な見出しで、h6は最も小さな見出しという位置付けです。

hタグはユーザーにページの内容をわかりやすく伝える見出しとしての役割を持つだけでなく、検索エンジンにページの内容や構造を示す役割もあります。
 

hタグを正しく使うことで次の4つのメリットがあります。

• hタグだけでページの内容を伝えられる
• 文章が読みやすくなる
• 検索エンジンに文章構造を伝えられる
• 目次が作りやすくなる

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

hタグだけでページの内容を伝えられる

hタグに含まれるキーワードから、そのページがどのようなトピックについて書かれているのかをGoogleやユーザーに伝えることができます。hタグを使用して、わかりやすくかつ重要なテキストを見出しとして強調することで、ユーザーがページを開いたときに、どこに求めている情報があるのかを判断しやすくなります。また、Googleもhタグのキーワードからそのページの内容を判断します。

多くのユーザーはそのページを上から順番に読むのではなく、必要な情報を拾い読みします。hタグの見出しがあるとページ内を移動する際に必要な情報が目に止まりやすくなるため、ユーザーの利便性が向上します。ユーザーの求めているニーズや利便性を満たせることができれば、SEOの評価にもつながるでしょう。
 

文章が読みやすくなる

hタグは、書籍でいうところの目次のようなものです。記事の要点をまとめることで、ユーザーに記事の概要を端的に伝えられます。

通常、hタグは本文よりも大きく表示されるため、流し読みでも目に止まりやすいという特徴があります。hタグで適切に見出しを設定すると 文章が読みやすくなり、ユーザビリティの向上が可能です。

検索エンジンに文章構造を伝えられる

hタグを適切に使うことで、文章の階層構造を検索エンジンに正しく伝えられます。それによってGoogleがページの内容を理解しやすくなり、クローラーも巡回しやすくなります。

クローラーとは、インターネット上のWebサイトを巡回しているプログラムです。クローラーがWebサイトを巡回し、インデックスすることで、そのWebページが検索結果に表示されるようになります。クローラーが巡回してこなければインデックスもされません。hタグを適切に使うことで、素早いインデックスを促せます。
 

目次が作りやすくなる

hタグで見出しを設定することで、目次が作りやすくなります。hタグは階層構造になっており、設定したhタグがそのまま目次の大見出し・中見出し・小見出しになります。WordPressにはhタグから自動で目次を生成できるプラグインもあります。

また、目次の見出しを本文の見出しとリンクさせることで、ユーザーがページ内の読みたい見出しにクリックひとつで移動できるため、ユーザビリティが向上します。

hタグはルールに沿って使うことが大切です。「文字のサイズを拡大したい」「強調したい」など、本来の目的以外でhタグを使用すると、ユーザーと検索エンジンの双方にとって利便性が悪くなることがあります。
 

h1タグは1ページにひとつにする

h1タグはWebページのテーマをユーザーに示すもので、hタグのなかでもSEOに与える影響が大きく特に重要とされています。h1タグが複数あると、どの要素が最も重要なのか判断できなくなります。そのため、h1タグは1ページに対してひとつにするのが望ましいでしょう。

h1タグはそのWebページのタイトルとして使われるのが一般的です。Webページのタイトルにはtitleタグが使われますが、h1タグとtitleタグは同じ文言でも問題ないとされています。
 

hタグは階層順に記述する

hタグはh1からh6までありますが、数字が小さいほど重要という階層構造になっているので、h1から記述する必要があります。h1の次にh3を配置する使用方法は正しくありません。次のような階層順に記述しましょう。

例えば、カレーの作り方というタイトルの記事の場合、次のような階層になります。

hタグはデザイン目的で使わない

hタグはあくまでも見出しを示すためのタグです。文字の大きさを変えるためや見た目のデザイン目的で本文内のテキストにhタグを使うのは避けましょう。文章の論理構成が崩れてしまいます。

仮にユーザーにとっての見やすさに影響がなかったとしても、検索エンジンにとってはマイナスです。本文内で強調したい箇所には、hタグではなくstrongタグやbタグなど、適切なものを使用しましょう。
 

hタグの入れ子は正しいものを使う

hタグは、その中に他のタグを入れ子にする使い方ができます。ただし、hタグはブロックレベル要素のため、入れ子にできるタグは<a>、<b>、<span>、<br>などのインライン要素のタグのみになるので注意しましょう。

• 正しい例：<h3><b>h3</b>タグ</h3>
• 間違った例：<b><h1>h1タグ</h1></b>

また、hタグに入れるタグは、見出し用のタグとしてCSSでclass分けしましょう。本文内で使用するタグとは別に管理し、基本的には触らない運用を推奨します。
 

ここからはHTMLでのhタグの基本的な記述方法や、CSSでの色や文字の大きさなどの基本的な調整方法を紹介します。
 

hタグの基本的な記述方法

hタグはh1からh6までありますが、記述方法は同じです。<h1>～</h1>のように開始タグと終了タグで見出しとなるテキストを囲みます。

タグは大文字・小文字どちらでも記述可能ですが、小文字で記述するのが一般的です。また、必ず半角文字で記述しましょう。

• h1タグ：<h1>H1テキスト</h1>
• h2タグ：<h2>H2テキスト</h2>
• h3タグ：<h3>H3テキスト</h3>
• h4タグ：<h4>H4テキスト</h4>
• h5タグ：<h5>H5テキスト</h5>
• h6タグ：<h6>H6テキスト</h6>
   

hタグの色や文字の大きさをCSSで調整する場合

hタグの色や文字の大きさはCSSで調整しましょう。次のように、色は「color」で指定し、文字の大きさは「font-size」で調整できます。他にも「padding」で余白を調整したり、「border」で枠線を引いたりできます。

• <h1>【見出しタグの使い方】h1～h6の正しい使い分けについて</h1>
• padding: 0 0 0 10px; /*左の枠線と文字の余白を10pxにする*/
• border-left: solid 7px #2e8b57 /*左枠に7pxの緑色の線を引く*/
• font-size: 24px; /*文字の大きさを24pxにする*/
• line-height: 1.4; /*文字の行間を1.4にする*/
• color: #2e8b57; /*文字を緑色にする*/

ここでは、hタグを設定する際のコツを紹介します。コツを理解したうえで設定すると、ユーザーにとって見やすく、ページの概要がわかりやすい見出しを作成できます。
 

見出しだけで内容が伝わるようにする

見出しだけで内容が伝わると、流し読みでコンテンツの概要が把握できます。

ユーザーは、コンテンツを上から下まで順番に読んでくれるとは限りません。最初にスクロールしながら全体を流し読みする人も多いでしょう。そのときに目に止まるのが、hタグの見出しです。

hタグが設定されていれば、気になった見出しに戻って読み直すことも可能です。
 

長すぎる見出しは避ける

見出しに必要な情報を詰め込みすぎると、長くなってしまいます。見出しが長すぎると目に止まらず、スクロールされてしまいます。

見出しは簡潔さを保ちながらも、コンテンツの内容がしっかりと伝わるように工夫しましょう。文字数のルールや制限は特にありませんが、20文字以内にまとまっているとスッキリして読みやすくなります。
 

目次の見出しにページ内リンクをつける

目次から各見出しにリンクさせることで、ユーザーが目次を見て興味のある見出しに簡単に移動できるため、利便性が高まります。

WordPressでは、目次作成時に自動的にリンクも作成できるプラグインがあります。目次の見出しにリンクがついているコンテンツのほうが一般的になっているため、コンテンツにリンクがついていないとユーザーの離脱につながる可能性もあります。
 

hタグに画像を使う場合は注意する

hタグには、テキストだけでなく画像を使うことも可能ですが、hタグは「見出し」が主な役割であることから、テキストにしておいたほうが無難です。

h1タグを画像にすることで、テキストよりもユーザーの目をひく可能性がありますが、検索エンジンにWebページの内容が正確に伝わらないことがあります。

どうしてもhタグに画像を使いたい場合は、検索エンジンに伝わるようにaltタグで画像の説明を記載しましょう。
 

内容と関係ない見出しは使わない

ページのテーマとなるh1タグと関係のない見出しが設定されていると、ページの評価に悪い影響を与える可能性があります。例えば、ブログ記事の「まとめ」の見出しのあとに、「最近の投稿」や「カテゴリ一覧」などが見出しとして使われているようなケースです。

不必要な箇所で見出しを使うのは極力避けて、すべての見出しをh1と関連づけるように意識しましょう。
 

hタグは、ユーザーがコンテンツの概要を把握し、検索エンジンが適切にページの構造を理解するうえで重要な役割を果たしています。hタグの役割を理解したうえで適切に設定することで、ユーザビリティや検索エンジンからの評価の向上につなげられるでしょう。