hタグをSEO的に問題なく使用するためのポイント。

HTML文書内で論理構造を表現するために使われる「見出しタグ(h要素)」。

(X)HTML内では重要なものから順番に「6」まで各要素が用意されています。

  1. <h1>
  2. <h2>
  3. <h3>
  4. <h4>
  5. <h5>
  6. <h6>

以下では、これら「hタグ」の使い方についてちょっと考えてみましょう。

HTML文書内での「hタグ」の適切な使い方

「h要素」の使用において注意すべき点としては、大きく2つのポイントが挙げられると思います。

見出しタグを「順番通り」に記述し、「飛ばさない」ことが重要

基本的な事柄になりますが、再確認しておきましょう。

まずはh要素をキチンと「順番通り」に書くこと。

たとえば、下記のようなケースはNGです。

<body>
 <h1>h1要素</h1>
  <h2>h2要素</h2>
   <h4>h4要素(本来はここも「h3」要素)</h4>
   <h3>h3要素</h3>
    <h4>h4要素</h4>
    <h4>h4要素</h4>
</body>

この場合、「h2→h4」と続いてるため、「h3」が抜けている状態です。

つまり、"順番通り"になっていませんね。

また、下記のように"上位"の見出しレベルを飛ばすことも同じくNGになります。

<body>
 <h3>h3要素</h3>
  <h4>h4要素</h4>
  <h4>h4要素</h4>
</body>

この場合は、「h3→h4」と見出しレベルは確かに"連続的"になっているのですが、「body」から見ると「h1,h2」が飛ばされています。

したがって、こちらもNGです。

「h1」要素を1ページ内にいくつ書くべきか

人によって解釈が異なりますが、「"h1要素"を1ページ内にいくつ書くべきか」もよく議論されるテーマです。

ここもHTML文書の論理構造を考えると必然的に「あるべき姿」が浮かび上がると思います。

基本的には「1ページにつき"1テーマ"」であるべきと考えられているので、個人的には「h1要素は1ページにつき"1つ"」と考えてマークアップしています。

この考え方は下層ページについては異論はないと思いますが、トップページについては、テーマが複数であることがありうるので、この場合は「h1要素を複数書く」ことが適切かもしれません。

ただ、個人的にはトップページにおいても「h1要素は"1つ"」だけ書き、細分化していくテーマは「h2要素」以降でマークアップするのが適切と考えているので普段はそのようにコーディングしています。

関連するWeb制作・開発Tips

関連リンク