HTML構造の見直し

サイトは表示されれば良いわけではありません。見た目は同じでも、内部のHTML構造次第でSEOに大きな影響を与えます。よく「CSSレイアウト」「XHTML」が良い、と言われますが、サイト全体のレイアウトをCSS＋XHTMLで作るのと、テーブルで作るのとでは、SEOの観点からみると大きな違いがあります。テーブルはあくまで「表組み」であり、レイアウト用のタグではありません。その事を検索エンジンは意識しているため、float等を用いたCSSレイアウトが好まれます。

また、CSSレイアウトが好まれる要因としては「慣れれば後からの追加など、編集が容易である」点があります。テーブルレイアウトで３カラムの内容を左右逆にしたり、２カラムに変更するのは結構な手間がかかります。その点CSSレイアウトだと容易に入れ替え、変更が出来るようになります。また、人の目で見るタグの構造もCSSレイアウトの方が断然わかりやすくなります。

例えば下記のような基本レイアウトを組むとします。

このような表現の際は、テーブルを使用せず、下記のようにCSSのfloatを使用してレイアウトを組むようにします。

■HTML

<div class="all">

<div class="head">ヘッダー</div>

<div class="content">コンテンツ</div>

<div class="menu">メニュー</div>

<div class="foot">フッター</div>

</div>

■CSS

.all{ width: 880px; padding: 10px; margin: 0 auto;}

.head{}

.content{ float: left; width: 660px;}

.menu{ float: right; width: 200px;}

.head,.content,.menu{ margin-bottom: 10px;}

.foot{ clear: both;}

div{ border: 1px solid #999;}

ただ、テーブルを一切使用しないのかと言うと、そうではありません。あくまで「レイアウトではテーブルを使用しない」という内容です。表組みはやはりテーブルで組むべきであると思いますので、用途に合わせて使い分けるようにしましょう。