SEMリサーチ

企業で働くウェブマスター向けに、インターネット検索やSEOの専門的な話題を扱います

フル CSS でサイト構築をする SEO のメリット

近年、サイト制作現場においてアクセシビリティやメンテナンスビリティなどの観点から、フル 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 グループ ディレクター 柴田源樹

COPYRIGHT © 1997-2021 渡辺隆広(わたなべ たかひろ) ALL RIGHTS RESERVED.

お問い合わせ(お仕事の相談、講演依頼など)

SEMリサーチ(www.sem-r.com)に掲載している文章及び図版の無断使用及び転載を禁じます。著作権侵害行為には厳正に対処します。

免責事項:SEMリサーチは、本記事中で触れている企業、商品、サービスの全て(情報)について、有用性、適合性、正確性、安全性、最新性、真実性に関する一切の保証をしておりません。各自の判断でご利用下さい。