[Web][CSS]画像置換の方法論(4/3)
はじめに
タイトルテキストなどの画像置換はよく使用しますが、SEO対策を念頭に置くと一筋縄ではいかない問題になってきます。
CSS - 画像置換の種類とその方法 - Go-Nextブログ
- 強引に非表示すると、スパムとみなされ検索エンジンから蹴られるおそれがある。
- たとえば白背景に白文字の隠し文字は絶対に☓。
どうすればいいか
次のような対応策が考えられます。
1. 見出しにtext-indent:-999em
▶googleが採用していない。不具合のおそれがある。
2. visibility:hidden
▶レイアウト領域を確保したまま文字だけ不可視。検索エンジンから蹴られる可能性は払拭できない
3.display::none
▶使うべきではない。
CSSで「text-indent:-9999px;」や「display:none;」の画像置換は使ってはいけない - webデザイナーのナナメガキ
現在の対応策
- text-indent: 100%;
- overflow:hidden;
- white-space: nowmap; で非表示する方法。
