見せたいものと読ませたいもの

Webページは人間が見るものです。
でも検索エンジンは人間でなくロボットです（Yahooは人が見ているそうですが）。
そして、人間に見せたいものと、ロボットに読ませたいものは違います。

Webページの一般的な構成としては、上部にタイトルロゴ、左にメニュー、真ん中にメインコンテンツがある・・という感じです。
これを普通にHTMLで書くと、最初にタイトルロゴをおいて、次にメニュー、最後にメインコンテンツをおくことになります。

検索エンジンの仕組みとして、ページの最初のほうにあるテキストほど重要視する傾向があります。
また、長すぎるコードは途中までしか読み込んでくれません。

では、実際にコードを見てください。
以前にもお見せした、プロフィールのページです。

●CSS前

ここも含め、私のサイトの全てのページでは、上部に共通のメニューがあります。
これは Fireworks で作ったテーブルで作られていて、55行あります。
つまり、メインコンテンツに関係ないコードが、すべてのページの先頭に55行もあるわけです。

●CSS後

CSS後でも、ページの上部にはタイトルロゴとメニューがあります。
でも、HTMLの最初にあるコードは、メインコンテンツです。
メニューのコードはその後においてあります。

CSS後では、各コンテンツをDivタグでくくり、スタイルシートのpositionプロパティで各Divタグの位置を指定しています。
これで、Divタグ単位で自由に配置ができるようになるので、画面で最も上の位置にあるものを、HTMLコードの一番下に置くことができます。

これ、ちょっと驚きでした。

実はこれってスタイルシートの基本なのですが、以前持っていたスタイルシート辞典には、positionプロパティの説明はあっても、こういう使い方があるなんて書いてなかったんです。

このテクニックのおかげで、ページ上部に広告バナーやスクリプトだらけの動的メニューを置いても、HTMLコードの最初にはメインコンテンツをおくことができます。

さて、CSS後のコードを見て、もうひとつ気づかれたことはないでしょうか？
CSS前ではあんなにだらだらと長かったメニューは、いったいどこへ行ってしまったのでしょう？