見出しタグ(H1〜H6)の正しい使い方|初心者向けに解説

見出しタグ(H1〜H6)の正しい使い方|初心者向けに解説

Webサイトの記事を書くときに目にする「H1」「H2」「H3」。なんとなく文字を大きくする機能だと思って使っていませんか?

見出しタグには、ページの内容を階層ごとに整理する役割があります。使い方を間違えると、読者が内容を追いにくくなる原因にもなります。

H1〜H6それぞれの役割と、迷いやすい使い分けを順番に確認していきましょう。

目次

見出しタグとは?

見出しタグとは、Webページ内のタイトルや章、節を表すHTMLの要素です。

H1からH6まで6段階あり、数字が小さいほど上位の見出しになります。

たとえば、本に置き換えるとイメージしやすくなります。

  • H1:本のタイトル
  • H2:章のタイトル
  • H3:章の中にある節
  • H4〜H6:さらに細かい項目

文章をただ並べるのではなく、どの内容がどこに属しているのかを整理するための目印と考えると分かりやすいです。

見出しタグは文字の大きさを決めるものではなく、ページの構造を示すために使います。

H1〜H6はどう使い分ける?

基本となるのはH1・H2・H3です。一般的なブログ記事であれば、この3つだけで十分なケースも多くあります。

H1はページ全体のメインタイトル

H1は、そのページが何について書かれているのかを示す最上位の見出しです。

ブログ記事では、記事タイトルがH1として設定される構成がよく使われます。

WordPressではテーマによって記事タイトルが自動的にH1になることもあるため、本文の中であらためてH1を設定する必要があるかはテーマの仕様を確認しましょう。

H2は大きな話題を分ける

H2は、記事の内容を大きなまとまりに分けるために使います。

たとえば「見出しタグとは?」「正しい使い方」「よくある間違い」のように、記事を章ごとに分けるイメージです。

H3はH2の内容をさらに分ける

H3は、H2の中に複数の話題があるときに使います。

「H2:見出しタグの使い方」の中に「H3:H1の使い方」「H3:H2の使い方」と配置するような形です。

H4〜H6も同じ考え方ですが、細かく分けすぎるとかえって読みにくくなるため、必要な場合だけ使えば十分です。

H1・H2・H3の見出しタグの階層構造

見出しタグは順番に使う

見出しタグで大切なのが階層を意識することです。

基本は次のように組み立てます。

H1
└ H2
 ├ H3
 ├ H3
└ H2
 └ H3

H2の下にH3を置くのは自然ですが、H2の次にいきなりH4を置くと階層が分かりにくくなります。

また、「文字を少し小さくしたいからH3にする」といった使い方も避けます。文字サイズやデザインは、見出しの階層とは別に調整するものです。

見出しタグとSEOの関係

見出しを適切に設定すると、読者が記事の内容を把握しやすくなります。

検索エンジンにとっても、ページのメインタイトルや各見出しは内容を理解する手掛かりの一つです。

ただし、H1やH2にキーワードを入れるだけで検索順位が上がるわけではありません。見出しだけをSEO対策として考えるのではなく、その見出しの下に読者が求めている内容が書かれていることが大切です。

タイトルタグとの違いが分からない場合は、こちらも確認しておくと整理しやすくなります。

正しい見出しタグの使い方と階層を飛ばした間違った例

見出しタグでよくある間違い

初心者が迷いやすいのは、次のような使い方です。

  • 文字を大きくするためだけにH2を使う
  • H2からH4へ見出しレベルを飛ばす
  • 本文のほとんどを見出しにしてしまう
  • 内容と関係のないキーワードを見出しへ詰め込む

見出しを作るときは、「この文章はどの話題の中に入るのか」を考えるだけでも階層を整理しやすくなります。

見出しはSEOのためだけに作るものではありません。まずは読者が記事の流れを理解しやすい構造を作ることが基本です。

まとめ

見出しタグは、Webページの内容を分かりやすく整理するためのものです。

H1をページ全体のタイトル、H2を大きな章、H3をその中の小さな項目と考えると、初心者でも使い分けやすくなります。

最初からH6まで使おうとする必要はありません。まずはH1・H2・H3を正しい順番で使い、読みやすい記事構成を作るところから始めましょう。

SNSで友だちに教える

この記事を書いた人

Web制作会社でWebディレクターとして働く傍ら、Webサイト制作やWordPress、SEO、Web集客について発信しています。難しい専門用語をできるだけ使わず、初心者にもわかりやすい解説を心掛けています。「やってみたい」を「できた!」に変えるお手伝いができれば嬉しいです。

コメント

コメントする

目次