text-indent:-9999px;を改善してみる

最近、コーディング作業をしていてふと気になったんですが、だいぶ昔から、html側でテキストを書き、cssで背景に画像を設定してテキストをtext-indent:-9999px;で表示させないという方法がありました。少し前までは「この使い方はペナルティになる」と言われていました。

ただ、実際にペナルティになるかどうかは不透明で、使わない方が良いだろう…ぐらいにしか言及されていませんでした。

確かにこの記述だと、隠してhタグやリンクなど書き放題で、恐らくそういったページに対してペナルティを課していたんだと思います。

そして、9999pxの書き出しパフォーマンスが必要になることから、レスポンシブデザインが増え始めた昨今、スマホ表示に時間がかかる…などよろしくない欠点が出始めました。

と言っても、もともとSEO的にも下記のような記事が公式から出されていることから、使わない方が良いとは思いますが。。（←またそうなっちゃう…）

基本的には「-9999」の扱いを「100%」にするだけ

さっそく、こちらがそのcssです。はみ出た箇所を非表示にして念のため改行禁止にする。という使い方です。

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

この方法もぱっと見、変わってないじゃん！へりくつ！っぽくも見えてしまいますが…実は-9999pxの場合もペナルティと見なされません（何度も言いますが、使い方にもよります）！実際、未だにこの記述をメニューに使っていて、一度もペナルティを受けていないサイトを管理しています。

なので、このcssの解釈は、SEOというより読み込み速度について改善されたcssの捉え方なのではないでしょうか？
私は必要な時があれば使ってみようと思います。