text-indentでテキストを非表示&画像置換する方法(-9999px未使用)【CSS】

SEO対策としてテキストは入力するけどテキストは表示したくない、画像に変更したいと思った事はありませんか?
少し前まではtext-indent: -9999px;にする事で実現していましたが、今ではSEOでペナルティをもらってしまうようになりました。

そこで、新しく出てきた画像置換の手段がtext-indentプロパティに100%を指定する手法です。この方法を詳しく解説していきます。

text-indent: 100%;を指定する方法

まず最初にtext-indent: -9999px;を使わずにテキスト非表示にする方法です。
下記のように各プロパティを記述していきます。

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

上記のように記述で、テキストを非表示にする事が出来ます。
text-indent: 100%;で表示範囲外に移動、white-space: nowrap;で折り返し禁止、overflow: hidden;ではみ出した要素を非表示にしています。

使用例

次に、先ほど解説しましたテキストの非表示に加えて、画像置換する方法です。
imgタグで記述してしまうと一緒に非表示になってしまいますので、CSSで背景画像にして表示します。

<p>ここに非表示にするテキストを記述します。</p>

p {
    height: 60px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url(../imgs/common/logo.svg) no-repeat 50% 50%/contain;
}

さいごに

いかがでしたでしょうか。
あまり多用する方法では無いのですが、ロゴやjQueryのプラグインスライダーなどの部分で使える方法です。