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

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

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

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

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

  • hタグとは
  • hタグの効果とSEO上の役割
  • SEO対策に効果的なhタグの付け方
  • 効果的な見出しを作るテクニック

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


hタグとは

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

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

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

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

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

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

※WordPressでのhタグの設定方法
WordPressでのhタグの設定方法に関しては、『初心者必見!集客をアップさせるWordPressの投稿方法』で解説しているので確認しておこう。


1. hタグの2つの効果

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

  • デザインや見た目上の効果
  • SEO対策への効果

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

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

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

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

見出しタグのない文章

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

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

見出しタグのある文章

いかがだろうか。

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

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

1-1. SEO対策への効果

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

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

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


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

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

3-1. hタグの書き方

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

※Wordpressの見出しブロックを利用する場合
Wordpressのブロックエディターで投稿している場合は、見出しブロックを利用して設定しよう。見出しを入れたいブロックの右側の「+」をクリックする。

使用頻度の高いブロックが6つ表示される。ここに見出しブロックがあればそれをクリック。なければ、「すべて表示」をクリックして全リストを表示。

表示されたブロックの中から「見出しブロック」を選択。

挿入した見出しブロックに見出しを入力する。

見出しブロック上部の編集ツールの「H2」と書かれている部分をクリック。

ここで、「h3」「h4」といった階層を変更できる。

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

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

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

<h1>の次は<h2>、<h2>の次は<h3>という順番を守る

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

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

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

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

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

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

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

※hタグは装飾には使わない
時々、見た目を調整することだけを目的として、hタグを使用してしまう人がいる。

しかし、hタグはテキストの見た目を調整するためのものではなく、あくまでもページ上の階層構造をユーザーや検索エンジンにとって分かりやすく示すために使うものだ。

そのため、見た目の装飾のために使うことはやめよう。

テキストの見た目を調整したい場合は、以下のタグを組み合わせて使うようにしよう。

1
2
3
4
<b>テキスト</b> ※太字表示にするタグ
<em>テキスト</em> ※斜体表示にして強調を意味するタグ
<strong>テキスト</strong> ※太字表示にして強い強調を意味するタグ
<font size=”○○px”>テキスト</font> ※テキストのサイズを変えるタグ

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

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

2-1. h1タグの重要性

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

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

3-3. h1タグの使用回数

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

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

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

※h1とtitleタグには同じテキストを設定しておこう。
h1タグはSEOの観点から見ると、そのページの要素の中でも最重要と言えるものだ。そしてtitleタグも同じように、そのページ内で最も重要なテキストを示すためのタグである。

h1タグとtitleタグの違いは、後者は<head>~</head>の中に記載されるという点。検索エンジンの検索結果やSNSシェアの際に表示されるものだ。

どちらも狙うキーワードを記載する重要なもの。同じテキストを設定しておくことが望ましい。

詳しくは、『タイトルタグの最適化方法とSEOに効果的なタイトルのつけ方』も見て確認しておこう。

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

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

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

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

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

【正しい例】
h1タグの使い方とは?設定方法と使う場合の注意点も解説

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

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

【正しくない例】
h1タグとは?設定方法と使う場合の注意点も解説
見出しタグの設定方法と使い方とは?注意点も解説

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

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

【正しくない例】
h1タグ(見出しタグ)の使い方・注意点・設定方法・SEO効果・テクニック・デザインを解説

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

h1タグは画像も使用可能

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

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

  • altタグを設定する
  • 同じ画像を使いまわさない
  • 本文と関連のある画像を選ぶ

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

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

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

※原則的にはh1タグには画像は設定しない
検索エンジンロボットに記事の内容を正確に伝えるためには、画像よりもテキストでの記載が望ましい。画像の内容を検索エンジンロボットが正しく判断できるとは限らないからだ。

SEO的な観点から、h1タグにはやはりテキストを記載する方が良いだろう。

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • なぜWordPressがSEOに強いのかを解説する
  • WordPressがSEOに強い理由

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

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

※より効果的な見出しを作りたないならコピーライティングも学ぼう
見出しにどのような文言を設定したら効果的かという議論に関しては追求すればするほどキリがない。しかし、さらに多くの人に自分が作るコンテンツに触れてもらいたい場合は、コピーライティングのテクニックも有用だ。

興味があれば『コピーライティング初級講座』にも目を通してみよう。


5. まとめ

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

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

無料eBook:バズ部式マーケティング
広告費を1/10にして売上を倍増させる全手法

広告に頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているけれど、よく分からないと悩んでいませんか?

本書は弊社やクライアント様がコンテンツマーケティングに取り組み

  • ・SEOのみで月間100万PV集めた方法
  • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
  • ・CPLやCPAを大幅に改善した方法とそのからくり

など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

ぜひ、貴社のWEBマーケティングにもご活用ください。

eBookをダウンロード

コメントはこちらから

  1. はじめまして。いつも参考にさせていただいています。
    FX動画.com「http://fx-douga.com/」というサイトを作っているHiroと言います。
    今後、読みやすい文字の調整や記事の構成、また見出しの装飾について改善していこうと考えています。

    そこで質問なのですが、見出しに装飾を加えるために「style.css」に以下のコードを貼り付けました。

    ———————————————————————
    h1 {
    position: relative;
    padding: .25em 0 .5em .75em;
    border-left: 6px solid #3498db;
    }
    h1::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: ”;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #ccc;
    }
    ———————————————————————
    目的としては記事のページだけにHタグが反映されてばよいのですが、
    私が使っているワードプレスのテーマはトップページにの各所にHタグが使われています。
    その為、「style.css」にコードを追加するとトップページでHタグが使われている箇所の
    全てにもHタグ装飾が入ってしまいます。

    記事のページだけにHタグを反映させるにはどうしたらよいのでしょうか?
    教えていただけると助かります。よろしくお願いします。

  2. 非常に参考になりました。
    自分で設定しながらよりよいブログを作りたいと思います!

コメントは停止中です。