画像置換について

なぜSEOスパムとされる可能性があるといわれているか

間違わないで欲しいのが、画像置換を行う行為自体はSEOスパム行為ではない。文字を飛ばしても画像に置き換えているんだから、装飾のために見た目を変えているだけで、画像置換自体は文字情報を隠しているという訳ではないので、装飾のために行っている画像置換はSEOスパム行為ではない。ただ、この画像置換で使っているCSSテクニックで、テキスト情報を画像に置換して表現しているのではなく、「見た目は隠してあるからそんな情報が埋め込まれていることは分からないんだけど、実はSEO効果を狙ってHTMLにテキストが埋め込まれている」ということを行うことができ、これは明らかにSEOスパム行為である。この行為が増えた場合は、検索エンジンがこれをSEOスパムと判別するようになるかもしれないので、これと同じテクニックを使っている前者を区別するすべが難しいため、SEOスパムとされてしまう危険性があるとされている。

アクセシビリティの為に、例えば音声ブラウザの為に、見た目上は見えないんだけど音声ブラウザで読み上げると「ここからナビゲーションです。」といった情報を出すというのもあるけど、これも上記の画像置換と同様にSEOスパムとされる危険性はあるとされている。スパム行為じゃないのにね。

実際に画像置換のテクニックを使っていたサイトが、SEOスパムとされて検索エンジンに表示されなくなったりしたという話は聞く。ただ、これの真偽は、SEOを生業としていない俺には分からない。

そういや、例えばスペーサーにテキストを入れて記述しまくるSEOスパムとかあったけど、スペーサー使うとSEOスパムとなっちゃう危険性があるからスペーサーは使わないって話は聞いたことないな。

文書構造と装飾をHTMLとCSSに分けるべき

例えば見出しの場合、見出しとは「それ以下のコンテンツが何を表しているかを簡潔に表し、文章を読みやすくするもの」なので、デザイン性はHTML文書としての情報には含まれず、「それ以下のコンテンツが何を表しているか」までが文書としての情報なので、テキストでマークアップしてデザインはCSSで再現するべきだとうい考え方がある。

これには利点がある。
同じHTMLで状況に応じてデザインを変えるということができる。例えば、iPhoneで見たときに見出しも画像でマークアップしてたら、重いし、デザインも変えれない（それこそimgを背景画像で置換すれば変えれる）けど、分けてあれば解決する。他には同じHTMLでCSSだけ変えて、まるっとサイトデザイン変えることもできる。blogなんかでは偶にある。

これらのことから、俺個人の理想としては、ロゴや挿入画像などのビジュアルも含めてコンテンツであるから、その見た目でその幅その高さであることまでが情報としてHTMLにマークアップされるべきであり、imgでwidthとheightとaltを設定すべき。見出しやリード文・背景などは、ビジュアルはHTMLに記述されるべきではないから、テキスト等でマークアップしCSSで装飾すべき。よって画像置換も現状で出来るCSSのテクニックとして全然有りだと思うが、そもそも、フォントとか画像にしないと駄目なデザインじゃなくて、デバイスフォントでも見栄えのよいデザインをすればいいじゃんと思う。なんなら、サイトにフォントを埋め込む？方法もあるよね。現状で使えるもんかは置いといて。
ていうか、SEOスパムなんてあるから問題になるわけで、今使えるCSSの仕様を最大限に利用して装飾を制御しようという試みは非常におもしろく素晴らしいことで、本来は問題視されることではないと思う。

因みにGoogleは、自サイトのロゴをdivと半角スペースでマークアップして背景画像として表示している。文字を飛ばしたり文字の上に被せたりしている訳ではないが。
もしかすると、画像置換がスパムと認識される可能性があるから、こうしているのだろうか？
しかし、これではHTML文書としてはどうかと思う。

こういう考え方に対するいいわけ

自分でいいわけ的にこういう考え方に対して反論してみる。

そのwebサイトにとってその情報はどんなものとしてHTMLに記述されるべきかと考えてマークアップすればよいって考え方をすれば、ある意味文書として情報だけHTMLに記述しているともいえるんでない？

そのwebサイトにとって、「そのデザインであることも含めて見出しとしての情報」であれば、例えば、印刷時にもそのデザイン通り表示したいってことは、「そのデザインであることも含めて見出しとしての情報」なのだから、そこまでを記述してHTML文書としてなりたつからimgでマークアップすればよい。

現状は「そのデザインであることも含めて見出しとしての情報」であるケースが多いように思う。「いかなる状況下においてもそのデザインであること」は重要視されるし、リニューアルの際は、コンテンツや構造自体が変わる。コンテンツや構造が変わらずにデザインだけ変えたいなんてケースは稀だ。

コーダーとしてはどうするか

以前は、普遍性が高いものだけ画像置換を行っていた。例えば、グローバルナビや各カテゴリの見出しを画像置換するし、それ以下の階層の見出しになると数も多くなって工数が多くなり対応しきれないため行わない。理由としては、冒頭の理由以外に以下の2点があったから。

• imgで入れると変な隙間が出るときがあるので飛ばした方が逆に工数がかからない場合がある
• 印刷時はそれ用のレイアウトを用意するようになるだろうと考えていた

しかし、現状は、以下の3点から通常は画像置換を行わないとしている。

• 噂の出所が増えてきた
• 今後altもすべての検索エンジンが検索対象に含む可能性はある
• 「印刷時にブラウザ表示と同じように表示したい」という要望が多い

検索エンジンがCSSまで読むことはないんじゃないかなと思うけど、SEOを生業としていない俺はそこまで詳しくもなく動向も読めず答えはだせないので、より無難な選択をすべきだろう。また、もし印刷時にブラウザ表示と同じようにしたいという要望が後から出てきたときの工数を考えると、かなりの手間になってしまう。よって、通常は画像置換を行わないという選択をしておいて、もしSEOやCMSなんかの運用上の理由で、画像置換を使ってくれという場合に使用するとしておくのが妥当だという結論。

まとめ

なんだか色んな話をまぜちゃってめちゃくちゃになってる気もするが、結局は、SEOはトレンドもあるので明確な答えは存在せず、都度対応するしかないんじゃないか、と思う。そのサイトで画像置換を行うかどうかは、今後の対応の工数と現時点での効果を比較し、妥当だと思われるところで手を打つのが無難なんじゃないかな。

画像置換については以下のメリット・デメリットをふまえた上で、そのサイトにとってどうすべきかを検討し、使用するしないを決定すべき。特に指定やこだわりがない場合は、imgで入れておくのが無難。

メリット

一枚のHTMLファイルからいろんなデザインを再現可能

HTML自体が軽くなる

再利用性が高くなる

デメリット

SEOスパムとされる可能性があるかもしれない

何もしていない場合の印刷時など、CSSオン・画像オフ環境で表示されない