divタグを使ったレイアウト(1)

まず、こちらをご覧下さい。

ヘッダ
左側
右側
フッタ

単に文字だけを見るなら何の変哲もなく上から下に向けて書かれている文字群ですね。しかし単語の意味に照らし合わせてレイアウトを考えてみると、単語の意味とレイアウトが一致していません。

では、ここで言うレイアウトとは誰の視点で見たものでしょうか? 当然人間の目で見たものですね。人間はレイアウトや配色などに気をかけながら全体を見ようとするのです。つまり上記の文字群は人間が見るのには、ふさわしくないレイアウトと言える状態です。

しかしSEO対策を考える場合、上記の文字群を見るのは検索ロボットです。検索ロボットは人間のような美的感覚を持ち合わせていませんから、単純に文章のみを読みに来ます。ごちゃごちゃしたレイアウトの文章を読むより単純に上から下に読み進めていけば良い構造になっている文章の方が、検索ロボットにとっては読みやすいわけなのです。つまり上記の状態は検索ロボットに都合の良い構造になっているわけです。

ウェブページを作る場合に気を付けなければならないのは、見に来る人間と検索ロボットの双方が共に満足する構造にすることです。では、上記の文字群をどうすれば良いのでしょうか?

ヘッダ
左側
右側

これはどうでしょうか? それぞれの単語の意味にふさわしいレイアウトになっていませんか? しかし検索ロボットの目には、冒頭の文字群と同じ状態にしか見えていないのです。つまり同じ状態ということは記述しているhtmlタグに違いがないということです。

しかし人間の目で見れば間違いなくレイアウトが変わっていますよね。後者は単語の意味に合わせて適切に配置された上に、それぞれの周囲に罫線が付け加えられています。htmlについて若干知識のある方なら、「tableタグを使ったのかな?」と思うかもしれません(実際にはtableタグを使っていないのですが)。

何故このようなことが出来たかと言うと、それはCSS(スタイルシート)の効果です。CSSを使うことによって、人間と検索ロボット双方がそれぞれの感覚において見やすいと思えるレイアウトを実現させたのです。

タグの構造については次回から解説していきたいと思います。

(追記)二段目の幅サイズを修正してIEでも段がずれないようにしました。

posted by ひっそり | Comment(0) | TrackBack(0) | div
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/15427211
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。