WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

hタグとは?見出しタグ<h1>~<h6>のSEOを意識した正しい使い方

このエントリーをはてなブックマークに追加

hタグとは、ページの見出しを定義するために使われる見出しタグのことを言い、hはheading(見出し)を意味します。hタグは、コンテンツ階層に応じてh1からh6までを使うことが出来ます。ユーザー可読性だけでなく、検索エンジンのコンテンツ理解を促す役割をSEOで持ちます。

<h1>タグとは、HTMLの1つで、きちんと記述することで人間にも検索エンジンにも、ページの内容を伝えやすくすることができます。また、見出しタグであるhタグは<h1>から<h6>の6種類あり、適切な順番で記述する必要があります。

<h1>はSEOで重要とよく聞くけど、そもそもhタグって何?具体的にどうするのが正解なの?と疑問に思われている方も多いのではないでしょうか。

今回は、SEOにとって重要な要素のひとつである見出しタグ(hタグ)について、概要から正しい記述方法まで、まるっとご紹介したいと思います。

誰でも簡単にSEO対策ができるIntimateSEO

hタグとは

hタグとは、ユーザーや検索エンジンに対して文章の中で重要な文章を伝えるために、HTMLでマークアップを行う見出しタグです。見出しタグのhはheadを表し、見出しタグの種類は<h1>から<h6>まで6種類あり、ページの構成に合わせて使用します。きちんと記述することで、人間にも検索エンジンにも、ページの内容を伝えやすくなります。

h1~h6タグのメリット

hタグのメリットについてもう少し詳細に見ていきましょう。

文章が読みやすくなり内容が理解しやすくなる

hタグを利用することで、文章構成がわかりやすくなり、ユーザーはページの内容を理解しやすくなります。

デジ研の「【2023年】SEOとは?自分でやるSEO対策と初心者向けガイド」というページでhタグを使用した場合と使用しなかった場合の例を見てみましょう。

まずは、hタグを使用した例ですが、下記のようになります。

hタグを設定した場合の例

参考ページ:【2023年】SEOとは?自分でやるSEO対策と初心者向けガイド

見出しがわかりやすく読みやすいと思います。

では一方で、hタグを利用しなかった場合はどうでしょうか?

hタグを設定しない場合の例

どこが見出しなのかわかりずらく読みにくいはずです。

このようにhタグを利用することで、文章構成がわかりやすくなり、ユーザーはページの内容を理解しやすくなります。

目次となりどこまで読んだかわかりやすくなる

hタグで見出しを作成し、WordPressであれば自動で目次を生成してくれるプラグインを入れることで、読む前にどのような内容が記載されているのかわかるようになります。

また、どこまで読んだかもわかりやすくなるため、ユーザビリティの向上にもなります。

SEO対策にもなり検索エンジンからの評価も受けやすくなる

hタグを適切に利用することで、検索エンジンがページをクロールする際にページ内容や構成を理解しやすくなり、正しくページを理解してくれやすくなります。これにより、SEOが期待できます。

特に見出しの中で最も高い階層にある<h1>タグは、検索エンジンがページの内容を理解する上で非常に重要なタグです。<h1>タグは別名、大見出しとも呼ばれ、サイトの内容(コンテンツ)を検索エンジンや、訪問してきた検索ユーザーに対して、適切に伝える役割を担っています。

多くのサイトでは、階層の高い見出しほど、大きくしたり派手に装飾したりしています。デジ研でも、下記のように装飾を設定しています。

correct-usage-of-heading-tag-01

h1~h6タグの基本的な使い方

hタグを使用するにあたってはいくつかの重要なポイントがあります。
ここではhタグの正しい使い方や使用上の注意点を紹介します。

記述の仕方

記述の仕方は下記になります。

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タグの順番

hタグの記述は順序を守ることが大切と言われています。

ダメな記述例① <h1>から記述しない

<h2>これでもう、迷わない!お弁当のおかずレシピ10選</h2>
<p>お弁当のレパートリー、悩みますよね…(コンテンツテキスト本文)</p>

<h3>長期保存OKなおかず</h3>
<p>作り置きができるおかずは重宝します…(コンテンツテキスト本文)</p>

<h4>冷凍保存で楽ちん♪ミニハンバーグ</h4>
<p>ひき肉200g…(コンテンツテキスト本文)</p>

上記内容で記述した場合、下記のようになります。

hタグの順番のダメな記述例①h1から記述しない

このように、いきなり<h2>から記述を始めるのは良くありません。hタグは、本の目次のようなものです。そのため、<h1>がないのは、タイトルのない本のようなものです。

階層を意識して、必ず<h1>から記述をするようにしましょう。

ダメな記述例② 適切な順番でタグを記述しない

<h1>これでもう、迷わない!お弁当のおかずレシピ10選</h1>
<p>お弁当のレパートリー、悩みますよね…(コンテンツテキスト本文)</p>

<h3>長期保存OKなおかず</h3>
<p>作り置きができるおかずは重宝します…(コンテンツテキスト本文)</p>

<h2>冷凍保存で楽ちん♪ミニハンバーグ</h2>
<p>ひき肉200g…(コンテンツテキスト本文)</p>

上記内容で記述した場合、下記のようになります。

hタグの順番のダメな記述例② 適切な順番でタグを記述しない

このような順序の入れ変わりや、<h1>→<h2>→<h4>のような歯抜け状態の記述は避けましょう。

正しい記述例

<h1>これでもう、迷わない!お弁当のおかずレシピ10選 …(コンテンツの大見出し)</h1>

お弁当のレパートリー、悩みますよね…(コンテンツテキスト本文)

<h2>長期保存OKなおかず…(コンテンツの中見出し)</h2>
<p>作り置きができるおかずは重宝します…(コンテンツテキスト本文)</p>

<h3>冷凍保存で楽ちん♪ミニハンバーグ…(コンテンツの小見出し)</h3>
<p>ひき肉200g…(コンテンツテキスト本文)</p>

上記内容で記述した場合、下記のようになります。

hタグの順番の良い記述例

このように正しく順番を守り、使用するのが適切なhタグの使い方です。

ダメな記述例③ <h1>タグで全てを記述する

<h1>これでもう、迷わない!お弁当のおかずレシピ10選 …(コンテンツの大見出し)</h1>
<h1>お弁当のレパートリー、悩みますよね…(コンテンツテキスト本文)</h1>
<h1>長期保存OKなおかず…(コンテンツの中見出し)</h1>
<h1>作り置きができるおかずは重宝します…(コンテンツテキスト本文)</h1>

<h1>冷凍保存で楽ちん♪ミニハンバーグ…(コンテンツの小見出し)</h1>
<h1>ひき肉200g…(コンテンツテキスト本文)</h1>

h1タグが一番重要だからと言って全ての文章をh1にするのは良くありません。h1タグは1ページに1つとし、先ほどのように適切な順番で記述しましょう。

ダメな記述例③ h1タグしか利用しない

Webデザイン上でのhタグ

Webデザインをする上で、<h1>や<h2>タグの文字の大きさが、テキスト装飾やテキストサイズに合っているからと、安易に使用するのは避けましょう。なるべくhタグはテキストで記述し、デザインやサイズは、CSSなどで調整を行うようにしましょう。

SEO対策におけるhタグの記述方法

hタグの中でも<h1>タグはページの大見出しタグという役割のほかに、正しく使うことで、SEOにおいても重要なタグとなっています。国内の検索エンジン利用者シェアの60%を超えるGoogleは、<h1>タグについて適切に使用することを呼び掛けています。

Googleと<h1>タグの関係

Googleの検索エンジンロボット、通称クローラーにとっても<h1>タグは、ページ内容を理解するための重要な判断要素です。

見出しタグを乱用してしまうと、「どのようなページなのか」「何が重要なの情報なのか」などがクローラーにうまく伝わらず、情報の整理が出来なくなってしまう可能性があります。

クローラーは、<h1><h2><h3>…の順番で重要度を区別し、hタグで囲まれたテキストを見出しとして捉え、本文とは別のものと判断します。つまりは、数字が小さければ小さいほど、タグに囲まれた部分のテキスト内容がそのページにとって重要なものだと、クローラーが認識するということになります。

Googleの推奨する適切な<h1>タグ

Googleは検索エンジンスターターガイド内で適切な見出しタグの使い方について説明しています。
Googleの示す<h1>(見出しタグ)についての記述ポイントは下記のとおりです。

  1. ページの構成と関係なく見出しタグでテキストを囲わない
  2. <em>や<strong>が適切な箇所で見出しタグを使用しない
  3. 見出しタグのサイズの使い分けを不規則にしない
  4. ページ内で見出しタグの乱用はしない
  5. ページ内のすべてのテキストを見出しタグで囲わない
  6. 見出しタグをスタイル変更のためだけに使用しない

<h1>タグの適切な使用回数は1ページにひとつ

先ほどダメな記述例で、<h1>タグの利用は1ページに1つと説明しましたが、なぜ1つなのでしょうか。

HTML5の場合、<h1>を複数回使用することが認められています。しかし、一方でGoogleは、<h1>タグが複数あることに関して、「どの<h1>要素が本来重要なのかが判断できなくなり、本来の大見出しとしての重要度や価値が薄まる。」と公式に発言しています。

つまり、検索エンジンの中でもトップシェアのGoogleに適切にページを認識してもらい、多くのユーザーに情報を発信したいのであれば、大見出しとなる<h1>タグの使用回数は、1ページ毎にひとつに絞る必要があるのです。

<h2>以下に関しては複数回使用しても問題はありませんが、階層を意識して、適切に使用するようにしましょう。

<h1>タグにはキーワードを含める

<h1>タグには必ずターゲットキーワードを含めることが重要です。しかし、ターゲットキーワードを盛り込みすぎるのは良くありません。キーワードを盛り込みすぎると不自然な文章となり、検索エンジンからの評価が下がることもあります。そのため、キーワードを含みながらページの内容を簡潔に表すテキストを設定することをおすすめします。

また、titleタグの内容と併せて<h1>タグでも対策キーワードを使用することで、キーワードの重要度もクローラーへ伝わりやすくなります。ここで気になるのはtitleタグのテキストと<h1>タグの内容が同一でもいいのか?ということです。

基本的に問題はありませんが、titleタグと<h1>タグにはそれぞれ適切な文字数があります。titleタグは検索結果、<h1>タグはページ内で表示されるものですので、その点に留意して設定すると良いでしょう。

また、あなたのサイトが<h1>を全ページにわたって企業ロゴなどの画像に使用しているのであれば、それは検索エンジンに対して対策キーワードをアピールするチャンスを逃しているという事になります。

<h1>は各ページにおいてターゲットキーワードを含ませ、ページを簡潔に説明する適切な内容を設定しましょう。

しかし、いくら検索エンジンに対して重要な対策キーワードが伝わりやすくなるからと言って、<h2>やその他の見出しタグに対しても過剰に使用するのはやめましょう。大切なのは、コンテンツの質と、情報量、そしてコンテンツの文章構造がきちんと整っている事ですので、過剰に見出しタグへキーワードを含めることが無いよう気をつけましょう。

⇒企業秘密大公開!コンテンツマーケティングを成功させるタイトルの作り方

<h1>タグに画像を使用するには

<h1>に画像を使用することは基本的に問題ありません。ですが、なるべくテキストで記述するほうがベターだと思われます。

どうしても<h1>を画像に設定する場合、気を付けるべきポイントは、画像のイメージタグにalt属性をきちんと設定することです。

クローラーは画像に含まれるテキストを読むことはできません。例えばimg画像内に「デジ研」というテキストが書かれていても、alt属性になにも記述していなければクローラーは<h1>の内容を空白だと認識してしまいます。

alt属性には対策キーワードを含めた文章を記述しましょう。

<h1><img src=”画像URL” width=”●●●” height=”●●●” alt=”画像の説明(h1テキスト)”></h1>

キーワードを意識しすぎて、画像の内容に関係のないテキストをalt属性に設定することは避けましょう。キーワードを過剰に使用することはGoogleのウェブマスター向けガイドライン(品質に関するガイドライン)に反する可能性があります。

また、下記のように<h1>のテキストをCSSを使用し、text-indentなどで画面外に飛ばしたり、隠すことはスパム行為になります。

HTML

<h1>h1テキストh1テキストh1テキスト</h1>

CSS

h1 {
text-indent: -9999px;
background: url(“画像URL”) no-repeat center top;
}

h1タグは画像でも問題ない!画像を設定する時のポイント3つ!
alt属性とは?SEOにおける役割と効果的な使い方

<h1>タグの文字数

<h1>タグの文字数には特に制限などは設けられていません。しかし、長くなればなるほど、キーワードの重要度が薄まってしまいます。<h1>に設定するテキストは全角30~60文字程度に収めることをおすすめします。

<h1>タグの配置箇所

<h1>タグの配置箇所は、メインコンテンツにしましょう。そのページの内容の主題はメインコンテンツ部分となるので、ページの主題を表す<h1>タグの配置箇所はその部分にするのが適切です。

先ほども述べたように、ヘッダーに会社のロゴや、キャッチコピーなどを共通して<h1>と指定している場合は、ページのコンテンツと、大見出しである<h1>タグの内容が合致していないことになってしまいますので、その場合は変更した方が良いでしょう。

また、最初から見出しタグの設定をされているブログやCMSなどを使用する場合、ブログのタイトルが<h1>に設定されていたり、投稿日時が<h2>に設定されていたり、意図せず適切ではない記述になってしまうケースも多いため、注意が必要です。

ダメな記述例①

<h1>ブログのタイトル</h1>
<h2>ブログの記事タイトル</h2>
<h3>~<h6>ブログの本文中で使用するタグ

ダメな記述例②

<h1>ブログのタイトル</h1>
<h2>ブログの記事投稿日付</h2>
<h3>ブログの記事タイトル</h3>

正しい記述例

<h1>ブログの記事タイトル</h1>
<h2>ブログの記事内で使用する中見出しタグ</h2>
<h3>~<h6>ブログの記事内で使用する小見出し

いま一度、自身のブログやCMSの見出しタグ設定がどのようになっているのかを確認してみるのも良いかもしれません。ブログ・CMSによっては設定変更が出来ないものもあるかもしれませんが、変更が可能な際には、設定を変更しておくのがおすすめです。

hタグに強調タグを使用すること

hタグはコンテンツの見出しタグなので、コンテンツの本文に使用するタグを併用するのは不適切と言われています。

タグの併用例

<h2>冬は<strong>とても</strong>寒い<h2>

このようにテキストを強調するタグ<strong>や、同様に<em>をhタグのテキスト内に使用するのは避けましょう。
また、<strong>タグや<em>タグは使い過ぎるとGoogleからスパム行為と見なされ、ペナルティを受ける場合がありますので、なるべく使用しないように気を付けましょう。

強調タグ(bタグ、emタグ、strongタグ)のルールと使用する際のポイント

hタグの順番

2018年4月13日のGoogleオフィスアワーで「h1、h2、h3などのhタグの順番が間違っていた場合、問題になるのか?」という質問ができました。それに対してGoogleのジョン・ミュラー氏は「問題にならない。検索エンジンはページの内容を理解するためにhタグを多少は使っているが、必ずしも正しい順番である必要はない。」と答えました。

これに対して元Google社員のペドロ・ディアス氏は「GoogleにとってH1, H2, H○などの順番は重要なのか?重要ではない。でもユーザビリティやアクセシビリティにとっては重要だ。なのにどうして修正しないのか?」と述べています。

つまり、2人の意見から考えるとユーザーを考慮したサイトを設計することが重要であると言えます。

hタグを正しい順番で使うことはSEOの観点からは良いことです。しかし、正しい順番で利用した際にユーザビリティが下がってしまう場合、サイトに訪れるユーザーのことを考えて順番を変更する必要もあります。

そのため、ユーザビリティも考慮して設定を行うようにしましょう。

ユーザビリティを向上するためのh1~h6タグの記述方法

ここまでSEOにおけるhタグの利用について解説しましたが、最後にユーザビリティ向上のポイント解説します。

簡潔であり見ただけで内容がわかるようにする

先ほどSEO対策についてでも説明をしましたが、簡潔に見出しを設定しましょう。そして、設定する際には見出しを見ただけで内容がわかるようにしましょう。

例えば、はじめに見たデジ研の「【2023年】SEOとは?自分でやるSEO対策と初心者向けガイド」のページに設定している見出しを見てみましょう。

hタグを簡潔で見ただけで内容がわかるようにする

参考ページ:【2023年】SEOとは?自分でやるSEO対策と初心者向けガイド

まずは、SEOの理論編と実践編の2つに大きく分けて、理論を学びたい人、実践的なスキルを学びたい人それぞれに対して内容がわかりやすいようにしています。そして、それぞれについてどのような内容が記載されているのか簡潔でわかりやすく記述しています。

このように、ターゲットに対してどのような情報が記載されているページなのかわかりやすく記述しましょう。

見出しが長くなる場合は<br>タグで改行を

見出しが非常に長くなってしまい見にくくなってしまう場合は、改行したい場所に<br>タグを設置しましょう。これにより、下記のように設置した箇所で改行されることになりユーザが見やすくなります。

見出しで<br>タグを利用する例

hタグに関するよくある質問

hタグは何回使ってもよいのか?

h2からh6は何回使っても問題ありません。h1は最上位の大見出しとなるので原則1ページ1回の使用が推奨ですが、セクション要素ごとにh1を複数回使ってもペナルティはありません。誤用するリスクを感じたらh1は1ページ1つの原則に基づいて運用するとよいでしょう。

hタグに画像を使ってもよいでしょうか?

hタグに画像を使っても問題ありませんが、画像にALT属性を設定しましょう。ただし、画像の全てを検索エンジンが理解できると思わず、できるだけテキストなどでhタグを構成することをオススメします。

文章の装飾の為だけにhタグを使ってもよいでしょうか?

hタグは文章の中で意味があるポイントに使うのが推奨です。見た目だけのためにhタグを使わない方が良いです。

hタグの効果的な使い方はありますか?

文章の階層構造を適切に表すようにh1からh6を使うとよいでしょう。hタグを使うことで、hタグの内容が検索結果に表示されることやユーザーや検索エンジンに文章構造の適切な理解を促すことができます。

おわりに

見出しタグを適切に使うという事は、検索エンジンにそのページのコンテンツや文章構造が伝わりやすくなる事、SEO的にはキーワードの重要性をアピールすることが出来ること、また、訪問したユーザーにとっては、文章構造が視覚的に見やすくなり、読みやすくなるという点があるという事をお伝えしました。

これまでのまとめとして、重要な点を以下にまとめます。

  • hタグは数字が小さいほど重要度が高く、<h1>タグは大見出しタグと呼ばれる。
  • hタグは、<h2>から始まるなど、数字を飛ばしての使用や、<h1>→<h3>といった歯抜け状態での記述を避けて、順番を守り適切に使用する。
  • hタグを大きく表示されるからなどの理由で、装飾目的で使わない。また、見出しタグの装飾はCSS内で指定する。
  • hタグの中でも大見出しである<h1>タグは各ページに1つ。<h2>や<h3>に関しても数回にとどめる。
  • hタグには対策キーワードを含める。タイトルと同様の内容でもいいが、文字数に配慮して多少工夫しても構わない。(含めすぎないよう注意!)なるべく共通部分のヘッダーロゴなどでの使用は避ける。
  • hタグに画像を指定する際は、必ずalt属性を設定する。またCSSを使用しての隠しテキストは使用しない。
  • hタグの文字数は30~60文字以内にする。
  • hタグの設置個所はページのメインコンテンツ部分に設置にする。
  • hタグ内に<strong>や<em>タグなどの強調タグは使用しない。

見出しタグは適切に使用することでSEOでも効果があると言われているタグです。以上の事項を気を付けながら、検索エンジンや、訪問ユーザーにとって内容が伝わりやすいコンテンツを目指して、見出しタグの最適化をしましょう!

なお、今回ご紹介した見出しタグ以外でもSEOにおける重要なポイントはまだまだあります。その他のポイントについては下記記事で紹介していますので、こちらを参考にしてください。

【2023年】SEOとは?自分でやるSEO対策と初心者向けガイド
このエントリーをはてなブックマークに追加
The following two tabs change content below.
Avatar photo

デジタルマーケティング研究所編集部

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。
Avatar photo

>最新記事 by デジタルマーケティング研究所編集部 (全て見る)

お役立ち資料ダウンロード
SNSでフォロー
問い合わせ数5倍 1,000社以上の実績
ウルロジ EC事業特化型 物流アウトソーシング
セルマーケ
月額3万円で始められるSEO対策なら「IntimateSEO」

今話題のAIによるコンテンツ自動生成機能も!SEO対策に本当に必要な機能だけを搭載した使いやすさとコストパフォーマンスに優れたWeb集客支援ツールです。


Contactお問い合わせ

Webマーケティングに関わる施策全般をワンストップで
ご提供します。
お気軽にご相談ください。

関連資料ダウンロードはこちら
サービスのお問い合わせはこちら

Webマーケティング最新ニュースのレポートや無料セミナーの先行案内が届く、お得なメルマガ配信中!

Webマーケティング最新情報をお届けするDMSメールマガジン
東京営業所
東京都武蔵野市御殿山1-1-3 クリスタルパークビル2F
電話番号 0422-77-1087 FAX番号 0422-57-2761
大阪営業所
大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
電話番号 06-7176-3367 FAX番号 06-7176-3368
Copyright © 2024 DM SOLUTIONS Co.,Ltd. All rights reserved.