HTMLの構造化 - 見出しタグ編

「SEO対策的コンテンツの構造化」では、SEO対策をおこなう上で、HTMLによるコンテンツの構造化の必要性と、<table>タグを使った従来のコンテンツデザインから、CSSを使ったデザインへの移行について取り上げました。

今回は、一歩踏み込んで、HTMLを使ったコンテンツの構造化について解説したいと思います。

従来のデザインを重視したコンテンツの場合、まず確認しなければならないのは、<h1>や<h2>といった「見出しタグ」がコンテンツ中にあるかどうかということです。これらの見出しタグはデザイン上の都合から、コンテンツにそもそも存在していない場合が少なからずあります。
「見出しタグ」の使用法を具体的にいうと

<h1>タグ：
そのコンテンツの全体を表すタイトル(見出し)を記述します。通常１箇所、内容の最上部にあります。

<h2>タグ：
コンテンツの２階層目のタイトル(見出し)をを記述します。通常<h1>タグより後ろにあり、複数存在する場合があります。

<h3>タグ以降：
<h2>タグにそれぞれ階層をプラス１ずつした形になります。通常、このタグの前には１つ上の階層の「見出しタグ」が存在するはずです。

ここで注意しなければならないのは、<hX>タグの数字の部分は、文字の大きさを定義しているものではなく、見出しの階層を表しているので、よほど込み入った内容でない限り、<h3>タグより階層の深いタグを使うことは稀でしょう。
もし、その様なタグを発見した場合、作成者は「見出しタグ」の意味を階層ではなく、順番と勘違いしている可能性がありますので、注意が必要です。

「見出しタグ」を正しく記述した場合に起こる問題は、先ほども書いた様に無駄に大きい文字サイズやデザイン感のなさです。
もし、「見出しタグ」を追加することによる大幅なデザインやレイアウトの改定をおこなえない場合、「CSS(スタイルシート)」を使うことにより防ぐことができます。

要するに<hX>タグで記述されたテキストがブラウザの画面表示上見えなければ良い訳なので、CSSの可視属性(visibility)を使用して非表示(hidden)にします。「style=」はタグに直接CSSの設定を記述する場合に使います。

例）
<h1 style="visibility:hidden ">タイトルを記述します。</h1>

どうでしょうか、ブラウザの表示上では表示されていないと思いますが、CSSを認識しない検索エンジンの「クローラー」ではちゃんと<h1>タグで書かれたものだと認識できる訳です。
これでまずHTMLの構造化の第一歩を踏み出すことができたと思います。

次回はリストタグの活用についてをご紹介したいと思います。

◇この記事が参考になりましたらこちらをクリック ≫ 人気blogランキング

◇「『うぇっぶ』のはなし」へのコメント募集中 ≫ ビジネスブログランキング100選