HTML構造の見直し

HTML構造の見直し

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

また、CSSレイアウトが好まれる要因としては「慣れれば後からの追加など、編集が容易である」点があります。テーブルレイアウトで3カラムの内容を左右逆にしたり、2カラムに変更するのは結構な手間がかかります。その点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;}


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