6
4

More than 5 years have passed since last update.

CSSでテキストを画像置換をするときに気をつけること

Posted at

SEO的には

非推奨です。
HTML文書と見た目が一致しないため、隠しテキストとして悪意あるリンクとみなされ評価が下がる場合があります。
基本的にはimg要素で画像を貼付けるのがベストですが、span要素にクラスをあててbackgroundで画像を指定する方法もあります(googleがやってる)。でもこれは空の要素を増やすことになるので、imgなどと同様と見なしたとしても若干違和感はあります。

それでもやりたい

深遠な理由でどうしてもテキストを使いつつユーザーには画像を見せたい場合は以下のやり方がよくある方法。

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

+

font-size: 0;

両者を併用する。
基本モダンブラウザなどで確認する場合が多いので見逃しがちですが、一部の古いAndroid端末などではfont-size:0がききません。

参考記事

CSS – 画像置換の種類とその方法
CSS画像置換(CSS Image Replacement)

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4