見出しタグ(hタグ)の正しい使い方を解説。h1~h6を使いこなそう!

ホワイトボードで説明する女性

わかりやすい記事ページにするために欠かせない存在の「見出しタグ(hタグ)」。

見出しタグによって構成が整理された記事は、ユーザーやGoogleに良い影響をあたえます。

そんな重要な役割がある見出しタグにもかかわらず、正しく使えていなくてもったいないサイトも目立ちます。

今回は、見出しタグの正しい使い方について解説していきます。

見出しタグとは?

始めに、見出しタグを使いこなすために、見出しタグについて簡単にお伝えしておきます。

まず、見出しとは、本文の内容をわかりやすくまとめるための目印になります。

見出しについてイメージできない方は、本をイメージしてもらうとわかりやすいかもしれません。

一般的な本は、ひたすら文章が書かれているだけでなく、「第1章○○」「第2章○○」「第3章○○」といったように区切られているはずです。

この「第1章○○」の部分が見出しになります。

見出しの文章はそのまま目次となることが普通なので、「見出し=目次」と言っても間違いではありません。

(当記事は、プラグイン「Table of Contents Plus」によって本文中の見出しが目次として自動で表示されています。)

 

見出しについての説明は以上になります。

そして、見出しタグとは、サイトページに見出しを付けるためのWeb技術になります。

見出しタグには以下のようにh1~h6までの6種類が存在し、数字が小さい見出しほど記事内での重要度が高くなります。

  • h1…大見出し(一般的に記事のタイトルになる)
  • h2…中見出し
  • h3…小見出し
  • h4…小見出し
  • h5…小見出し
  • h6…小見出し
見出しタグを設定するHTMLコード

h1~h6までの見出しタグを設定するHTMLコードは以下になります。

  • h1…<h1>見出しとなる文章</h1>
  • h2…<h2>見出しとなる文章</h2>
  • h3…<h3>見出しとなる文章</h3>
  • h4…<h4>見出しとなる文章</h4>
  • h5…<h5>見出しとなる文章</h5>
  • h6…<h6>見出しとなる文章</h6>

wordpressなら、「TinyMCE Advanced」プラグインを入れると、ビジュアルエディタのアイコンで簡単に各見出しを設定することができます。

wordpressでの見出しタグ設定

見出しタグの正しい使い方

それではここからは、本題である見出しタグの正しい使い方について解説していきます。

見出しタグを正しく使う最大のポイントは、数字の小さな見出しから順番に使ってまとめることです。

正しい見出しタグの使い方の例

見出し1(タイトル)

見出し2

ーーー見出し3

ーーー見出し3

見出し2

ーーー見出し3

ーーー見出し3

ーーーーーー見出し4

ーーーーーー見出し4

見出し2

まず、記事ページ内で最重要となる見出しのh1ですが、h1は記事タイトルに当たるので、h1は記事本文内で使うことはありません。

なので、実際に記事内で使う見出しタグはh2~h6になります。

h2はタイトルの次に重要な中見出しになるため、記事内のメインの見出しになります。

そして、h2タグで設定した項目をさらに細かく分けてまとめたいときはh3タグを使います。

もし、h3タグで設定した項目をさらに細かく分けたいのであればh4タグを使います。

見出しタグが正しく使われた記事のわかりやすい例を作成したので見てみましょう。

正しい見出しタグで構成された記事ページ例

ダイエットに成功するために大切な3つのこと【見出し1(h1タグ・タイトル)】

①食事管理をする【見出し2(h2タグ】

ーーー栄養バランスのとれた食事を心がける【見出し3(h3タグ】

ーーー夜食をしない【見出し3(h3タグ】

②適度な運動をする【見出し2(h2タグ】

ーーー有酸素運動をする【見出し3(h3タグ】

ーーーーーーウォーキング【見出し4(h4タグ】

ーーーーーー水泳【見出し4(h4タグ】

ーーー無酸素運動をする【見出し3(h3タグ】

ーーーーーー腹筋【見出し4(h4タグ】

ーーーーーースクワット【見出し4(h4タグ】

③睡眠をしっかりとる【見出し2(h2タグ】

「②適度な運動をする」の見出し2を見ると、

適度の運動の内容を具体的にした「有酸素運動」「無酸素運動」の見出し3があり、

「有酸素運動」をさらに具体的にした「ウォーキング」「水泳」の見出し4

「無酸素運動」をさらに具体的にした「腹筋」「スクワット」の見出し4

といったように、「見出し2⇒見出し3⇒見出し4」の順番になっていることがわかります。

この順番の逆になる、「見出し3⇒見出し2」「見出し4⇒見出し3」などは見出しの使い方として誤りとなります。

見出しタグは必ず正しい順番で使うようにしましょう。

 

ちなみに、見出しタグですが、実際に使う見出しタグはh2とh3がほとんどです。

たまにh3の補足としてh4タグを使うときがあるぐらいです。

あまりに長文の記事でもない限り、使用するタグはh2~h4ぐらいがまとまりやすくて見やすくなることを覚えておくといいでしょう。

見出しタグを使用するときの注意点

注意点を伝える人

見出しタグを使うときの他の注意点についても確認しておきましょう。

h1タグの使用は1ページに1回にする

お伝えしてきたように、見出し1に当たるh1タグは記事やトップページのタイトルとなるので、同じページh1タグが2つ以上あることは好ましくありません。

h1タグはタイトルを決めた時点で自動で設定されるので、自分でh1タグを設定することはほとんどありません。

h1タグを同ページに複数設定していてもペナルティを受けることはないようですが、記事内に自分でh1タグを使ってしまわないようにしましょう。

文字を強調したり装飾するために使わない

見出しタグを設定した文字は目立つようになるので、記事内の文字を装飾する目的で見出しタグを使う人がいます。

ですが、これは誤りです。

見出しタグは記事ページ全体をわかりやすくまとめるためのもので、文字を装飾するためのものではありません。

もし、記事のあらゆるところで見出しタグがバラバラに使われてしまうと、記事の構成もバラバラになってどんな内容の記事かわかりにくくなってしまいます。

文字の装飾と見出しの設定はきちんと分けるようにしましょう。

長すぎない端的な文章にまとめる

見出しは記事内容を端的にまとめたものなので、長すぎる文章になってしまうのは避けたいところです。

長すぎる見出しは読んでいる読者を疲れさせてしまうことになります。

パッとみただけで書いている内容がわかる見出しにすることを心がけましょう。

まとめ

見出しタグが正しく使われた記事は、圧倒的に構成がわかりやすくなって読むユーザーの利便性をあげることができます。

実際に、Googleは以下のように、見出しが設定された記事ページはユーザーのためになることを公式ガイドラインで定めています。

見出しタグはタグに囲まれているテキストをページ上の通常のテキストよりも大きく表示するため、ユーザーにとってはそのテキストが重要であるという視覚的な手がかりとなり、見出しテキストの下に続くコンテンツの内容について理解しやすくなります。

Search Console ヘルプ

また、見出しにはGoogleのクローラーに記事の内容を正確に伝える役割もあります。

見出しタグを正しく使えば、SEO効果も期待できるでしょう。

ぜひ今回お伝えしてきたを参考にし、見出しタグを使いこなしていきましょう!

 


ブログランキングに参加しています!
クリックして応援してもらえると記事更新の励みになるのでよろしくお願いします。

↓ ↓ ↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください