h1タグのSEOは文字の大きさではなく見出しの階層から考える
公開日： 執筆：佐藤
h1タグは、文字を大きくするためではなく、ページ全体の主見出しを示すために使います。大きな文字にしたいかどうかでh1、h2、h3を選ばず、ページ、節、小節という内容の階層に合わせます。文字の大きさや色はCSSで調整します。
h1を追加しただけで、検索順位が上がるとは限りません。SEOで先に整えるのは、何について書かれたページなのかを一つに絞り、その答えを見出しの順序で追える構造です。
h1からh6は見出しの重要度を段階で示す
HTML 4.01の仕様は、見出し要素をh1からh6までの六段階とし、h1を最も重要な見出し、h6を最も低い段階の見出しと定義しています。見出しは、そのあとに続く節の内容を簡潔に表します。
Googleの検索エンジン最適化スターターガイド（PDF）も、見出しタグの段階を使い分けると、内容に階層構造を持たせられると説明しています。見出しは、ページの構成をつかみ、読み進める手掛かりになります。
ページの中心となる題名をh1、その題名を構成する節をh2、h2の内容をさらに分ける小節をh3と考えると、役割を決めやすくなります。見出しの番号は、文字の大きさの番号ではありません。
文字を大きくする目的では見出しタグを選ばない
ブラウザーは通常、段階の高い見出しを大きく表示します。しかし、その見た目はHTMLが示す意味そのものではありません。HTMLで内容の構造を決め、CSSで表示を決めます。
次のCSSは、見出しの表示を調整する説明用の仮例です。
h1 {
font-size: 28px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
三つの数値は標準値ではありません。サイトの本文幅、書体、行間、画面の大きさに応じて決めます。見た目を変えるたびにh1をh2へ、h2をh3へ変えると、表示上の都合で内容の階層まで変わってしまいます。
一文や語句を強調したいだけなら、見出しではなくstrong要素やem要素を使います。ページ内のすべての文章を見出しへ入れたり、装飾だけを目的に見出しを増やしたりしません。
h1、h2、h3はページ、節、小節の順に使う
たとえば、業務用エアコンの修理について一ページで説明するとします。次の見出しは、構造を示すための仮例であり、実在する会社やページではありません。
<h1>業務用エアコンの修理</h1>
<h2>修理できる症状</h2>
<h3>冷風が出ない場合</h3>
<h3>室内機から水が漏れる場合</h3>
<h2>修理を依頼する前の確認</h2>
<h3>型番を確認する</h3>
<h3>症状が出た時刻を記録する</h3>
h1はページ全体の主題を示します。二つのh2は、その主題を「症状」と「依頼前の確認」に分けます。それぞれのh3は、直前のh2を詳しく分けています。
ここで「型番を確認する」だけを大きく見せたいからといって、h3をh1へ変えると、ページ全体の主題と小節が同じ段階になります。先に内容の親子関係を決め、表示はあとからCSSで整えます。
見出しの段階を飛ばす前に節の関係を見直す
h1の次にh3があり、そのあいだにh2がない場合は、h3が何を詳しく説明しているのかを確認します。h2に当たる節が必要なら追加し、小節ではないなら見出しの段階を改めます。
見出しを上から並べたとき、次のように内容の親子関係が読める状態を目指します。
h1 ページの主題
h2 主題を構成する節
h3 節を分ける小節
h3 節を分ける小節
h2 主題を構成する別の節
段階を一つも飛ばさないことだけを目的に、内容のない見出しを足す必要はありません。番号を機械的にそろえるのではなく、見出しと、そのあとに続く内容の関係を確かめます。
title要素とh1要素の役割を混同しない
HTMLのtitle要素とh1要素は別の要素です。HTML 4.01の仕様では、title要素を文書の題名としてhead要素の中へ置きます。h1要素は本文の主見出しとしてbody要素の中へ置きます。
二つの文言を必ず一字一句同じにする必要はありませんが、別の主題を示すべきではありません。title要素では文書全体の内容を識別できる題名を書き、本文のh1ではページの主見出しを示します。言い回しを変える場合も、読者が同じ内容だと判断できる範囲にそろえます。
見出しだけを抜き出してページの構造を確認する
既存ページを直すときは、最初にh1、h2、h3の文言だけを表示順に抜き出します。本文を読み込む前に、主見出し、節、小節の関係が分かるかを確認するためです。
主題が二つあるなら、見出しを調整する前にページを分けるかを考えます。見出しが本文の要約になっていないなら、直後の段落に合う文言へ直します。階層を整えたあと、文字の大きさ、余白、色をCSSで調整します。
まず一ページを選び、見出しだけを上からメモへ写します。h1がページ全体、h2が節、h3が小節を表しているかを確かめれば、SEOのためという曖昧な理由で見出しタグを増やさずに済みます。
関連記事
