#39 背景画像の中に文字が入っている場合、HTMLの中の文字を非表示にしたい 【ぴよぴよコーダーの開発日記】

毎回毎回ググっているので、ここでメモ。

昔は -9999pxで飛ばせ。とか言われてたじゃないですか。でもその後、スパム判定されるとか、いろんな噂があって、、それ以降、何が正解かわからないけど、なるべく背景画像やめて、imgタグにaltでやっていたんですが、案件によっては、背景画像にしないといけないものもあって、そんな時どうしようかなと。テキストを伝えたいけど、スパムはいやだ。

同じようなことを考えている方はいるもので、下記を参考にしました。

.u-text-off {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

参考：CSSで文字テキストを非表示にする（隠す）方法

デモ

追記：後日、TAKさんの下記のツィートを発見。-9999pxだろうが、-10000pxだろうが、Google DevelopersブログでもOKって言っているので、大丈夫そうですね。よっぽど何百個も隠しキーワード埋め込むとかしなければペナルティにならなそう。まぁ上記コードのtext-indent:100%のほうが、なんとなくブラウザレンダリングのコスト減りそう？かな。

音声ブラウザ用に隠しテキストを仕組むこと、SEO的に大丈夫？(=隠しコンテンツとしてペナルティにならないか？)ってよく聞かれるけど、Google Developersブログでも紹介されている手法なのでOKです。ただ、キーワード的な文言を不自由に隠すのはアレなのでそういった使い方はしないように。 pic.twitter.com/Ncud25e9Hm

— TAK / Web Creator. (@tak_dcxi) July 11, 2020

元ソース：コンテンツの非表示と更新