SEOに効くh1タグとは？見出しタグ（h1〜h6）の正しい使い方

見出しタグとは？（h1〜h6の基本）

HTMLにおける見出しタグ（heading tag）は、文章構造を示すための要素です。 <h1>が最も重要な見出しで、数字が大きくなるにつれて階層が下がっていきます。

<h1>ページのタイトル</h1>
<h2>セクションの見出し</h2>
<h3>サブセクションの見出し</h3>

これらを適切に使うことで、検索エンジンがページの構造を理解しやすくなり、SEOにも良い影響を与えます。

なぜ見出しタグがSEOに効くのか？

検索エンジンは、ページ内のテキスト構造からコンテンツの重要性やテーマを判断しています。 特に <h1> や <h2> などの見出しタグは、ページの主題を伝える重要な手がかりとなります。

たとえば、以下のようなメリットがあります：

• クローラーがコンテンツの構造を把握しやすくなる
• 特定キーワードの文脈を伝えやすくなる
• 読者にも視覚的にわかりやすい

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

1. <h1>タグは基本的に1ページに1つ

<h1>タグは、そのページの**最重要見出し（タイトル）**に使います。 多くの場合、記事タイトルやページタイトルに該当します。

<h1>SEOにも効く！正しい見出しタグの使い方</h1>

1ページに複数使うと構造が曖昧になるため、原則1つにとどめましょう。

ちなみに、昔はサイト全体でロゴ部分を<h1>タグでマークアップするケースが多く見られました。特にトップページではそれも一つの考え方ですが、現在ではページごとにタイトルに<h1>を使う方が構造的にもSEO的にも適切とされています。このあたりは今でも議論があるところですが、基本的にはページの内容を代表する要素に<h1>を使うのが望ましいとされています。

2. <h2>〜<h6>で構造を階層化する

<h2>は大見出し、<h3>はその中の小見出しというように、階層構造を守って使いましょう。

悪い例（飛び階層）：

<h1>タイトル</h1>
<h3>突然小見出し</h3> <!-- h2 を飛ばしている -->

良い例：

<h1>タイトル</h1>
<h2>セクション1</h2>
<h3>セクション1の補足</h3>
<h2>セクション2</h2>

3. キーワードを適度に含める

見出しタグ内に、狙っているキーワードを自然に含めましょう。 ただし、詰め込みすぎると逆効果なので、読みやすさを優先してください。

4. デザイン目的で見出しタグを使わない

見出しタグは構造を示すタグであり、見た目のスタイル付けにはCSSを使いましょう。

悪い例：

<h3 style="font-size: 12px;">小さな文字にしたいだけ</h3>

このような場合は、<div>や<span>にCSSを適用すべきです。

ロゴに<h1>タグを使うべきか？

かつては、多くのWebサイトでロゴに<h1>タグを使うのが一般的でした。これは、ロゴが「そのサイトの象徴」であり、ユーザーがどのサイトにいるかを示すために重要と考えられていたからです。

しかし現在では、ページごとの主題を明確にすることの重要性が認識されるようになり、特にコンテンツが豊富なサイトやブログなどでは、ページタイトルに<h1>を使用するのが推奨されています。

トップページの場合：

トップページに限っては、サイト全体の代表としてロゴに<h1>を使用してもよいとする考え方もあります。

<!-- トップページの例 -->
<h1 class="site-logo">
  <a href="/">MySite</a>
</h1>

ただし、その下に適切な<h2>タグでキャッチコピーや主要コンテンツのタイトルを示す構造が必要です。

下層ページの場合：

下層ページでは、ロゴは通常の<div>や<span>などでマークアップし、<h1>タグはそのページのタイトルや記事のタイトルに使用すべきです。

<!-- 下層ページの例 -->
<div class="site-logo">
  <a href="/">MySite</a>
</div>
<h1>サービス紹介</h1>

このように、ロゴに<h1>を使うかどうかは、ページの役割に応じて判断するのが最適です。

セクションタグ（<section>）との関係

HTML5では、コンテンツを意味ごとに区切るための<section>タグが導入されました。<section>は、それ自体が独立した意味を持つコンテンツのまとまりを示すため、通常はその中に見出しタグ（<h2>など）を含めて使います。

<section>
  <h2>サービス紹介</h2>
  <p>当社の主なサービスをご紹介します。</p>
</section>

このように、<section>と見出しタグを組み合わせることで、検索エンジンや支援技術（スクリーンリーダーなど）にとってコンテンツの意味構造が明確になります。

なお、複数の<section>をページ内で使う場合でも、ページ全体のタイトルには<h1>を使い、各セクションの見出しには<h2>〜<h6>を使うのが基本です。

また、HTML5の仕様では、<section>ごとに<h1>を使うことも技術的には可能とされています。これは各セクションが独立した意味を持つコンテンツブロックと見なされるからです。

ただし、SEOやアクセシビリティの観点では、1ページに複数の<h1>を使うと構造が分かりにくくなることがあり、推奨されない場合もあります。そのため、実務上はページ全体で<h1>は1つに抑え、セクションごとの見出しには<h2>や<h3>を使うのが一般的です。

まとめ：SEOにもユーザーにもやさしい見出しタグの使い方を

見出しタグは、SEOだけでなくユーザーの読みやすさにも直結する重要な要素です。 構造的で論理的なページを作ることで、検索順位もユーザー満足度も高めることができます。

ぜひ今日から、「見た目」ではなく「意味」に着目して、正しく見出しタグを使ってみましょう。