見出しを記述する h1,h2タグ

見出し部分はh1やh2タグで囲って記述します。

<h1>ほにゃらら</h1>

<h2>ほにゃらら</h2>

h1からh2、h3と順番に記述していきますが、一般的には「h1」はそのページでひとつのみ、「h2」や「h3」は複数記述されているケースが多いです。

けれども、大手サイトでもh1が無数に記述されていたり、あるいは順番が入れ替わっていたりするケースもあり、特にこれといった決まりはなく、サイト運営者の好みになるかと思います。

大見出し → h1
中見出し → h2
小見出し → h3

または、サイトタイトルの部分を見出しタグのh1で使っているケースも多いです。

サイトタイトル・ロゴ → h1
大見出し → h2
中見出し → h3
小見出し → h4

■h1タグとh2タグの重要性について

トップページのh1タグにつきましては、サイトタイトルがそのまま設定されているケースも多いため、必ずしもh1が最重要な箇所というわけでもないです。

例えば、仮に、ヤフーニュースなどで以下のようになっていたとします。

<h1>ヤフーニュース</h1>
<h2>消費税、2017年4月から10%に</h2>
<h3>日経平均株価、2万円の大台に</h3>

この場合、サイトタイトルのh1タグはあまり重要性がありません。
より具体的な個別ニュースの内容を示す、h2やh3の方が情報の重要性は高いといえます。

このような、サイトタイトルやロゴにh1が設定されているパターンも多いため、検索エンジン側でもh2やh3部分の記述内容に重きを置いているふしのあった時期もあります。
現在は不明ですが、h1タグ同様、h2やh3あたりまでは比較的、重要性が高いタグと考えておくとよいでしょう。

■個別ページのh1について

一方、個別ページにつきましても、上記のようにサイトタイトルにh1がそのまま設定されているケースが多いです。

<h1>ヤフーニュース</h1>
<h2>消費税、2017年4月から10%に</h2>

けれども、サイトタイトルに重要性を持たせる必要はあまりないので、h1からはずし、個別ニュースの見出しをh1に設定しているケースもあります。

<div>ヤフーニュース</div>
<h1>消費税、2017年4月から10%に</h1>

当サイトもこのパターンで設定しておりますのが、概ね、この2つのパターンのどちらかでh1やh2を設定しているケースが多いものと思います。

ほか、h3やh4、h5などもありますが、いずれにしても重みづけという意味合いになりますので、そのページで強調したいタイトルの部分をh1かh2のどちらかの見出しタグで囲っておくとよいでしょう。

タイトルタグとh1、h2の関連性について

見出しタグのh1の部分は、タイトルタグ<title></title>と同一の内容を記述しているケースが多いです。 けれども、必ずしも完全に同一である必要はなく、例えば、楽天の場合は以下のようになっています。


タイトルタグの箇所

<title> 【楽天市場】Shopping is Entertainment! : インターネット最大級の通信販売、通販オンラインショッピングコミュニティ </title>

h1タグの箇所

<h1>楽天</h1>


タイトルタグは検索結果でも表示されますので、長めのわかりやすい文章でもよいと思われますが、h1タグはロゴで設定されるケースが多いので短めのケースも多いです。

いずれにしても、タイトルタグとh1の記述内容に関連性を持たせ、無関係な記述は避けるようにしましょう。

さらに、個別ページのタイトルタグとh1,h2の関係でいえば、以下のようになっている場合が多いです。

<title>個別ページ見出し(h2):サイトタイトル(h1)</title>

<h1>サイトタイトル</h1>
<h2>個別ページ見出し</h2>

例えば、上の例でいえば、以下のような形になります。

<title>消費税、2017年4月から10%に:ヤフーニュース</title>

<h1>ヤフーニュース</h1>
<h2>消費税、2017年4月から10%に</h2>

もしくは、以下のようなケースもあります。

<title>消費税、2017年4月から10%に:ヤフーニュース</title>

<div>ヤフーニュース</div>
<h1>消費税、2017年4月から10%に</h1>

結局、サイトタイトルをh1で囲って、重要性を持たせるかどうかということになりますが、サイト運営者の好み次第ということになるかもしれません。

ただ、単に太字にしたいとか、大きな文字にしたいなどの理由で見出しタグを使うのは避けた方がよいです。h1やh2タグは、<strong>タグと同様、論理的に意味を強調する効果がありますので、デザイン上、単に太字にするだけの<b>タグとは性質が異なります。

無料ブログサービスなどでは、投稿日時にh2タグが割り当てられているケースもありますが、そのような使い方は避けた方がよいでしょう。