【CSS】画像は表示、テキストは隠す text-indent: 100%; white-space: nowrap; overflow: hidden;

text-indent:-9999px;の代替手法

サイトのロゴのH1やトップに戻るボタンなど、テキストを表示させずに画像のみを表示させたときがあります。でも、SEO対策のチェックを受けたりすると、「aタグに有効なテキストがありません」みたいに指摘されることがあります。

ちょっと古いやり方だと、text-indent:-9999px;を使って視覚エリアの外に文字を配置して、事実上みえなくする手法が取られていましたが、最近は以下の方法が流行っているみたいです。

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

説明としたら、文字列を折り返さず、コンテンツの幅100%までずらし、はみ出ている部分は非表示にするといった感じです。ややこしいやり方ですが、でもこれでペナルティは回避できるので気にって使っています。