|
テーブルタグの工夫
基本となるレイアウト構築にテーブルタグを用いる方が多いと思います。ここでは、テーブルタグの組み方とSEOに関する考察をしてみます。通常、ウェブサイトを構築する場合、ページの左側にコンテンツメニュー、そして右側にそのページの内容を記述するのが一般的なようです。当サイトもこの形式のレイアウトデザインとなっています。または、両サイドにメニュー、中央にコンテンツという具合にするのが一般的です。例えばExcite
エキサイトやYahoo!ショッピング、MSN
Japanのように。こうすると、ページ内容もサイト内のコンテンツメニューも一目で分かるので、ユーザビリティのためには最適です。こういう風にサイトを構築する場合、大枠に用いる入れ子となるテーブルは次のようになると思います。
▼標準的なレイアウトデザインのテーブルタグの組み方▼
A 左側メニュータイプ
| B 両サイドメニュータイプ
| サイト内メニュー③ |
ページコンテンツ④ |
サイト内メニュー⑤ |
|
赤のborderは分かりやすくするためのもので、実際はborder="0"とすることが多いでしょう。width、height、padding、spacingを除くと、テーブルタグのソースは以下のようになります。
Aのテーブルタグのソース
<table>
<tr>
<td>サイト内メニュー①</td>
<td>ページコンテンツ②</td>
</tr>
</table> |
Bのテーブルタグのソース
<table>
<tr>
<td>サイト内メニュー③</td>
<td>ページコンテンツ④</td>
<td>サイト内メニュー⑤</td>
</tr>
</table> |
筆者の場合も、実際はさらに上の部分にもう一つテーブルを加えることが多いですが、サイトを構築する際に、上記の入れ子テーブルを多く使っています。それで、このテーブルの組み方で問題となるのは、重要なキーワード部分を含むページコンテンツ部分②と④の部分が、ページコンテンツと無関係ではないけれど、サイト内メニュー①と③によって、下のほうに押しやられてしまうことです。前ページのテキストマッチで重要キーワードの位置は上のほうがいいと記載しましたが、それに反してしまいます。特にメニューが多くなれば、どんどんキーワードの位置が下に行ってしまいます。これはSEOの観点から言うと、あまり効果的ではありません。メニュー部分をフレームにしてしまう方法もありますが、ロボット型検索エンジンはフレームのページを苦手としており、サイト内リンク構造によるGoogleのページランク向上にも少々疑問マークが付いてしまいます。詳しくはリンク構造にて。
そこでこれを解決するには、ひとつには、コンテンツメニューをページ最下部にもってくる方法。そして、もうひとつはコンテンツのメニューを右側に持ってくる方法。
▼キーワード位置を上に持ってくるテキストマッチSEOを意識したテーブル▼
C メニューが最下部のテーブル
簡略ソースは
<table><tr><td>
ページコンテンツ
<br><br>
サイト内メニュー
</td></tr></table>
|
D メニューが右側のテーブル
簡略ソースは
<table><tr>
<td>ページコンテンツ</td>
<td>サイト内メニュー</td>
</tr>
</table>
|
こうすると、テキストマッチにおける重要キーワードを多く含むページコンテンツを、上のほうに位置させることができます。ただし、両方とも若干ユーザビリティを低下させます。Cの場合は、ページをスクロールさせないと、サイト内のコンテンツメニューを見渡すことができません。目的の項目があったとしても、訪問者はページをスクロールさせる前に、立ち去ってしまうかもしれません。それとデザイン的にあまりかっこいいとは言えません。Dの場合は、ページ内容とサイト内メニューを一目で見渡せますが、あまり一般的なレイアウトではないので多少違和感を与え、またこちらもデザイン的にもあまりかっこよくありません。しかし、筆者は現在はDのタイプのテーブルが、もっともSEO対策と同時にユーザビリティ対策には最適だと考えています。
また、最近はストリクトなHTMLと言いまして、デザイン装飾（テーブルタグらも含む）を完全に省き、論理的なHTMLでのみ書かれるタグが推奨されています。筆者の場合、勉強不足でそのレベルまで行っていないのですが．．．（−−ゞ。ストリクトHTMLを学ぶには、ストリクトなHTMLの基礎講座を勧めます。
次項：スタイルシート 強調タグ
アクセスアップ考察のトップに戻る
|
