hタグ（見出しタグ）の使い方と絶対に知っておくべき注意点

Webコンテンツにおけるhタグ（見出しタグ）とは、読み手にも検索エンジンにもページの内容を分かりやすく伝えるためのもの。正しく使うことで、大きな効果を発揮する。

その一方で、hタグは使い方を間違えるとサイトに悪影響を及ぼすため、注意が必要だ。コンテンツを作り始めたばかりの人の多くは、hタグの使い方を間違えてしまう。

私たちがわかりやすいコンテンツを追求するうえで、何よりも大切にしているのが「見出し（hタグ）のつけ方」だ。hタグを上手に活用することで、ユーザーにとってわかりやすいコンテンツにすることができるし、SEOでもポジティブな結果を得ることができる。

そこでこのページでは、そのような良い結果を得るために、hタグに関して絶対に知っておくべき次の事柄に関して詳しく解説する。

とても重要なものなので、じっくりと読み進めて欲しい。

１.hタグとは

hタグとは、ユーザーと検索エンジンの双方にページ内のコンテンツ構成を正しく伝えるために使用する技術のことだ。「見出し」を設定するタグということで、通称として「見出しタグ」と呼ばれることもある。

HTMLでは以下のようなタグで記述する。

hタグは1~ 6まであり、数字が若いほど重要度が上がる。

hタグを設定すると、h1～h6に至るまでそれぞれ視覚的な装飾もつく。数字の大きいと文字が大きく表示され、数字が小さくなるにつれて文字のサイズも小さくなる。また、使っているデザインテーマによって様々なデザインが設定可能だ。

例えば、「バズ部」ではh2タグとh3タグは以下のようにあらわされる。

詳しい見出しの効果については次の章で解説する。

２. hタグの2つの効果

hタグの効果には、主に以下の二つが数えられる。

1つずつ詳しく説明しよう。

2-1. デザインや見た目上の効果

hタグには、そのページの文章構造をユーザーに正確かつ分かりやすく伝える効果がある。

参考に以下の図を見て欲しい。

もし、hタグを使用せずにコンテンツを作成すると、そのページはこのようにメリハリのないページになり読みにくいものになってしまう。

しかし、hタグを適切に使用すると次の図のように、同じ文章でも格段に読みやすく理解しやすくなる。

いかがだろうか。

hタグを適切に使うと、そのページ内の文章の構成がはっきりとなり、ユーザーは、ページの内容をストレスなく理解できるようになるのだ。

さらに複数のサイズの見出しを使い分けると、より正確に、そのコンテンツの階層構造をユーザーに伝えることができるようになる。

2-2. SEO対策への効果

もう一つの重要なものとして、SEO対策への効果が挙げられる。hタグは読み手（人間）だけでなく検索エンジンロボットに対しても同じように、そのコンテンツの構造を正確に伝える効果があるのだ。

正しくhタグを設定することで、そのコンテンツのインデックスがより適切に行われるようになる。

具体的なSEOへの効果や設定方法に関しては、第4章で解説しているので参考にしてほしい。

３. 基本的なhタグの設定方法

それではまずは、基本的なhタグの設定方法について解説しよう。

3-1. hタグの書き方

第1章でも解説した通り、hタグはHTML上で以下の通りに記述する。

3-2. hタグの順番のルール

hタグには順番のルールがあり、それを守らなければ効果は最大限に発揮されない。

hタグは<h1>から始まり<h6>まであるが、<h1>の次に来るのは<h2>、<h2>の後に来るのは<h3>というように順番を守らなければいけない。

繰り返しになるが、hタグはコンテンツの階層構造を正しく示すために使うものだ。hタグの順番が守られていないということは、その階層構造を正しく示せていないということになる。それでは、結果的にSEOにマイナスの影響を与えてしまう。

例えば正しい例としては以下のような設定が挙げられる。

この場合はきちんと<h1>～<h4>までの階層が正しく設定されている。

設定が間違っている場合は例えば以下の通りだ。

こちらの場合、冒頭から<h4>タグが設定されており、その次に<h2>の後に<h4>などとなっており正しく設定されていない。タグの順序が間違えているのもさることながら、内容的にもhタグと合っていないことが分かる。

先ほどの例と内容は全く変わらないが、階層が間違っているために正確な情報が伝わらない例だ。このように設定してしまうとGoogleから正しい評価が得られず、結果として記事の評価を下げてしまう。

コンテンツ作成を始めたばかりの方は、特にhタグの順番を無視して設定してしまいがちなので注意しよう。

４. SEO対策に効果的なhタグの設定方法

それでは、ここからはより具体的に、SEO対策に効果的なhタグの設定方法を解説していこう。

4-1. h1タグの重要性

hタグの中でも特に重要なのがh1タグの存在だ。h1タグはいわば記事コンテンツの指標となるもので、Googleの検索エンジンロボット「クローラー」がページ内容を理解するために必要なためだ。

そのため、h1タグは簡潔かつ正確に記事内容を反映した記述をする必要がある。多くの場合、h1タグはタイトルに設定することが自然といえる。

4-2. h1タグの使用回数

h1タグは一つの記事に対して1つ設定することが望ましい。前章でも解説した通り、hタグは記事コンテンツを分かりやすく表す重要なもの。つまり、そのページでもっとも重要なテキストに対して使用するタグなのだ。

公式にはGoogleは、h1タグは複数回使用してもSEO上問題ないとしている。とはいえ、「記事コンテンツを分かりやすく表す重要なテキスト」であるh1タグが複数回現れる記事は構造上分かりやすいとは言えないだろう。

ほとんどのWordPressテーマでは、自動的にタイトルに<h1>が付くようになっていることからも、h1タグは一つの記事に1度だけ使うことが無難だ。

4-3. h1タグの適切な使い方

この章では、より具体的なh1タグの使い方を解説していこう。

h1タグには狙うキーワードを含める

h1タグには、必ず狙うキーワードを含めるようにしよう。

例えば、「h1タグ　使い方」をいう記事を書くとする。この場合h1タグには必ず「h1タグ　使い方」というキーワードを含める。以下はその例だ。

この場合のh1タグには「h1タグ　使い方」との記述がある。

よくある間違いとして、以下の例も見てみてほしい。

以上のテキストでは、記事内容としては【正しい例】とほとんど変わらないが「h1タグ　使い方」というキーワードは含まれていない。狙ったキーワードは必ずそのまま使う用にしよう。

とはいえ、狙うキーワードを盛り込みすぎて不自然にならないよう注意する必要がある。例えば、以下の例を見てほしい。

上のように、狙うキーワードの候補のキーワードを不自然に並べてしまうと、逆にGoogleからの評価が下がってしまう恐れがあるため注意しよう。

h1タグは画像も使用可能

h1タグには画像を使用することも可能だ。例えばアイキャッチ画像にh1タグを設定するなどのことも間違いではない。

h1タグに画像を使う場合は、以下のことを気を付けよう。

画像をh1タグに使う場合は、altタグを必ず設定しよう。altタグとは画像の内容を補足的に表すテキスト情報のことだ。検索エンジンが画像の中身を読み取れなかった場合に、このテキストにより内容を伝えるという意味がある。

また、同じ画像をサイト内で使いまわさないことも重要だ。これは、記事タイトルを使いまわさないのと同じ理屈である。h1に設定した画像は記事の内容を表したものなので、その画像が使いまわされてしまうとGoogleからの評価が下がってしまう可能性があるためだ。

同じように、h1タグに設定した画像は、必ず本文と関連のある画像を選ぼう。

h1タグの適切な文字数とは

h1タグの適切な文字数は決められていない。ただし、h1タグを記事タイトルとして設定する場合は、検索結果の見え方なども考えて32文字程度にすることが望ましいだろう。

なぜなら、検索結果は常に30～35文字程度までしか表示されないためだ。

35文字以上など長いテキストにするとしても、32文字までの部分に重要なキーワードを含めるのが良いだろう。ただし、あまり冗長なタイトルにすると重要なキーワードが分かりづらくなる可能性があるため、長くても35文字程度に抑えておくことをおすすめする。

4-4. h2タグにもなるべくキーワードを含める

h2タグにもなるべく狙っているキーワードを含めるようにしよう。

ここまで解説した通り、h1タグは主に検索エンジンに記事の内容を伝えるために重要なタグとなる。それに対し、h2以下は読者にとって読みやすい・分かりやすい記事になっているかどうかが重要だ。

そのため、h2には狙っているキーワードは必ずしも入れなくても良いと言われている。あくまでもh2以下はコンテンツの質を重視すべきだということだ。

とはいえ、h2タグにも狙っているキーワードを入れることが望ましいだろう。もちろん不自然になる必要はないが、狙っているキーワードをh2タグに含めることで、読者へも情報が整理されやすくなる。結果的には、読者にとってもSEOにとってもよい影響が望めるからだ。

自然な範囲であれば、h2タグにもなるべくキーワードを含めるよう心がけよう。

５. 効果的な見出しを作るテクニック

ここからは、効果的な見出しを作るテクニックを解説する。

多くの人は、コンテンツ中の見出しの文言を決めることに時間を使わず、何も考えずに決めてしまう。しかし、どういう見出しにするかで、そのコンテンツの伝わりやすさも理解のしやすさも大きく変わる。

それが結果的に、そのページの平均滞在時間にも影響し、見た人に満足してもらいソーシャルボタンを押して拡散してもらえるかどうかにも影響する。

見出しに設定する文言はそれだけ重要なものだ。

そこで、最後に効果的な見出しを作るための基礎的な２つのテクニックをご紹介しよう。

5-1. 見出しを見ただけで内容が分かるようにする

見出しを見ただけでその章の内容が分かるようにしよう。

WEBユーザーの中には、最初にページにアクセスした時に一度ページの一番下までスクロールして全体の内容を理解しようとする人も少なくない。

そうやってスクロールした時に「おっ、これは気になるから読んでみよう」というようなひっかかりがなければ、そのユーザーはそのままページから離脱してしまう。

その状況を防ぐために有効なのが、見出しを見ただけで全体の内容が分かるようにすることだ。

例えば、以下はこのページ内のhタグを設定している文言を抜き出したものだ。見出しをみただけで、このページでどのような情報を得られるのかが明確に分かるようになっている。

これらの見出しのうち、どれか一つででも「おっ、これは気になる」とユーザーに思ってもらえれば、それをきっかけにして記事全体を読んでもらえるかもしれない。

このように見出しは、本の目次のように考えて設定しよう。

5-2. 見出しは文の形にしない

見出しは文の形にしないようにしよう。

前述したように、見出しは一瞬読み流した時に「おっ、これは気になる」と思って立ち止まり、読み進めてもらえるように促す役割がある。そのような場合、どれだけ魅力的な見出しだとしても、文字数が多いと、引っかかる前に読み飛ばしてしまう。

つまり、見出しは短い方が目に留まりやすいということだ。

見出しを短くするには、見出しは文の形ではなく、最後は名詞でおわる文言を考えるのが有効だ。参考までに以下の２つの文言を見比べてみてほしい。

後者の方が、具体的で興味を持ってもらいやすく、なおかつ前者より文字数も少ない。 

このように、見出しは魅力的かつ、流し読みする人が一瞬で内容を把握できる程度の短さになるように、常にこころがけよう。

６. まとめ

hタグは、あなたがせっかく作ったコンテンツをユーザーに分かりやすく伝えるために、そして検索エンジンに適切に評価してもらうために非常に重要なものだ。

ここで記している内容をしっかりと頭にいれて、コンテンツ作成を行うように徹底しよう。