- hタグの意味や使い方
- hタグの細かなルールや注意点
この記事の著者：伊藤 寛規
月間5,000万PV越えのWebサービス「mybest」でコンテンツ制作責任者を経験後、弁護士ポータルサイト「ベンナビ」のSEO担当として、コンテンツSEOやテクニカルSEO、新規メディア立ち上げ、CVR/CTR改善などに携わる。ユーザーファーストとSEO最適化を両立したコンテンツ制作が得意。
この記事の著者：渡邉 志明（シュワット株式会社 代表取締役）
SEO記事制作代行会社の経営者。
これまで複数のwebメディアの立ち上げ～黒字化にPM・SEO責任者として携わる。コンテンツSEOによるメディアのグロースやインハウス化支援が得意。
hタグとは、Webページの見出しを表すHTMLタグのことです。
記事をわかりやすくするほか、SEOにおいても重要な要素ですが、以下のような疑問を持っている方もいるのではないでしょうか？
- hタグの役割や重要性がわからない
- hタグはどうやって使えばいい？
- hタグを効果的に活用する方法は？
本記事では、hタグの概要と重要性、正しい使い方や効果的に設定するポイントなどを解説します。
これから自身のブログを始めたい方や、SEOの基礎について知りたい初心者の方は、ぜひ参考にしてください。
- 狙ったキーワードで検索上位がとれていない
- 戦略的にSEO対策をしたい
- 検索順位改善だけでなく売上・利益にもつなげたい
現在、上記のようなお困りごとがありましたら、SEOコンサルティングで圧倒的な成果を創出してきた我々『ULTRA』へご相談ください。SEO対策にとどまらず売上・利益などビジネス的な成果を追求し、戦略設計から施策の実行、インハウス化支援まで、ニーズに合わせた最適なプランで強力にサポートいたします。
hタグとは？h1～h6までで何が違う？
hタグとは、Webページのタイトルや見出しを示すHTMLタグのことです。「head」の頭文字をとって「hタグ」と呼ばれています。
hタグにはh1/h2/h3/h4/h5/h6の6種類があり、それぞれで役割が異なります。
hタグのなかでもh1タグは、そのページのタイトルを表すため、ページ内に1つしか存在しないのが基本です。
h2タグからh6タグまでは、記事の見出しを表し、数字が小さいほど見出しの階層が浅く、数字が小さいほど深い階層の見出しであることを指します。
hタグのメリットやSEOにおける重要性
hタグは、SEOにおいても重要です。
なぜなら、hタグには検索エンジンに内容をわかりやすく伝える役割があるからです。
Googleなどの検索エンジンは、クローラーというプログラムを使ってWebページの情報を集め「ユーザーの検索意図に合った内容か」「ユーザーにとってわかりやすいページか」などを評価しています。
hタグを使って見出しを設定しておくことで、検索エンジンがページの構造を正しく理解しやすくなり、サイトの評価や検索順位の向上につながりやすくなるのです。
したがって、上位のhタグ（h1やh2）にはコンテンツの対策キーワードを適切に含むようにしましょう。
また、hタグを使用することで、ユーザーがページの構成を把握しやすくなるメリットもあります。
hタグで記述したテキストは、本文テキストよりも大きく太く表示されるので、ユーザーは情報を整理しながら記事を読み進めることが可能です。
そのほか、hタグで設定した見出しは目次として表示することもできるため、ユーザーは目次を見ただけで自分の知りたい情報がどこに書いてあるのかがわかります。
ユーザーにとって読みやすい記事は、結果として読了率や離脱率の改善につながり、SEOにも良い影響をもたらす可能性があります。
なお、SEOにおけるhタグやその他の箇所への適切なキーワードの含み方について詳しく知りたい方は、「SEOキーワードの正しい入れ方｜実例や対策キーワードの選び方まで」を参考にしてください。
hタグの正しい使い方｜h1～h6を使うときの基本ルール
hタグを使用する際は、以下のルールに従うことが大切です。
- hタグはコンテンツの見出し部分に使う
- hタグは「h1/h2/h3/h4/h5/h6」の順番で使う
それぞれの使い方について、以下で詳しく確認していきましょう。
hタグはコンテンツの見出し部分に使う
hタグは、重要なポイントがひと目でわかるよう、コンテンツの見出し部分に使用するのが基本です。
hタグは、以下のように見出し部分を囲む形で使用します。
<h1>タイトル</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>hタグを使ってページの主な要点をまとめることで、ユーザーがページの流れを理解しやすくなったり、検索エンジンが正しい構造を把握しやすくなったりします。
ユーザーや検索エンジンが情報を体系的に理解する手助けとなるよう、適切に設定しましょう。
hタグは「h1/h2/h3/h4/h5/h6」の順番で使う
hタグは、数字が小さい順に使いましょう。
h2の次にh1を使う、h4の次にh2を使うなど、順番を守らずに使用してしまうと情報が散乱してしまい、ユーザーや検索エンジンが混乱してしまいます。
ページの階層構造を正しく示すため、h2は大見出し、h3は中見出し、h4は小見出し…のように順番どおりに使用することが大切です。
hタグをルールに従ってマークアップすると、以下のようになります。
<h1>hタグとは？正しい使い方や重要性も解説！</h1>
<h2>hタグの概要</h2><p>-----本文-----</p>
<h2>hタグの正しい使い方</h2><p>-----本文-----</p>
<h3>1.多用しない</h3><p>-----本文-----</p><h3>2.順番を守る</h3><p>-----本文-----</p>なお、一般的にはh5タグとh6タグはあまり使われることはありません。
階層が深くなればなるほど、見出しとしての重要性は低くなるため、h2タグからh4タグまでを使ってうまくページ内の見出し構成を考えるのがおすすめです。
【応用編】hタグを使いこなすために知っておくべきこと
hタグを適切に使いこなすために、以下のポイントを押さえておきましょう。
- 画像にh1タグを設定する際はalt属性の設定も必須
- hタグ内にはインライン要素の設置が可能
- hタグ内での改行も可能
- hタグにはリンクも設定できる
それぞれのポイントについて、以下で詳しく解説します。
画像にh1タグを設定する際はalt属性の設定も必須
画像にh1タグを設定する際は、必ずalt属性を設定しましょう。
alt属性とは、画像の説明文を表示するために使用するものです。
画像が読み込めないときに代わりのテキストを表示したり、検索エンジンに画像の内容を伝えたりする役割があります。
トップページなど、画像がh1タグになるケースはしばしばあるのではないでしょうか。
検索エンジンは、画像そのものの内容を読み込むことができないため、画像にhタグを設定しただけでは、空欄の見出しとして扱われてしまい、見出しの内容を正しく理解できません。
そこでalt属性を使用して「画像に何が写っているか」「その見出しのポイント・トピックは何か」を検索エンジンがしっかりと把握できるようにする必要があるのです。
h1タグに画像を設定する際の記述方法は、以下のとおりです。
<h1><img src=”画像のURL” alt=”hタグとは？正しい使い方や重要性も解説！”/></h1>なお、ユーザーのサーバー環境や回線の状況によっては、hタグを設定した画像がうまく表示されないことがあります。
画像が表示されないと、ユーザーがページの構造を把握しづらくなってしまうので、hタグには基本的に画像ではなくテキストを使用したほうがよいでしょう。
hタグ内にはインライン要素の設置が可能
インライン要素とは、テキストの一部として表示される要素のことです。
インライン要素と対になる要素としてブロック要素があります。
- インライン要素：見出しや文章、段落の中の”一部分”のこと
- ブロック要素：文章や行、段落・見出しなど”行全体のまとまり”のこと
テキストを太くして強調するstrongタグやbタグ、テキストを斜体にするemタグなどが該当します。
hタグにインライン要素を含めることで、表示されるテキストのバリエーションが広がり、よりわかりやすくリッチなコンテンツにすることが可能です。
例として、strongタグを使う場合の記述方法を確認しましょう。
<h1><strong>hタグとは？</strong>正しい使い方や重要性も解説！</h1>ただし、strongタグやemタグなどをhタグ内で使用することは望ましくないともいわれています。
場合によってはGoogleにスパム行為とみなされ、検索順位の低下やサイトの削除などのペナルティを受ける可能性があるため、使い過ぎには注意しましょう。
hタグ内での改行も可能
brタグを使えば、hタグ内で改行することができます。
本来、見出しは簡潔にまとめることが求められますが、どうしても長くなってしまう場合は改行してユーザーが読みやすいように工夫しましょう。
hタグにbrタグを使用する場合の記述例は以下のとおりです。
<h1>【プロが解説！】<br>hタグを効果的に使う方法とは？</h1>上記のように記述すると、ページ上では以下のように表示されます。
| 【プロが解説！】 hタグを効果的に使う方法とは？ |
改行をうまく活用することで、ユーザーが記事を読みやすくなることもあるでしょう。特に、スマホ表示で見出しが長く感じる場合や、改行の位置が不自然な場合は改行タグの使用も検討するのがおすすめです。
ただし、見出しはを簡潔な文章でまとめるのが理想です。
「見出しが長くなったら改行すればいい」と思わずに、まずは見出しを短くまとめられないかをよく検討しましょう。
hタグにはリンクも設定できる
aタグを使用することで、hタグ内にリンクを追加することができます。
hタグでリンクを設定する場合の記述方法は以下のとおりです。
<h2><a href=”リンクさせたいページ・場所”>hタグの概要</a></h2>リンクを適切に設定すれば、ユーザーが知りたい情報にアクセスしやすくなり、利便性が高まります。必要に応じて、リンクを設定するとよいでしょう。
hタグを効果的に設定するポイント7つ
hタグをより効果的に使用するために、以下のポイントを覚えておくとよいでしょう。
- h1タグの重要性を理解する
- 見出しだけで結論がわかるようにする
- キーワードはできるだけ左側に盛り込む
- 文字数が多くなりすぎないように注意する
- hタグを多用しない
- HTMLとCSSを用いてhタグにデザインを実装する
- 見出しにリンクを設定して目次を作成する
それぞれのポイントについて、以下で詳しく解説します。
h1タグの重要性を理解する
h1タグはそのページのタイトルを表すHTMLタグです。
検索エンジンが記事の内容を理解するために欠かせないものであり、SEOの観点ではhタグのなかで重要度が最も高いといわれています。
h1タグには、ページ全体の内容を簡潔かつ正確にまとめるようにしましょう。
加えて、ページの対策キーワードを含むことも大切です。
文字数制限は特にありませんが、検索結果に表示される文字数が30字〜35文字であることを考えると、32文字前後に設定するのがおすすめです。
h1タグとtitleタグの違い
ページのタイトルにつけられるタグには、h1タグのほかにtitleタグも存在します。
h1タグとtitleタグの違いは以下のとおりです。
| タグ | 役割 | 表示場所 |
|---|---|---|
| h1タグ | ・検索エンジンに見出しとして認識させる ・ページにアクセスしたユーザーに内容を伝える | ページにアクセスしたあと |
| titleタグ | ・検索エンジンに記事のタイトルとして認識させる ・検索結果画面を見たユーザーにクリックを促す | ページにアクセスする前（検索結果画面など） |
h1タグが記事を読んでいる人向けに設定されるものに対し、titleタグはまだ記事を読んでいない人向けに設定されるものです。
多くのページがh1タグとtitleタグでほぼ同じ文章を使用していますが、必ずしも同じ内容にしなくてもかまいません。
それぞれの役割の違いを理解したうえで、適切に使い分けることが大切です。
なお、タイトルの付け方について詳しく知りたい方は、「SEOに強いタイトルの付け方や文字数｜ポイントや例文まで」を参考にしてください。
見出しだけで結論がわかる状態がベスト
見出しの内容は、「見出しを見ただけで内容がある程度わかること」を意識して設定しましょう。
ネット上のユーザーは、ほとんどの場合で記事の文章を隅から隅まで読むことがありません。
結論がわかりにくい見出しや文章になっていると、その分記事の途中で離脱されてしまうリスクも高くなるでしょう。
その点、見出しだけで結論がわかるように設定すれば、ユーザーや検索エンジンがページの流れをスムーズに理解でき、わかりやすいコンテンツに仕上げることができます。
また、ライターに執筆などを依頼している場合も、ライターが見出しにまとめた結論を軸に、情報を整理しながら執筆を進められるので便利です。
キーワードをできるだけ左側に盛り込む
SEOで検索上位を狙っているキーワードをできるだけ見出しの左側に盛り込むことで、ユーザーや検索エンジンの目に留まりやすくなります。
人は文章を左から右に読む傾向があるので、対策キーワードを左側に配置したほうが目に触れられやすくなるのです。
また、Googleのクローラーも記事を左から右へ読み込んでいくため、キーワードを意識して見出しを設定することは、検索順位の向上にもつながるとされています。
ただし、キーワードを意識しすぎると不自然な日本語になり、見出しが読みづらくなる可能性があります。
不自然にキーワードが盛り込まれた見出しは、返ってSEOに悪い影響をもたらす可能性があるので注意しましょう。
見出しにキーワードを盛り込む際も、あくまで読みやすさを優先することを忘れないようにしてください。
文字数が多くなりすぎないように注意する
hタグを設定するときは、内容を簡潔にまとめることを意識しましょう。
見出しが長すぎると結論がぼやけてしまい、その見出しで何を伝えたいのかがわかりにくくなってしまいます。
記事を流し読みしているユーザーにも興味を持ってもらえるよう、端的かつ魅力的に内容を要約することが大切です。
どうしても見出しが長くなってしまう場合は、ユーザーが読みやすいようbrタグで改行することも検討しましょう。
hタグが多すぎる状態はSEO的に望ましくない
hタグを多用すると、検索エンジンがページの内容を正しく理解するのが難しくなってしまいます。
「hタグは何回まで」という明確な基準があるわけではないので、情報量に応じて適切な見出し数を設定することが大切です。
ただし、h1タグは原則として1ページにつき1度のみ使うようにしましょう。h1タグを複数回使用すると、どのh1タグが重要なのか検索エンジンが判断しづらくなってしまいます。
また、多用することでそれぞれの重要度や価値が下がってしまうおそれもあるので注意が必要です。
h1タグは原則1回のみ、h2〜h6タグは適切な数だけ使用するようにしましょう。
HTMLとCSSを用いてhタグにデザインを実装する
hタグをより目立たせたい場合は、HTMLとCSSを使ってデザインを施しましょう。
単にhタグを設定するだけでも見出しは強調されますが、見た目が単調になってしまう可能性も否めません。
HTMLやCSSを使えば、見出しの色を変える・背景色を加えるなどの装飾をつけられるので、見た目が美しくなり視認性も向上します。
hタグをデザインする際は、ユーザーがページの構造を理解しやすいよう、見出しの階層が低くなるにつれて色や装飾を控えめにするとよいでしょう。
見出しにリンクを設定して目次を作成する
目次と各見出しをリンクでつなげれば、ユーザーが目次から気になる見出しに簡単に移動できるので、利便性が高まります。
目次と各見出しをリンクでつなげる場合の基本的な手順は以下のとおりです。
まずはジャンプ先の見出しにid属性を設定します。
以下の例では「hタグとは？」というh2タグに「midashi1」というid属性を設定しています。
<h2 id=”midashi1”>hタグとは？</h2>ジャンプ元である目次にaタグのhref属性を設定します。
以下のように、①で設定したid属性の直前に「#」をつけ、ジャンプ先の見出しを指定しましょう。
<p><a href=”#midashi1>hタグとは？</a></p>これで、目次の「hタグとは？」をクリックすると、指定したh2タグにジャンプさせることができます。
hタグに関するよくある質問
ここからは、hタグについてよくある質問をまとめています。
hタグについての理解をより深めるために、ぜひ参考にしてください。
hタグとpタグの違いは何ですか？
hタグは見出しを示すのに対し、pタグは段落を表すものです。
hタグで見出しを記述したあと、pタグで見出しの本文を記述します。
記述例は以下のとおりです。
<h1>hタグとは？正しい使い方や重要性も解説！</h1>
<p>hタグとはどのようなものなのか、気になっている方も多いでしょう。本記事では、hタグの概要や正しい使い方、重要性を解説します。</p>
<h2>hタグとは？</h2>
<p>まずは、hタグの概要を解説します。</p>hタグで記述したテキストは、pタグのテキストよりも大きく太く表示されます。
h1タグを使わないとどうなりますか？
h1タグを使わないと、検索エンジンがページの内容を正しく理解できません。
h1タグは、検索エンジンがページの構造を把握するうえで最も重要な材料といわれています。
h1タグを使わなかった場合、検索エンジンがページ全体の流れを体系的に整理できず、評価されづらくなってしまうのです。
h1タグは、必ず1ページにつき1回使用するようにしましょう。
hタグの中にdivタグを使うことはできますか？
hタグのなかでdivタグを使うことはできません。
divタグには、囲んだ部分を1つの要素としてグループ化する役割がありますが、以下のようにhタグ内に組み込むことはできないので注意しましょう。
<h2><div>hタグとは？</div></h2>まとめ
hタグとは、Webページの見出しを表すタグのことで、数字が小さいほど階層が高いことを示します。
hタグを使用することで、検索エンジンがページの構造を正しく把握する手がかりになったり、ユーザーが情報を体系的に理解しやすくなったりします。
特に、h1タグはhタグのなかでSEO上最も重要度が高いといわれているので、必ず使用しましょう。
hタグを設定するときは、端的かつ正確に結論をまとめること、対策キーワードを盛り込むことなどを意識することも大切です。
使いすぎに注意しながら、ページが正しく評価されるよう上手に活用しましょう。
- 狙ったキーワードで検索上位がとれていない
- 戦略的にSEO対策をしたい
- 検索順位改善だけでなく売上・利益にもつなげたい
現在、上記のようなお困りごとがありましたら、SEOコンサルティングで圧倒的な成果を創出してきた我々『ULTRA』へご相談ください。SEO対策にとどまらず売上・利益などビジネス的な成果を追求し、戦略設計から施策の実行、インハウス化支援まで、ニーズに合わせた最適なプランで強力にサポートいたします。
