構造化HTML

HTMLの構造化・厳格化

決定打にこそなりませんが、被リンクなどの外的要因に影響されにくいこの要素はホームページの基礎工事に相当します。

聞くと難しく感じますが、終わってみればHTMLの内容は以前よりもはるかに単純明瞭になっているはずです。

NGタグの撤廃（スタイルシートへの代替）

構造化とはつまり、装飾的な要素を切り離して文書のみを論理的な意味を持つHTMLで箇条書きにすることです。

ここでいう装飾とは主に次のようなものを指します。

  • 文字のサイズ、太さ、色、下線、位置、行間
  • 表のサイズ、罫線、配置、背景色
  • ページの背景色
  • ページレイアウトのサイズ、色、空白幅、位置

HTMLの構造化にはスタイルシート（CSS）が不可欠となります。

▲上に移動

用いるべきではないタグと用い方

以下に挙げるものは最低限気に留めておきたい内容で、SEOはもちろんアクセシビリティ面でも用いるべきでない技法です。

物理強調タグ（<B>や<I>）

太文字や斜体文字を表現するタグですが、視覚的なことだけを意味しているのでSEOにおいて「損」です。

強調の意味を持つ場合、論理強調タグであるSTRONGやEMを用います。

但し、くくり方には注意しましょう。

使い方は物理強調タグと同じなので、既に作ってしまったページは差し替え（置換）で容易に修正できます。

FONTタグ（文字サイズや色指定）

ツール上で文字装飾を指定すると、ほぼ必ずFONTタグが生成されます。

作業中はラクに思いますが、個々の文字に装飾をかけるほどページは見難くなるので使わないのが理想です。

FONTタグも論理的な意味を持たないのでアクセシビリティの面でも不適切です。

文字サイズや色は論理的な意味を持つものだけに限定し、その意味に応じて共通するサイズや色をスタイルシートで設定する

SEO的にはHTMLを簡素化するための撤廃です。

BR（単純改行タグ）による行間調整

文章を改行するために用いられるタグですが、行間を調整するために繰り返してはいけません。また、段落を意味する＜P＞タグを空白にして行間調整にあてがうのもNGです。

これはHTMLのルールです。

間隔の意味に適切なタグを適用し、スタイルシートで間隔を調整する

また、横幅のレイアウト調整目的で文章の途中で改行するのは絶対にいけません。

文章の途中で区切ってしまうと検索エンジンは文中に含まれるキーワードを正しく認識できなくなることがあります。

画像代替文字（ALT属性）の追加

何らかの理由で画像が読み込めなかったときに代替として表示される文字で、画像表示タグ（IMG）の属性です。

ALT属性は代替文字という意味の他、画像にリンクを貼った場合はリンクアンカーの意味も持つのでSEOにおいて絶対的に欠かせない要素です。

よくある間違った認識として、マウスをあてるとALT属性の文字が表示されるので、ALT属性は画像説明文を表示させる機能と思っている方もいるようですが、マウスポイントで説明文を表示させる場合はタイトル属性（TITLE=”表示させる文字”）を用います。

なお、マウスポイントで画像のALT属性が表示されるのはMSIE（インターネットエクスプローラ）だけです。

▲上に移動

構造化されたHTML

装飾要素をHTMLから除外する反面、情報内容に意味を持たせます。

見出しとリストのタグを活用しつつ装飾系のタグを撤廃すると、HTMLの流れは次のようになっていきます。

  • ＜H１＞大見出し
  • ＜LI＞リスト（ナビゲーション）
  • ＜Hn＞小見出し
  • ＜P/＞説明文
  • ＜LI＞リスト（リンクや資料画像）
  • ＜P/＞説明文
  • ＜LI＞リスト（リンクや資料画像）
  • ＜Hn＞小見出し
  • ＜P/＞説明文
  • ・・・・・

構造化の完成度が高いほどHTMLのソース（記述状態）は単純明快化するので検索エンジンは内容を把握しやすくなり、結果的にSEOの効果が高まります。

単純明快なHTMLは人間の眼でも内容を把握しやすいので文字の差し替えなどもラクになるという副産的な効果もあります。

リストタグ（LI）を活用しよう

リストタグ（LI）は箇条書きをするためのタグです。

「文章」でないものは全て箇条書きできるといえます。

つまり、視覚的にはヨコ並びでも各々が「文章」になっていなければリストタグを使う方が望ましいです。

必要に応じて題目が付けれる定義リストタグ（DL）も使いましょう。

箇条書き文となる<LI>もしくは<DT><DL>に｛FLOAT：LEFT；｝のスタイルを適用するとヨコ並びにできます

▲上に移動

行き着く先はXHTML

究極的には構造化言語であるXHTMLを用いるのが理想です。

専門的な知識がないとメンテナンス性の問題が残りますが、トコトンこだわるなら勉強してみましょう。

  • 直前のページへ
  • ページの先頭へ