見出しタグと強調タグ、定義リストタグについて

以前「HTMLタグの入れ子ルールとループ処理への対応」にも記載しましたが、DIVタグの乱用を避ける、HTMLタグのネストを浅くする、ということを実現するとなるとHTMLタグは内容に応じて使い分ける必要があります。

HTMLタグの使い分けはSEOとしての意味も持ちます。検索エンジンにWebページを適切にインデックスさせることはSEOにとって重要です。同じような内容のページは重複コンテンツとなる可能性があります。なので1ページ1ページ明確に違いを付けることが大切です。

ここでは弊社が考えるHTMLタグの使い分けについて解説します。そのため一般的な設定と異なる場合もありますので参考意見としてお考えください。

見出しタグの数と使い方

見出しタグはその名の通り見出しとなる部分に設定します。見出しタグは何を見出しとして考えるかで使用範囲が変わります。弊社が考える見出しとは「章の見出し」です。例えば商品一覧があるとする、一覧全体をまとめた言葉は見出しと言えますが、各商品には見出しを設定しません。商品単位で見出しを使用してしまうと見出しタグの数がかなり多くなります。

特にSEOの観点から考えると見出しタグはWebページ中の重要な箇所にマークアップをすることを推奨されます。そのことに異論はないのですが、Webページの重要性を明確にするとなると見出しタグの数と内容も考えるべきです。見出しタグの数が多いとテーマがわかりづらくなります。また、同じような内容に見出しタグを指定することもテーマが判別しづらくなります。

定義リストは便利なタグ

定義リストは便利なタグなので弊社では使用頻度が高いタグです。見出しタグよりも使用量が多く、繰り返し処理でもよく使用します。定義リストが便利なのは次の3点からです。

• 項目の定義がプチ見出しのように使える
• 定義リスト自体がグループ化しているタグなので、ブロック単位で把握しやすくなる
• 無駄な入れ子を回避できる

前述では各商品には見出しを使わないと書きましたが、代わりに使うケースが多いのは定義リストです。商品名でDTタグを使えば見出しタグの乱用を回避できます。

なお、定義リストはHTML4.01からHTML5へのバージョンアップで使用範囲が広がりました。HTML4.01はDTタグは「定義される言葉」、DDタグは「定義の説明」となっていましたが、HTML5ではDTタグは「説明される言葉」、DDタグは「説明や定義」とニュアンスが変わっています。ちょっと説明にも使用できるようになりました。

▼HTML5タグリファレンス「<dl> 」
http://www.htmq.com/html5/dl.shtml

強調タグは使用しない

強調タグは使い方が難しいので弊社では全く使いません。一昔前は過剰な強調タグの使用がSEOでマイナスとなるケースもあったので、一切使わなくなりました。それから適切な使い方を模索していません。

CLASSを細かく指定しない

CLASS指定が多くなるとHTMLソースの記述量が増えるし見づらくなります。そのためできるだけ不要なCLASS指定はしないようにしています。CSSの範囲指定を使えばHTMLタグ一つひとつにCLASS指定をする必要はありません。この点は実際に作っている人でないとわかりづらいかもしれませんが、Webサイトの管理・運用コストは作り方次第で雲泥の差となります。不要なCLASS指定の多さもその一つの要素といえます。