SEOの対策とはいっても、そのほとんどは「本当に効いているのかどうかわからない」ような曖昧な作業の積み重ねです。
間違いなく効いていると言える部分はもちろんあって、それはまた別の機会に譲りますが、「こうやったらいいかもしれない」ということを、試行錯誤で取り組み続けています。
最近、こだわっているのは、「DIVタグやSPANタグを基本的に使わない」という試みです。
なぜかというと、XHTMLでDIVタグとSPANタグというのは、そもそもテーマのないただの入れ物という位置づけで、XHTMLの文書構造を考えた場合、無意味な範囲を示すことになります。
これがマイナスの評価を受けることはたぶんないのですが、正しく整理された文書構造を持っていることは、評価に影響がありますので、もっと意味のある適切なタグを積極利用する、という考え方ですね。
例えばホームページの一般的なレイアウトとして、ヘッダー、コンテンツ、カラム、フッターというように、ブロックを分けることが基本的なスタイルになります。
普通はこれをDIVタグで作っていくわけですが、これをUL～LIタグを使ったリスト構造にします。
簡単な構造で組んだ見本のソースを貼ってみました。
<ul class="body"> <!-- ヘッダーブロック --> <li class="header"> <p>ヘッダーです。</p> </li> <!-- ヘッダーブロック END--> <!-- コンテンツブロック --> <li class="content"> <p>コンテンツです。</p> </li> <!-- コンテンツブロック END --> <!-- カラムブロック --> <li class="column"> <p>カラムです。</p> </li> <!-- カラムブロック END --> <!-- フッターブロック --> <li class="footer"> <p>フッターです。</p> </li> <!-- フッターブロック END --> </ul>
CSSはこんな感じです。
@charset "utf-8";
body {
line-height: 1.2;
margin: 0;
padding: 0;
color: #444;
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 14px;
position: relative;
}
ul,ol,li{
list-style: none;
margin: 0;
padding: 0;
_zoom: 1;
_vertical-align: bottom;
}
p{
padding: 10px;
margin: 0;
line-height:1.2;
}
ul.body{
display: block;
width: 900px;
background-color: #eee;
margin: 0 auto;
overflow: hidden;
}
ul.body li{
display: block;
overflow: hidden;
}
ul.body li.header{
height: 100px;
background-color: #ddd;
}
ul.body li.content{
width: 700px;
background-color: #ccc;
float: left;
}
ul.body li.column{
width: 200px;
background-color: #bbb;
float: left;
}
ul.body li.footer{
clear: both;
width: 900px;
background-color: #aaa;
}
LIタグを使うときに、気をつけなければならないのが、InternetExproler6です。
ほかのブラウザではぜんぜん問題なく表示されていても、このIE6でliタグをブロック化すると、不思議なことに微妙な隙間ができて、非常に見苦しくなったりします。
このブラウザはWindowsXPに内蔵されているデフォルトのブラウザであることから、2010年現在でも、未だに30%程度のシェアを持っていて、無視のできないブラウザなんですが、CSSの解釈に間違いやバグが山のようにあって、特に苦労しながらCSSを勉強した人にとっては、涙が止まらないほどの苦い思い出が、走馬灯のように駆け巡るのではないでしょうか。
上に挙げた簡単なソースの中にも、実はこのIE6対策のための仕掛けがしてあって、16行目と17行目がそれにあたります。
_（アンダースコア）から始まっているのは、IE6だけ読ませるためのCSSハックと呼ばれるテクニックのひとつですが、あまり多用すると後々の調整が厄介になるので、ここではリスト関係のタグにまとめて指定をかけておきます。
この、_zoom:1;と、_vertical-align:bottom;については、もうコーディングをするときにはお約束で最初から入れておくのが無難でしょう。
XHTML/CSSでコーディングすると、どうしてもデザインの体裁上、無意味にDIVタグを重ねてしまうことがありますが、このようにliタグを包括するULタグにはもちろん意味がありますし、この中に更にUL～LIを入れ込んだり、DL～DT～DDタグなども使うと、より美しい文書構造になっていきます。
こうした階層構造のソースは、CSSを解除してみると、その美しさが際立ちます。
フッターメニューの一番左下に、「CSSを解除」というリンクが貼ってありますが、これをクリックすることで、ページのCSSが解除されますので、ぜひご確認ください。
このようなコーディングだけが、SEO対策の全てではないのですが、構造的にわかりやすいことはメンテナンス上でも重要なことですし、CSSが当たり前になってきた今、改めて少しでも美しいソースにこだわることは、差をつける上で外せないことだと思っています。
サイトロジックでは、コンテンツ制作に関わるさまざまなノウハウを、惜しみなく公開しています。
コンテンツ制作のご参考に、ぜひお役立てください。
全21件の記事中最新の10件を表示 >> 続きを見る