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

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

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

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

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

これらを大見出し、中見出し、小見出しで重要度に応じて使い分けをします。

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

h1、h2と使ってきたのに、h3を飛ばしてh4などとするのは避けるようにしましょう。

また、これらを組み合わせて、文章の構造を論理的に示すことができます。

例えば、こちらは当サイトのSEO対策のページのHTMLソースからh1,h2,h3タグのみを抜き出してきたものです。

文章構造

このように、h1の大見出しとh2の中見出し、h3の小見出しを組み合わせることで、以下のように文章のアウトライン(概要)を明示することができます。

アウトライン

右側に行くほど見出しのレベルが下がっていくわけですが、混み入った内容になる場合には見出しのレベルを合わせるようにすることをおすすめします。

見出しタグはh1~h6まで使うことができますが、h4やh5、h6については実際にはほとんど見かけることはありません。たいていはh1とh2を使い、途中で内容が変わる際にはh2を複数回使用しているケースが多いです。

h1タグとh2タグの重要度の違い

一般的には、中見出しのh2よりも大見出しのh1の方が重要度は高いといえますが、無料ブログサービスなどではh1タグに「サイトのタイトル」が設定されているケースも多いです。

そのため、実際にはh1タグ内にはめぼしい情報が何もなく、むしろh2タグやh3タグに詳細な情報が記載されていることも多いです。サイトのロゴやタイトルをh1に設定するか否かで作り方に違いがあるので注意しましょう。

トップページのh1は「サイトタイトル」が多い

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

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

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

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

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

無料ブログサービスなどでもそうですが、このようなサイトタイトルやロゴにh1が設定されているパターンも多いため、以前には検索エンジン側でもh2やh3部分の内容に重点を置いているふしのあった時期もありました。

現在でもその名残があるように感じてますが、h1タグ同様、h2やh3あたりまでは比較的、重要性が高いといえます。

個別ページのh1は「記事タイトル」が多い

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

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

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

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

CMSで作成する場合、デフォルトでこのような「記事タイトル」が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タグが割り当てられているケースもありますが、そのような使い方は避けた方がよいでしょう。