text-indent: -9999px;などの画像置換について / 35歳からのWEB遊びブログ

Googleが「隠しテキストはGoogle のウェブマスター向けガイドライン違反です」と題した、画像置換をする際にどういった方法をスパム判定するのかという見解を公式ブログに掲載した。

私自身はだいぶ前に、置換されたテキストと画像（に記載された文字等）の内容が大きく違わず、画像置換によってユーザーの認識向上などにつながるのならばスパムにはならないといったGoogleの判断をどこかで読んだ記憶があり、既に画像置換は積極的に利用してきた。
どこかにソースが無いかなと改めて捜してみるととあるWEBクリエイターのblog様で、以前から問題無い画像置換はスパム判定していない旨のエントリーが見つかった。

よく使用する画像置換の方法

毎度のサンプルサイト二眼レフ総合サイトさんでも、画像置換は複数箇所で使用している。
グローバルメニューはCSSスプライト。CSSスプライトはメニュー画像を以下のような一枚にまとめる方法で、画像置換は必須となる。

CSSスプライト

この方法はSEOはもとよりCSSのみで動作するので、Javascriptを切っている人にもロールオーバー表示が可能なので好んで使っている。

画像置換を行う際に、私が使う方法は主に二つあり、一つは一般的なtext-indext: -9999px;を利用する方法。
ただし私は小心者なので、いつかtext-indentの画像置換がスパム判定されることがあるとしたら、検索エンジン側はCSSファイル内の「-9999」という数字に目を付けるのではないか？と邪推し、-9999pxではなく-8600pxといった9の入っていない「危なくなさそうな」数字を使用している。特に意味があるとは思えないのだが・・・。

もうひとつの画像置換は書籍で学んだもので、通常はこちらを使用している。要素の上部（もしくは下部）に画像サイズと同じpaddingを設定する方法。width:200px、height:60pxの画像の場合は、以下のように設定する。


#hoge {
	width: 200px;
	height: 0;
	padding-top: 60px;
	background: url(画像パス.gif) no-repeat 0 0;
	overflow: hidden;
}

当然インライン要素ならdisplay: block;も必要。IEにバグのあるposition指定と併用しても特に問題なく表示されるが、音声ブラウザ等に適合するかは未確認。
そう。text-indentの画像置換がGoogle公認になったとはいえ、制作側がtext-indent: -9999px;などの画像置換を嫌う理由はSEOスパムの危険性だけではなく、画像off時や読み上げブラウザなどの環境に対応していないということも大きな要因だったはずである。

蚊帳の外のYahoo!はどうなの？

こういった技術系？の話題では毎度蚊帳の外のようなYahoo!での画像置換SEOはどう判定されるのだろう。基本的には、Googleのガイドラインに準じていれば問題ないという判断でいいと思うのだが。
そんな中、Yahoo!JAPANのTOPページで面白いものを見つけた。以下が見慣れたトップページのロゴ周りですが・・・

CSSの一部指定を解除してみると・・・

当該部分のCSSソースは以下のようになっており、太字部分の指定をFirebugで解除してキャプチャーした。


#mhicon li a {
	display:block;
	height:54px;
	margin-top:15px;
	overflow:hidden;
	text-indent:-9999px;
	width:54px;
}

まさかご自身で使っておいて、スパム判定はしないですよね？ヤフーさん？

35歳からのWEB遊びブログ