今すぐ使える！SEO対策　第3回「見出しタグ」

例えば、書籍の目次で『第一章 ○○○○について』等、
章立てでカテゴリー分けされている場合、
章立てされたコンテンツは最も大きな「見出し」として、
h1タグで表現するのが自然です。

次に、章立てされた各コンテンツの中に、
1つ下の階層の「中見出し」が存在する場合があります。
これが、2番目に大きな「見出し」、h2タグになります。

このようにh1～h6までを順番に用いてページを構成していくのが
自然な見出しタグの使い方となります。

見出しにはWebサイトに関する情報を伝えていく上で、
自然と重要なキーワードが含まれてきます。
そのため、検索エンジンはそのコンテンツの見出しを示す「見出しタグ」に
重要なキーワードが含まれている事を認識、検索順位を判断する材料としています。

見出しタグの基本的な使い方

——————————————————————-

◆h1タグは最も大きな見出しなので、
　1ページ1つのみ、使用してください。
　内の上部に配置、キーワードを前部に含めると、
　よりSEO的な効果があるとされています。

◆h2～h6は使用回数に制限はありませんが（使用しなくても可）、
　使い過ぎはあまりよくありません。
　それぞれにキーワードを含めることでSEO効果が期待できますが、
　見出しタグはあくまでも「見出し」タグです。
　キーワードを含めることだけではなく、
　アクセシビリティも意識して記述しましょう。

◆h1の次にはh2、h2の次にはh3が来るように記述します。

（正）　h1 → h2 → h3 → h2 → h3 → h4
（誤）　h1 → h3 → h2 → h4

◆見出しを画像にして、h1やh2などの見出しを画像にすることも可能です。

<h1><img src=”h1.jpg” alt=”○○○○について”></h1>

この場合、alt属性に含まれるキーワードがh1となります。
画像なので、フォントなども自由に選べ、見た目も良くなりますが、
テキストのみのh1よりは検索エンジンからの評価が低くなるとされています。

——————————————————————-

ただし、この見出しタグ、使うことを避けている人も多いのではないでしょうか。
h1タグをそのままページに記載しようとすると、以下のような表示になってしまいます。

<h1>今すぐ使える！アクセスアップ対策</h1>

今すぐ使える！アクセスアップ対策

<h2>見出しタグについて</h2>

見出しタグについて

このようにフォントが大きくなり過ぎることによって、
デザイン的な部分に問題が生じてしまいます。
いくらSEOに効果があると言っても、
結果的にユーザーにとって読みにくくなってしまっては問題です。

そこで、見出しタグを使用する際にはCSSを使いましょう。
CSSを活用する事により、フォントサイズや行間等の見た目に関する要素を調整し、
ユーザーにキレイで見やすいコンテンツを提供することが出来ます。

例）

今すぐ使える！アクセスアップ対策

見出しタグについて

———————————————————–

CSS記述

h1 {
margin:0;
padding:5px;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
background:#FF8C00;
}

h2 {
margin:0;
padding:3px 0 3px 3px;
font-size:12px;
font-weight:normal;
color:#000000;
border-bottom:1px dotted #FFA500;
}

———————————————————–

上記のように、CSSを使えば見出しをあらゆる形に調整することが可能です。
しかし、文字色を背景と同じ色にしたり、小さなフォントにしたりして見出しを隠し、
そこにキーワードを詰め込む行為等はスパム行為として扱われるので注意が必要です。

前述しましたが、見出しタグはあくまでも「見出し」タグです。
見出しに当たる文章が、通常の文章よりも目立つように
表示されているのがより自然な形と言えるでしょう。

以前の記事でも書きましたが、一番大切なのは、ユーザー目線で考えるということ。
自然な流れとして、コンテンツに添った見出しタグの使用を心がけましょう。