画像置換に関する考え方

WEB標準からみるに最近では、画像置換に関して、『alt属性が必要な画像はimg要素で記述』『alt属性必要でない画像は画像置換を使う』という考えが主流になりつつあるようです。

どういうことかというと、『text-indent:-9999px』の記述は避けるべきだろうとの考えからだと思います。

なぜ、このような考え方にいたったのでしょうか？

画像置換の利点・欠点など複数の視点から画像置換について考察していきたいと思います。

なぜ画像置換という技術が普及したのか?

画像置換が重宝されているのは JavaScriptを使わずにロールオーバーを実装することが可能な為であります。

これによりJavaScriptがOFFの環境でもロールオーバーを体感することが可能になりました。

画像置換の欠点は?

CSSでテキストを非表示にして背景画像を表示している為、CSSがONで画像の表示がOFFの環境で閲覧した際に、何も表示されないという現象が発生します。

また、背景画像を印刷しない設定(デフォルト)になっている場合、印刷時に何も表示されないという現象も発生します。印刷用CSSにtext-indetn:0pxを設定することで文字は表示することができますが、そもそも肝心の画像が表示されないので微妙です。(2007/02/19追記)

画像置換の利点は?

先に述べたロールオーバーなどの利点に加えて、携帯などのCSSに対応していない環境では画像ではなくテキストで表示されます。

CSSに対応していない環境は、装飾されていない情報 つまり(X)HTMLで情報が出力されることが前提となっている為、一部分だけが画像だと見た目がよくありません。
(CSSをOFFで見たときにロゴやメニューだけ画像の状態を想像してください)
また、一部の音声ブラウザなどは通常のテキストと同等の扱いで読み取ってもらえます。

alt属性必要でない画像は画像置換?

これはすごく意義のあることです。

装飾およびレイアウト目的の画像の代替テキスト(ミツエーリンクス)を参考にしてもらいたいのですが、意味を持たない画像の代替テキスト、つまり、alt属性の解釈はユーザーエージェント毎に異なります。

alt属性が必要でない画像を、画像置換で表示することによりユーザーエージェント毎の差異を限りなく軽減できます。

画像置換の問題点は?

よくあげられる問題点としてSEOスパムに関する問題があります。

Googleなどの検索エンジン各社は、ガイドライン上で『隠しテキストや隠しリンクを使用しない。』としており、 これに反するサイトをスパムサイトとして検索エンジンの検索結果から除外します。

その為、画像置換がスパム行為に該当するのではないかとの憶測が業界全体に流れています。

これに対してGoogleは、代替目的でこの手法を利用している場合それはスパムとみなさないとコメントしている為、現時点ではスパムとみなされません。

ただ、今後もスパムとしてみなされないかどうかはわかりません。

この手法を悪用する業者が増えれば、検索エンジン各社が対応するかもしれません。
(ただし、SEOを生業の一つとするボクの感覚ではこの手法が代替を目的としている限り、スパムとして認識されることはないと思います。この手のスパムはクローラーが判断できない為、フィルタリングのトリガーが手動になっている為です。)

検索エンジン各社が対応するかもしれない為、text-indent:-9999pxを利用しての画像置換は好ましくないとされているわけです。

ボクの画像置換に関する考え方

ここからは私的な意見になります。納得のいく方も、いかない方も、こういう考え方のやつもいるのだなという感じできいてください。

(X)HTMLとCSSの考えの中にWEBサイトの構造と装飾の分離という考え方があります。

メニューのリンクなどに画像を使う場合、それは構造として(img要素で)記述すべきか、装飾として(CSSで)記述すべきかと疑問が発生します。

やはりメニューの画像は『デザイン』として使用されることが多いでしょう。つまり装飾を目的としてです。

その場合、CSSで記述されるべきです。

デザイン変更をする場合に(X)HTML上のimg要素のsrc属性を書きかえるのはナンセンスです。

CSSで記述するときに、現在のCSSの実装状況では-9999pxという記述方法は致し方ないと考えています。

画像置換を使う本当の理由

さて、えらそうな事を書いてみましたが、ボクが画像置換が好きなホントの理由はSEO対策が目的です。

ボクの方で行ってる調査では、現在YSTはaltに記されている文字を検索対象に含めていません。
(Googleもちょっと前は検索対象に含めていませんでしたが、今は含めているようです)

検索エンジンは時期により、特定の属性を評価したり、しなかったりします。

似たようなものですと、meta要素のkyewords属性やdiscription属性があり、これは一時期全く評価されませんでしたが、最近は評価されているようです。

これは検索エンジンのトレンド(流行)に影響されますが、現在は代替テキストをaltに文字を記述するのは（YSTの）SEO上、意味がない行為になります。

過剰SEOは別にしても、WEBサイトの趣旨を検索エンジンに伝える為には、画像の文章をalt属性ではなく、文章で記述して画像置換したほうが良いかなって考えてます。

とりあえず

画像置換は一長一短、利点欠点を理解した上で使用しましょう。
次回は画像置換の欠点を軽減できる方法について解説していきたいと思います。

関連エントリー

一番簡単な画像置換の方法
画像置換でメニューを作る
画像置換
【SEO対策tips】最適化された(x)html-img要素

スポンサードリンク

«画像置換でメニューを作る | メイン | BIR-もうひとつの画像置換»