第15回　SEOとデザインクオリティその4～CSSと検索エンジンスパム

2007.1.10 WED

第12回で解説したWebページの構造化とデザイン性とを両立させるためには、CSSの導入が不可欠となる。もともとCSSは、Webページの論理構造とデザインを分離させるために存在する。CSSを導入することによって、論理構造を損なうことなく、多彩なデザインを展開することができるようになるのだ。

（解説：株式会社ディーオーイー　コンサルタント　徳田ひさぎ）

［プロフィール］
株式会社ディーオーイー（DOE）●2007年1月より、ECJコンサルティング株式会社（ECJC）のSEMコンサルティング事業を統合。DOEでは、数々の有効なネットマーケティング手法を定着させてきたECJCのサービスを、新サービスブランド 'DOE Search' として提供する。
http://www.doe.jp/
SEOに関するご相談はhttp://www.doe.jp/inquire/から。

効果的なCSSの使用例

以下のキャプチャ画像2点を、サンプルとして見比べていただきたい。

A：大見出しを画像で作成した例

B：大見出しをテキストで記載した例

どちらも同じように見えるが、［A：］は大見出し「シルバーアクセサリー」が文字も含め画像になっており、［B：］は< h1 >の背景にCSSで画像を配し、「シルバーアクセサリー」はテキストで記載している。

B：大見出し部分のHTML

< h1 >シルバーアクセサリー< /h1 >

B：CSS

h1 {
color: #ffffff;
font-size: xxx
width: 350px;
height:55px;
text-align: right;
background: url(../image/title.jpg) no-repeat;
}

このようにCSSを使用することによって、各見出し部分を画像にすることなく、画像と同じような効果を出すことが可能となるのだ。

検索エンジンスパム

さて、CSSテクニックの中には、検索エンジンスパム（Search Engine SPAM、以下、スパム）となってしまうものがある。

スパムとは、特定のWebサイトを検索エンジンの検索結果上位に表示させるために、何らかの不正な仕掛けを施すことである。検索エンジンを騙すための行為であり、それによって検索結果の整合性が乱され、検索エンジンはユーザーが望む情報を提供できなくなる。

そこで検索エンジン側では、それらの仕掛けが施されたWebページを検索結果から除外するべく、さまざまな仕組みを開発してきた。検索エンジン発展の歴史は、スパムとの戦いの歴史でもあるのだ。数年前と現在では、検索エンジンのアルゴリズムは大きく異なっている。それは、各検索エンジンが、それぞれの検索結果に優良な情報を含んだページを表示させるために努力を続けてきた結果であろう。

Webクリエイターの中には、それが危険であることを知らずに、スパムと認定される可能性の高いテクニックを使ってしまっている方もいるようだ。しかし、検索エンジン側にスパムと認定されると、検索順位の下降、インデックスからの削除など、重いペナルティが科せられることがある。

むろん、検索エンジン側では、「何をもってスパムと認定するか」の基準などは公表していないが、Web上には、スパムについてのさまざまな情報サイトや実験サイトが存在する。常に最新の情報を入手し、突然ペナルティを科せられることのないよう、備えていただきたい。

代表的なCSSスパム

それではここで、CSSを使ったスパムの代表的な例を挙げておこう。

●隠し文字
ブラウザに表示されない、もしくは見えないように、テキストを埋め込むスパム。具体的には、テキストカラーを背景色と同色、もしくは、背景色に限りなく近い色に指定し、テキストを記述する。類似テクニックとして、1px程度の小さなフォントサイズを指定する手法もある。また、そうして人間の目には読めないようにしたテキストに< strong >や< em >などの論理的強調タグでマークアップをする、さらに悪質なスパムもある。
キーワードをずらずらと羅列したようなページはユーザーに違和感を与えるため、それらを隠すことが目的である。

●隠しリンク
上述の隠し文字や、縦横1pxの極小画像などに、ハイパーリンクを設置する手法。次回解説するように、検索エンジンの多くはリンク構造を評価基準のひとつとしているとされるため、それを逆手にとるため生まれたスパムである。

●表示位置の不正指定
テキストの表示位置を、視覚ブラウザで通常表示される範囲の外に指定するスパム。CSSのdisplay、position、text-indentなどを用いる。隠し文字スパムと同様、検索エンジンロボットはテキストを収集させ、かつ、ユーザーの目には触れないようにすることが目的である。

よくある誤解

逆に、現時点ではスパムとされていないが、スパムと思われていることが多いCSSの使い方についても紹介しよう。

●< hx >要素の文字サイズ変更
< hx >タグで囲ったテキストを、CSSを用いた文字サイズ指定によって、表示サイズを変更すること。サイトや本によって、それはスパムであるとしていたり、スパムではないとしていたり、意見がまちまちであるため、混乱を招いているようだ。

我々は、これはスパムではないと判断している。

もちろん我々には、「スパムではない」と断言することはできないが、< hx >要素を配した箇所が論理構造上「見出し」なのであれば、スパムには該当しないと考えている。それは、今回の冒頭部で述べたように、HTMは文書の論理構造を定義するものであり、CSSはデザイン表現を補うものであるからだ。

つまり、< hx >が論理構造上正しく見出しとして配されているのであれば、見栄え良くするため大きさを調整したからといってスパムには該当しないはずだ、と、判断できるのである。もちろん、< hx >要素のテキストを可読性が損なわれるほどに小さくしてしまえば、それはスパムとなる危険性が相当高い。

CSSを使用する意味とは

今さら言うまでもないことだが、SEOは、ロボットを意図的に騙そうとするものではない。SEOとは何か？と、問うたとき、「検索エンジンを騙して上位表示させるテクニック」という返答がいまだにあるのは、非常に残念なことである。

「ユーザーが得る情報と、ロボットが読み取る情報は、同じでなければならない。」

これが、我々の考えるSEOのあり方だ。

CSSを駆使することで、見栄えを犠牲にすることなく、それが実現できる。今回紹介したほかにも、本来テキストであるべき情報を画像にせずとも、グラフィカルなデザインを実現できるテクニックは、多々存在する。

ぜひ、デザイナーの創意工夫をもって、視覚的に美しく、かつ、目標を達成できるWebサイトを構築していただきたい。

次回につづく

第15回　SEOとデザインクオリティその4～CSSと検索エンジンスパム