SEOに適した見出しタグ(hタグ)の正しい使い方

文章のデザイン上もSEO上も重要な「見出しタグ」の正しい使い方や役割についての解説です。

見出しタグとは?

見出しタグとは、「h1」や「h2」といったコンテンツに見出しを作るためのHTMLタグです。h1~h6まであり、数字が若いほど階層が上・重要となっています。
多くのブログサービスやテンプレートで見出しタグは普通のテキストよりも大きく、また目立つようにデザインされています。

見出しタグの使い方

見出しタグは先の通り、階層構造を作り、重要度を分ける役割や、コンテンツを整理する役割があります。

なので見出しタグは以下のように使うのが効果的です。

  • h1 : タイトル
  • h2: 大見出し
  • h3 : 中見出し
  • h4 : 小見出し
  • h5、h6 : 使わない

基本的にh1は1つのページにつき1つです。
ブログならば記事のタイトルのみh1といったイメージです。
h1~h6まですべて使う必要はなく、本文では主にh2、h3を使います。
h4を使うほど階層が深くなることはそこまでないでしょう。
h5とh6はまず使いません。

見出しの扱いはWordplessのテーマにより異なるようなので注意が必要です。
当ブログで使用しているTCDテーマはタイトルがh1ではなくh2になっています。
※カスタマイズ可能

実際にブログを書く場合、見出しタグは以下のような構成になると思います。


<h1>ブログのSEOについて</h1>

SEOとはなんなのか…

<h2>SEOの歴史</h2>

SEOの歴史は…

<h3>ブログ時代</h3>

ブログが流行り始め…

<h3>SNS時代</h3>

SNSが登場し…

<h2>SEOの方法</h2>

具体的にSEOは…

<h3>ブログのSEO</h3>

ブログにおいて…

<h3>動画のSEO</h3>

動画では…

<h2>まとめ</h2>

なのでSEOとは…


このように記事の中に見出しで階層とまとまりを作り書くことで読者の方にも検索エンジンにも理解がしやすい文章になると思います。

また先に述べた通り、h1はタイトルに入れるのが有効なため、本文の書き出しは、例で言えば「SEOとはなんなのか…」が書き出しになります。


見出しタグとSEO

見出しタグはh1からh6までありますが、SEOの場合、h1の次はh2、h2の次はh3というように順番を守り、階層をしっかり整えなくてはいけません。

例えば先の例では以下のように階層構造ができているのがわかると思います。

<h1>ブログのSEOについて

ー<h2>SEOの歴史
ーー<h3>ブログ時代
ーー<h3>SNS時代

ー<h2>SEOの方法
ーー<h3>ブログのSEO
ーー<h3>動画のSEO

ー<h2>まとめ

このように、大見出しは大見出しの階層に、中見出しは中見出しの階層にすることが大事です。
文節の親子関係、階層構造をしっかり検索エンジンに伝えるのが見出しタグの役割です。

これを、文字の大きさが違うなどの理由だけで崩してしまうのはいけません。
以下は悪い例です。

<h1>ブログのSEOについて

ー<h3>SEOの歴史
ー<h3>ブログ時代
ー<h3>SNS時代

ーー<h3>SEOの方法
ー<h2>ブログのSEO
ーー<h3>動画のSEO

ー<h1>まとめ

h1の次にh2がなく、h3が現れていたり、「まとめ」がタイトルと同じ階層=h1だったりと見出しが崩れているのがわかると思います。

また、「SEOの方法」がh3なのに、その中に含まれる「ブログのSEO」がそれよりも上位のh2になってしまっています。

これでは検索エンジンに正しく文章の階層構造を伝えることができません。これでペナルティを受けるというのはまずないですが、SEOは積み重ねなのでこれでは人間的には読みやすかったとしても、SEO上はマイナスです。

見出しタグとデザイン

見出しはブログを読みやすくする上で重要なものですよね。見出しタグを使うと文字が大きくなると思っている方もいるようですが、見出しタグを使っても文字は大きくなりません。多くのブログサービスで見出しタグを使うと文字が大きくなるのはCSSで、「見出しタグ=文字を大きくする」と指定されているからです。

CSSで見出しタグのデザインを決めるのは基本的なことです。CSSがいじれる方はただ文字を大きくするだけでなく、h2は青い線で文字を囲む、h3は下線を入れる等、ブログが見やすくなるようにデザインしてみましょう。

まとめ

見出しタグは、自分のコンテンツをしっかり読者の方や検索エンジンに伝えるために重要なものです。

文章中ではしっかりと階層を守って使用し、余裕があればデザインもしてみましょう!


関連記事

  1. SEO効果の高いパーマリンクとは?

  2. SEOとは?|サイトが検索結果により多く出やすくするための施術

  3. ping送信はSEOに効果があるのか?

  4. SEOに強いレンタルサーバーはあるのか?

  5. SEOの基礎 | 重複コンテンツとは?

  6. 更新通知にはXML、RSS、ATOM、ping、PubSubHubbubの4つを全て使おう

  7. モバイル対応できてる?|Google モバイル フレンドリーテスト

  8. FlashのSEO

PAGE TOP