先生と生徒の会話形式で理解しよう

生徒

「HTMLの見出しタグって、文字を大きくするためのものなんですか？」

先生

「文字を大きくする役割もありますが、一番大切なのは文章の構造を伝えることですよ。」

生徒

「構造って、検索結果にも関係あるんですか？」

先生

「とても関係があります。見出しタグはSEOにも影響するので、順番や使い方が重要なんです。」

1. HTMLの見出しタグとは？

HTMLの見出しタグとは、ページの中で「ここからここまでが何について書かれているか」を示すための目印です。h1からh6まであり、数字が小さいほど重要度が高い見出しになります。これは本の「タイトル」「章」「小見出し」と同じ考え方です。検索エンジンも人と同じように、見出しを見て内容を理解します。

2. h1タグの役割とSEOの基本

h1タグはページ全体のタイトルを表します。このページで一番伝えたい内容を簡潔に書く場所です。Googleなどの検索エンジンは、h1を見て「このページは何の話か」を判断します。そのため、h1にはページ内容を正確に表すキーワードを入れることが重要です。h1は基本的に1ページに1つだけ使います。


<h1>HTML 見出しタグとSEOの関係</h1>

ブラウザ表示

h2タグは、大きな話題ごとに内容を分けるための見出しです。本でいうと「第1章」「第2章」のような役割になります。h2を正しく使うことで、検索エンジンは記事の中身を理解しやすくなります。また、読んでいる人も内容を素早く把握できるため、読みやすさが向上します。


<h2>見出しタグの基本ルール</h2>
<p>ここでは見出しタグの考え方を説明します。</p>

ブラウザ表示

h3からh6は、h2の中をさらに細かく分けたいときに使います。例えば、料理のレシピで「材料」「作り方」を分けるようなイメージです。いきなりh4を使うのではなく、順番を守って使うことが大切です。順番が正しいと、検索エンジンもページ構造を正しく理解できます。


<h2>見出しタグの使い分け</h2>
<h3>h3タグの使いどころ</h3>
<p>h3はh2の中の小見出しです。</p>

ブラウザ表示

SEOとは、検索結果で上に表示されやすくする工夫のことです。見出しタグに適切な言葉を入れると、検索エンジンが内容を理解しやすくなります。ただし、無理にキーワードを詰め込みすぎると、読みづらくなるため注意が必要です。自然な文章の中で使うことが大切です。

階層構造とは、見出しの親子関係のことです。h1の下にh2、その下にh3という順番を守ります。これは建物の設計図のようなものです。順番が崩れると、検索エンジンも人も迷ってしまいます。正しい階層はSEOだけでなく、アクセシビリティにも良い影響を与えます。


<h1>HTMLの基礎</h1>
<h2>見出しタグ</h2>
<h3>SEOとの関係</h3>

ブラウザ表示

見出しを大きくしたいだけでh1やh2を使うのは間違いです。見た目はCSSで調整し、意味は見出しタグで表します。また、h1を何度も使うと、検索エンジンが混乱します。見出しは文章の案内板だと考えると理解しやすいでしょう。

まずは紙に記事の流れを書き出し、タイトルと話題を整理しましょう。その後、それぞれに見出しを付けると自然な構造になります。見出しだけ読んでも内容が分かる状態が理想です。これを意識するだけで、SEOにも読みやすさにも強いページになります。