【SEO】h1タグとは？SEO評価を高めるh1タグの効果的な使い方

2022 4/21

2020年4月30日 2022年4月21日

h1タグとは

h1タグの「h」は「Heading（見出し）」の略になります。h1からh6まで設定が可能です。

数字が小さくになるにつれて、見出しのレベルも小さくなります。その中でもh1は一番大きい見出しという意味になります。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

h1タグ〜h6タグは上記のように記述します。

実際のウェブサイト・ブログ上では上記のように表示されます。※CSSは記述していません。

またh1タグは、1つのページ内で複数使っても問題ありません。

ただ使い過ぎると見出しのレベルの強さが薄れてしまうので、使ったとしても1〜2個が妥当と思います。

h1タグとSEO評価の関係性

h1タグとSEO評価についてですが、結論からいうと間接的に関係があると考えるべきだと思います。

Googleなどの検索エンジンは、私たちがいつも見ているWebページではなく、そのソースコードをクロールしてWebページを理解します。

その際にhtmlのタグを使って「見出し」「段落」「画像」ということを理解していきます。

h1タグの説明で話したように、h1は見出しの中で一番上位の見出しという意味になります。

そのため、検索エンジンに対して、h1はtitleタグの次にWebページの内容を示す存在になるため、SEO評価にも影響があります。

[st-div class=”” margin=”0 0 -5px -5px” padding=”0 0 0 0″ add_style=””][st-minihukidashi fontawesome=”fa-check” fontsize=”” fontweight=”bold” bgcolor=”#FFECB3″ color=”” margin=”0 0 0 0″ radius=”30″ position=”” add_boxstyle=””]こちらもCHECK[/st-minihukidashi][/st-div][st-card myclass=”st-card-minihukidashi” id=”995″ label=”” pc_height=”” name=”” bgcolor=”#cccccc” color=”” fontawesome=”” readmore=”on” thumbnail=”on” type=””]

h1タグの効果的な使い方

ここでは実際、h1タグをどう設置すれば良いかを説明していきます。

h1タグ〜h6タグをページ構造に合わせて使う

前述したように、h1タグは見出しを意味するhtmlタグになります。ページコンテンツの構造に合わせて、見出しを自然な形で設置しなければなりません。

簡単に説明すると、大きい話は上のレベルの見出しを付けて、細かな話に下のレベルの見出しを付けます。

具体的にはh1タグ〜h3タグを使った場合以下のようなイメージです。

【正しい使い方】

<h1>h1タグとは?正しい使い方・誤った使い方の徹底解説</h1>
　<h2>h1タグの正しい使い方</h2>
　　<h3>正しい使い方その1</h3>
　　<h3>正しい使い方その2</h3>
　　<h3>正しい使い方その3</h3>
　<h2>h1タグの誤った使い方</h2>
　　<h3>誤った使い方その1</h3>
　　<h3>誤った使い方その2</h3>
　　<h3>誤った使い方その3</h3>

正しい使い方の場合、「h1タグとは?正しい使い方・誤った使い方の徹底解説」にh1タグを付けて、その下に「h1タグの正しい使い方」「h1タグの誤った使い方」の同じレベルのテキストにh2を付けます。そして、それぞれの詳細にh3をつけるように構造的にh1タグ〜h6タグを使いましょう。

ポイントとしては、横並びにした時に同じレベルであるかどうかをチェックすることです。

【誤った使い方】

<h1>h1タグとは?正しい使い方・誤った使い方の徹底解説</h1>
　<h2>h1タグの正しい使い方</h2>
　　<h1>正しい使い方その1</h1>
　　<h2>正しい使い方その2</h2>
　　<h3>正しい使い方その3</h3>
　<h1>h1タグの誤った使い方</h1>
　　<h3>誤った使い方その1</h3>
　　<h3>誤った使い方その2</h3>
　　<h3>誤った使い方その3</h3>

誤った使い方の場合、h2の「h1タグの正しい使い方」の下に、h1とh2のテキストがあるなどが誤りです。またh1の「h1タグの誤った使い方」の下にh3のテキストがあるなど、見出しのレベルが飛んでいるのもよくありません。

デザイン(装飾)を目的にh1タグ〜h6タグを使わない

h1タグ〜h6タグを使用すると、タグに囲まれているテキストは文字サイズが大きくなり、太字（文字の線）が太くなります。

またh1タグ〜h6タグのレベルに合わせて文字サイズが大きくなり、太字（文字の線）が変わってきます。

これは見出しであることを分かりやすくするためなのですが、これを利用して特定の文字サイズ、太字（文字の線）を変えるために使用するのは避けましょう。

あくまで見出しのテキストのみに使用し、そうで無いテキストに関しては、CSSで文字サイズ、太字（文字の線）を変更することが鉄則です。

【HTML】
<em> ・・・強勢する（アクセント）
<strong>・・・重要性・深刻性・緊急性を示す

【CSS】
font-size・・・テキストサイズを指定できる
text-decoration ・・・テキスト傍線のつけ方・色・スタイルをまとめて指定できる

h1タグ〜h6タグは簡潔な文章にする

当たり前のことですが、h1タグ〜h6タグの見出しタグに長すぎる文章を入れるのは避けましょう。

ユーザーは自分の知りたい情報を検索して、ウェブサイト・ブログを訪れます。

その上で自分の知りたい情報・興味のある情報を探してページ全部を読んだり、一部だけを読んだりします。

その際に、知りたい情報・興味のある情報を探す時に、見出しタグがポイントになってくるため、ユーザーを適切にガイドする簡潔な文章を入れる方がベターです。

【正しい使い方】

<h1>h1タグとは?正しい使い方・誤った使い方の徹底解説</h1>

【誤った使い方】

<h1>h1タグとは?正しい使い方・誤った使い方の徹底解説またh1タグにどういうキーワードを入れる方が良いかも一緒に解説します</h1>

一目瞭然だと思いますが、あくまで見出しなので文章にならないように注意しましょう。

h1タグにはキーワードを入れる

h1タグはtitleタグの次に、Webページの情報を示す要素になるため、Webページの概要を示すようなテキストが入ります。

そうなると自然に、そのWebページで狙っているキーワードが入るのが普通です。もちろんtitleタグ、h1タグに入れるキーワードに対してページコンテンツの内容が回答、より詳細な情報という形になっていることが前提です。

【正しい使い方】

<h1>h1タグの最適な文字数を解説</h1>

【誤った使い方】

<h1>h1タグ</h1>

「h1タグ」だけでは、見出しとしてもどういう内容が分かりにくいですし、狙っているキーワードが入っていないので、SEO対策として不十分です。正しい使い方としては、「h1タグ」と一緒によく調べられている「文字数」というキーワードを一緒に見出しタグ内に入れています。

[st-div class=”” margin=”0 0 -5px -5px” padding=”0 0 0 0″ add_style=””][st-minihukidashi fontawesome=”fa-check” fontsize=”” fontweight=”bold” bgcolor=”#FFECB3″ color=”” margin=”0 0 0 0″ radius=”30″ position=”” add_boxstyle=””]こちらもCHECK[/st-minihukidashi][/st-div][st-card myclass=”st-card-minihukidashi” id=”384″ label=”” pc_height=”” name=”” bgcolor=”#cccccc” color=”” fontawesome=”” readmore=”on” thumbnail=”on” type=””]