FOXAGENT

text-indent:-9999px;を使わずに画像に置き換える方法

タイトル部分やCSSスプライトなどでよく使われる画像置換

text-indent:-9999px;を使う

HTML上にテキストで記載した箇所を画像に置き換える場合、下記の様にtext-indent:-9999px;を使ってテキストを飛ばす方法が主流です。


#sample {
  background : url("/img/sample.gif");
  text-indent: -9999px;
  overflow: hidden;
}

しかしこの方法では9999px分の幅を使うので効率があまりよくなく、Googleなどの検索エンジンにもスパムだと判断される可能性があるため、SEO的にも避けた方が無難です。

パフォーマンスを改善するCSSの記述方法

下記が9999pxのパフォーマンスを改善し、SEO的にも有効と言われている方法です。


#sample {
  background : url("/img/sample.gif");
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

text-indent: 100%;でテキストを枠の外に追いやり、white-space: nowrap;で改行させずに1行で表示させ、overflow: hidden;ではみ出ている部分を隠すという方法です。

本当にSEO的に有効なのか

この方法はtext-indent: -9999px;を使う方法よりもSEOに効果的と言われています。確かにSEOは表示速度などのパフォーマンスの面も重要だと言われているため、多少有効ではあるでしょう。ただ隠しテキストであることには変わりなく、そういった行為を禁止しているGoogleのガイドラインに反するため、Webフォントを使うか、画像にaltを入れて表示するのが無難ではないでしょうか。

No related posts.