h1,h2タグに背景画像

質問

よろしくお願いします。

このページでoff-leftというテクニックを知りました。
http://www7.plala.or.jp/zeroxstyle/use_xhtmlandcssoffleft.html

h1タグなどに背景画像として文字画像を表示させ、テキストはCSSのtext-indentで画面の外に追いやるというものです。

確かにこれなら見た目も綺麗だし、文章構造もすっきりしたアクセシブルなサイトになりますが、googleからSEOスパムと判定されるのではないか疑問です。

実際にこのテクニックを使っているサイトってあるのでしょうか?
素直にh1タグにalt属性つきの画像を入れたほうが無難でしょうか・・・・?

回答No.1

JeanneNet · ベストアンサー

こんにちは、じゃんぬねっと です。

微妙は微妙ですが、そういう微妙なものはスパムと判定されません。
完全に悪意がある不正な対策をスパムと判定するようです。
例えば「H1 にキーワードをつめこみまくる」とか。

> 素直にh1タグにalt属性つきの画像を入れたほうが無難でしょうか・・・・?
無難は無難なんですが、モバイルから表示した時をイメージしてみてください。
前者の方法の何がアクセシビリティ的に良いかを考えるとわかるでしょう。

お礼

じゃんぬねっとさん、回答ありがとうございます。

なるほど、「悪意」が無ければとりあえずは大丈夫なんですね。

よくよく考えたら、このoff-leftテクニック、例えばモバイル環境で[スタイルシートON][画像OFF]の設定にしてると、画像も文字も表示されず、見出しが跡形もなくなっちゃうんですね。

とすると、alt属性つきの画像をh1タグで囲ったほうが実は親切、ということになりますね。

回答No.2

noname#19399

こんにちは。

スパムかどうかの判定はgoogleでどう処理しているのか分からないのでなんとも言えませんが、海外のサイトでは結構このテクニックを使用しているところが多いみたいですね。

スタイルシートでレイアウトしているサイトを色々紹介しているところ（off-leftテクニック使用してます）を参考URLにはっておきます。

参考URL：

http://www.804case.com/

お礼

ご回答ありがとうございます。
紹介してくださったサイト、とても参考になります。

デザイン的にも素敵なサイトが多いですね。
ソースを見て勉強してみます。
ありがとうございました。