誤解され続けるCSS+XHTMLによるSEO対策

なぜ、CSS+XHTMLがSEO対策に有効と言われるのか？

CSS+XHTMLでサイトを構築する上での最大のメリットは、文書構造と見栄えが分離出来ることにあります。

従来のようなtableタグのレイアウトでは、文書（コンテンツ）の中にtableタグという見栄えを整えるためのコードが混在していました。

また、コンテンツ自体をtableタグの中に書き込むため、適切なHTMLをもちいて文章に意味を与えることはほとんど無く、HTML的にいえば表データ（tableタグには表の意味があります）のみのサイトとなっていました。

しかし、CSSでレイアウトを行うことにより、htmlファイルには文書（コンテンツ）とその構造のみが記され、見栄えはCSSで別途行うという形をとることができるようになります。

このことにより、HTMLファイルには本来一番重要であるコンテンツのみが書かれることになります。

これが結果として、検索エンジンに対して自分のサイト内容を効率的に伝える手段となり、SEO対策に繋がっていくのです。

ちなみに、CSSを使うということ自体は特殊なことではなく、このように文書と見栄えを分けて作るのが本来のスタイルで、Web標準なんて言われたりしています。

CSSを使うだけならtableレイアウトと何も変わらない

これは非常に重要なことなのですが、単純にCSSによるレイアウトを導入しただけでは、これまでのtableタグによるレイアウトと、何も違いがありません。

レイアウトを行う手法がtableからcssに変わっただけで、本質的には何も変わらないということです。

このことが理解出来ていないと、せっかくCSSレイアウトを導入したにも関わらず、そのメリットや特性を活かしきれないということになってしまいます。

では、一体どのようにしてCSSをもちいれば良いのでしょう？

正しい文書構造を持ったHTMLを書くのが基本

CSS+XHTMLでSEO対策効果を得るには、XHTMLによる正しいマークアップが必要です。マークアップというと難しく感じるかもしれませんが、文章に対してHTMLタグを使って意味を与えていく作業です。

<TABLE>
    <TR>
        <TD>QuickWeblog</TD>
    </TR>
    <TR>
        <TD>
            当サイトはCSSとXHTMLについて解説しています。<br />
            ○○な方は是非ご覧ください。
        </TD>
    </TR>
    <TR>
        <TD>【目次】</TD>
    </TR>
    <TR>
        <TD>
            ・<A HREF="">コンテンツ１</A><BR>
            ・<A HREF="">コンテンツ２</A><BR>
            ・<A HREF="">コンテンツ３</A><BR>
        </TD>
    </TR>
    <TR>
        <TD>CopyRight 2007 hogemoge Allrightreserved.</TD>
    </TR>
</TABLE>

仮に上記のようなHTMLがあった場合、XHTMLで正しく書き直すと以下のようなマークアップが考えられます。

<h1>QuickWeblog</h1>
<p>当サイトはCSSとXHTMLについて解説しています。<br />○○な方はご覧ください。</p>
<h2>【目次】</h2>
<ul>
    <li><a href="">コンテンツ１</a></li>
    <li><a href="">コンテンツ２</a></li>
    <li><a href="">コンテンツ３</a></li>
</ul>
<address>CopyRight 2007 hogemoge Allrightreserved.</address>

tableタグで書いた場合に比べると、全体のコード量が少ないのは勿論のこと、色々なタグが使われているのが分かるかと思います。

使用されているタグの簡単な解説

• <h1>タグ
  • 文書中で最重要な見出しを表すタグ。
  • 状況に応じて、主にサイト名やページ名などに使われる。
• <p>タグ
  • 段落を表すタグ。１段落ごとに文章を<p>タグでで囲みます。
  • 最も使用頻度が高いと思われるタグです。
• <ul>とamp;<li>タグ
  • 順不同のリストを表すタグ。
  • 主に、メニューバーなどで使われる。
  • ちなみに、この部分も<ul>タグを使っています。
• <address>タグ
  • ページ制作者の連絡先などを表すタグ
  • 主にページフッターでのCopyright表示に使われる。

このようにして目的に応じたタグを使用していくことで、文章に対して明確な意味を与えることが出来ます。

この作業はSEO対策的な側面からみると、正しくHTML書くというだけではなく、自サイトの中で大切なものとそうでないものを明確に分けるという意味もあります。

そういう意味では、正しいHTMLを書くだけでSEO的な部分は完結しているともいえます。ただ、この状態ではデザインという要素が存在しない状態で、人の目で見ると何も伝わらないのです。

ここで始めて、CSSの出番です。

HTMLだけじゃ見た目が悪い！だからCSSで整える。

このブログで使われているCSSを取り払い、HTMLだけの状態にするとこんな状態になります。非常にシンプルで、デザインのデの字も無いと思います（笑）

これを、CSSをもちいてレイアウトしていくと、このブログのデザインになるのです。つまり、CSS自体にははSEO対策的効果などなく、正しく書いたXHTMLの見栄えを整えるだけです。

もしくは、文書構造と見栄えを切り離せることで、XHTMLを正しく書くための補助の役割を持つだけです。

CSS+XHTMLによるSEO対策のまとめ

1. CSS自体にはSEO的な効果は一切無い。
2. XHTMLを用いて、正しくマークアップすることが基本。
3. XHTMLだけでは見た目がアレなのでCSSで整える。

余談：HTMLとXHTMLの違い？？

こんかいの記事では、HTMLとXHTMLという言葉が混在していましたが、CSS+XHTMLに限らずCSS+HTMLでも同様の結果を得られるかと思います。

ただ、HTMLに比べるとXHTMLの方が厳格な記述を求められるので、XHTMLを使用することで必然的にマークアップスキルが向上し、より良いHTMLを書くことが出来るようになるかと思います。

また、HTMLとXHTMLの違いについてはHTMLとXHTMLの大きな違いは９つある・・・の方にまとめておきました。