カイカブログ

フリーランスデザイナー カイカデザインのブログ
デザイン、html、wordpress等についてほとんど役に立たない単なる感想レベルのたわごとを綴っています

text-indent:-9999px;ってSEO的にどうなの?2014

よくpsdで「焼き込みカラー」だの「光彩」だのめちゃくちゃ凝った効果などをかけたボタン画像をコーディング時に書き出すとふわふわ感が見るも無惨に消えている、、という惨劇に直面することがありますw そんな時の救世主「text-indent:-9999px;」

こいつを使えば光彩かかってようが、「リニアライト」設定されてようが背景画像にぶっこんじゃうからカンケーねえぜ!ちぎってやるぜ! というコーダーさんやデザイナーさんが時折おります。(後者絶対フィクションだろ)

しかしまあ結構ご存知の方も多いと思いますがSEO的にこのtext-indent:-9999px;ってグレーゾーンなんじゃないの?と。。と言いながら世の中結構-9999px飛ばしちゃってんだというサイトもありますよね。

個人的にはボタンのロールオーバー時の設定がめんどくさいので(最大の理由w)私はせこせこボタンとかは逐一画像としてコーディングして地味ーにaltで対応してますw だってこっちの方が作業ラクなんだもんw

冒頭の光彩云々は

●可能であればpngで書き出す
●極力gifで頑張って書き出して背景画像を調整(これが紆余曲折あるんだけどw)
●自分でそれっぽくpsdの効果をいじってgifで書き出しても違和感ない効果をねつ造する

・・・で大体やり過ごしてきましたw しかしフリーになってからは仕事で優秀なSEOアナリストさんとご一緒することが多いので、text-indentってどうなの? とさらっと聞いてみました(そして彼と仕事する時の地雷を少しでも摘み取っておく意図もありwww)

回答はこちら

画像のテキストを検索エンジンに伝える方法は、下記の3つあります。

1)cssで飛ばす

2)altテキスト

3)webフォントcssで飛ばす

(-9999pxや背景色その他の手法)について、現時点こういった手法を使っていても上位表示されているサイトは多くありますが、ペナルティを受けるサイトもあります。

ペナルティ対象とならないのであればaltよりも通常テキストの方が評価されやすいのは確かですが、基本的には2)のaltテキストで進めるのが正攻法かと思います。また、3)のwebフォントを使うというのも選択肢としてはありますが、ご存知の通り日本語についてはフォントセットのDLでレスポンスが悪くなるということもあり、日本国内ではあまり良い方法とは言えないのが現状です。(欧米のフォントセットは文字数が少なくファイルが軽いため、3)が一般的な解決策となっています。)
1)については、正直、-9999については導入しているサイトも多く、現状はよほどキーワードを詰め込むなど行ったものに対するペナルティ以外は大きなマイナスを受けるケースは少ないと考えられますが、米国で3)がトレンドになっている以上いつ1)に対して厳しく取り締まるアルゴリズムが来るかわかりませんので、個人的には基本的に2)で進めることを推奨しています。上記のような状況を指して一般的に「グレー」と言われているかと思います!

また判断基準としては「リスクを自分でどこまで負えるか」が分かりやすいのでは、とのこと。 ナビゲーション部分になら使っても問題ないだろうけど、大手サイトでもしひっかかってしまった場合その責任を自分で負えるか、、それをふまえた上で判断するのがよいのでは、と。 タメになりますなー。 うん、私はしばらくはaltで地道にコーディングしていきたいと思いますw

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です