見出しタグについて

見出しタグとは

見出しタグとは、ユーザーと検索エンジンの双方にページ内のコンテンツ構成を正しく伝えるために使用します。
通常、見出しタグで囲まれたテキストは、普通のテキストと比べて大きく表示される。そのため、その見出しタグの下に続く文章が、どのような内容のものなのかをわかりやすくなります。
また、見出しタグはSEOの面から見ても重要な意味を持つタグです。

見出しタグを利用するときのルール

h1タグは１ページに１つのみ利用する（<header>タグ内での利用など例外の場合もあり）

h1タグは、そのページでもっとも重要なテキストに対して使用するタグです。
例えば、サイトのトップページであればサイトタイトルが、記事ページであれば記事タイトルが、そのページでもっとも重要なテキストです。そのためh1タグは、タイトルに設定するのが自然です。
くすりの上田サイトもエントリーのタイトルに自動的にタイトルに<h1>が付くようになっています。
（<h1>以外は文書構造によって、何度でも利用することができます。）

くすりの上田ページの<h1>タグ適用タイトル

くすりの上田ブログページの<h1>タグ適用タイトル

見出しを見ただけで何について書かれているか分かるように！

見出しは一瞬読み流した時に、気になって内容を詳しく読んで見たいと思わせるように、文章ではなく短い文言を利用すると効果的。

見た目を調整することだけを目的として、見出しタグを使用しない

デザイン等の装飾を適用するために、見出しタグを利用せず、あくまでも文書構造のために利用する。
見た目を変えたい場合はclass設定の組み合わせで利用する。

見出しタグの順番を守る

見出しタグは<h1>から始まり<h6>までありますが、通常のページでは<h4>ぐらいまでを利用することが多いです。
<h1>の次に来るのは<h2>、<h2>の後に来るのは<h3>というように順番を守らなければいけません。
見出しタグの順番が守られていないとその階層構造を正しく示せていないということになり、SEOにマイナスの影響を与えてしまう。

くすりの上田のページのエントリーページは<h2>からhタグ利用できるようになっています。
<h2>が「見出し大」
<h3>が「見出し中」
<h4>が「見出し小」
となっていて、セレクタから選ぶことが可能です。

サイトでの利用例

富山県不妊治療助成金についてページ例

富山県不妊治療助成金についてのページでは<h2>から<h4>を利用しています。
「不妊助成金について」で大見出しの<h2>を利用し、
不妊助成金の項目として「1. 対象となるご夫婦」と「２. 助成金について」が2つあるので<h3>を適用、
「２. 助成金について」の中でも「指定医療機関（３０医療機関：平成２６年５月現在）」は機関名の紹介となるので<h4>を適用してあります。

富山県不妊治療助成金についてページ<h2>タグ適用タイトル

富山県不妊治療助成金についてページ<h3>タグ適用タイトル

富山県不妊治療助成金についてページ<h4>タグ適用タイトル

また、hタグ以外でも文章の構造化によく利用するのが「記述リスト」（定義文）です。
「記述リスト」は記述全体を<dl>タグで括り、<dt>タグでその項目タイトルを括り、<dd>タグで項目の詳細や説明を括ると項目名とその説明の文章構造を関連付けることができます。

<dl>
<dt>項目タイトル</dt>
<dd>項目タイトルの詳細や説明</dd>
<dt>項目タイトル</dt>
<dd>項目タイトルの詳細や説明</dd>
</dl>

【県内医療機関】では地域で医療機関が異なるので、<dt>で地域名、その地域の医療機関名を<dd>タグを適用させています。
「記述リスト」は他のページでもたくさん利用しているので、機会があれば確認してみてください。

くすりの上田トップページに読み込んだエントリーページ例

くすりの上田トップページのエントリーでは大きく分けて「くすりの上田について」と「くすりの上田からお知らせ」の内容を掲載しているので、
「くすりの上田について」と「くすりの上田からお知らせ」に<h2>をタグを利用しています。
「くすりの上田からお知らせ」ではお知らせが何点か掲載されていますので、
各お知らせのタイトル名に<h3>適用しています。

他、<h2>と<h3>の組み合わせはマスコミ掲載ページでも利用しています。
見た目を調整することだけを目的として、見出しタグを使用していないので、トップページとマスコミ掲載ページの見出しの見た目（デザイン）は異なりますが、ソースには<h2>と<h3>タグが利用されています。

くすりの上田の<h2>タグ適用タイトル

くすりの上田の<h3>タグ適用タイトル

このページ自体も以下のような構造になっています。

<h1>見出しタグについて</h1>
    <h2>見出しタグとは</h2>
        <p>説明</p>
        <h3>見出しタグを利用するときのルール</h3>
            <h4>h1タグは１ページに１つのみ利用する。</h4>
                <p>説明</p>
            <h4>見出しを見ただけで何について書かれているか分かるように！</h4>
                <p>説明</p>
            <h4>見出しタグの順番を守る</h4>
                <p>説明文</p>
    <h2>サイトでの利用例</h2>
        <h3>富山県不妊治療助成金についてページ例</h3>
            <p>説明</p>
        <h3>くすりの上田トップページに読み込んだエントリーページ例</h3>
           <p>説明</p>

掲載する内容によって、文書構造を考慮しながらタグを使って行くことが大切です。