近年、サイト制作現場においてアクセシビリティやメンテナンスビリティなどの観点から、フル CSS（スタイルシート）でのサイト構築が一般的となりつつある。そこで、今回は CSS の歴史を振り返りながら、フル CSS でサイト構築をする SEO のメリットを紹介しよう。
CSS の歴史（勧告から普及まで）
Web 標準団体の W3C では視覚要素であるスタイルを定義する言語、CSS（カスケーディング･スタイル･シート）を1996年12月に勧告。しかし当時、一般的なブラウザである Internet Explorer5（以下 IE5）や Netscape 4.7（以下 NN4.7）では CSS の実装や解釈が異なるという問題があった。
そのため、クライアントが要求するデザインを実現するには、フル CSS でサイト構築を行う事は困難であり、どのような環境でもデザインが同一に表示することが可能な、テーブルレイアウトでのサイト構築が広く行われるようになった。
しかし、このテーブルレイアウトという手法は、検索エンジンの視点からみると文書構造と視覚構造の分離がなされてなく、複雑な HTML ソースとなるためページの情報を文法的に適切に解釈する上で障害となった。
その後、ブラウザのバージョンアップに伴い、CSS の実装が進み、解釈が正確となり（今だ一部のブラウザでは解釈違いあり）、フル CSS でのサイト構築が普及したのだ。
同時に、制作現場では CSS の解釈に問題が多いレガシーブラウザ（IE5.5 以下、NN4.7 以下、MacIE など）を、ユーザーの使用率が低下した事から対象ブラウザから外し、積極的に CSS を導入する流れとなったのだ。
CSS レイアウトによる SEO 上のメリット
1.HTML ソースコードのシンプル化
CSS を用いることで HTML 文書から視覚要素を排除することが可能となる。このメリットは、HTML 文書から視覚要素を排除することによりソースコードがシンプルとなり、文書情報を検索エンジンに正確に伝えやすくなる点だ。
また、ソースコードがシンプルとなる CSS レイアウトはテーブルレイアウトと比較しファイルサイズが大幅に軽減される。
ファイルサイズの軽減はブラウザの表示速度が向上するほか、SEO においても重要となる。なぜなら、検索エンジンによっては一定サイズ以上のファイルを正確に読み込めない場合があるからだ。
ファイルサイズの軽減はアクセシビリティ向上のほかに、SEO においてもメリットがあると言えよう。
2.テキスト主体のマークアップが可能に
CSS を用いることで HTML 文書はテキスト主体のマークアップが可能となる。検索エンジンは、テキストブラウザの Lynx と同様の形式で認識しておりテキスト情報を好むため、HTML 文書にテキスト情報を記述することにより、SEO 効果を高める事となるのだ。
3.HTML ソースの記述順をコントロールする事が可能に
CSS レイアウトを用いらない場合、HTML に記述するソースコードはブラウザの左上から右下に向かって記述される。例えばサイドナビゲーションが左側に存在する場合、ページの固有情報が記述されているコンテンツエリアは、HTML ソース上ではサイドナビゲーションが記述された後に記述される。
しかし CSS を用いることで、サイドナビゲーションが左側に存在する場合でも、ページの固有情報が記述されているコンテンツエリアを HTML ソース上部に記述する事が可能となるのだ。
検索エンジンは HTML ソース上部に記述されているテキスト情報を重視する傾向にあるため、ページの重要な内容を HTML ソース上部に記述することは、SEO 効果を高める事に繋がる。
CSS を利用したスパム手法について
前述のように CSS を用いることで SEO 効果が多く得られる一方で、CSS を悪用し検索エンジンを騙すスパム手法も存在する。
例えば、背景色と文字の色を同一としたり、文字のフォントサイズをユーザーが認識できない位に小さくするなど、この様な行為は、ユーザーには見えない（見え難い）情報であり、検索エンジンにのみに情報を伝える事となるためスパム行為と判断される場合がある。
今回は CSS の歴史を振り返ると共に、CSS を用いる事での SEO 上のメリットとスパム手法について紹介してきた。貴方のサイトはユーザーだけでなく検索エンジンにも、正確に情報が伝わり構築されているだろうか。
また、気付かないうちに CSS を用いて検索エンジンスパムを行っていないだろうか。いま一度、貴方のサイトの CSS を見直すと共に、SEO の観点からもフル CSS でのサイト構築を考えてみたらどうだろうか。
執筆：インターネットマーケティング事業部 SEO グループ ディレクター 柴田源樹
