【CSSスニペット】よく忘れるので。text-indent:-9999px;を使わず画像に置き換える方法

デザイン

みなさんは「text-indent:-9999px;」でテキストを画面外に飛ばして画像に置き換える、昔ながらのテクニックをまだ使ってますか?

この手法はいまだに多く使われておりますが、SEO的によろしくないとも言われ続けています。

そこで、「text-indent:-9999px;」を使わない手法をついこの間も、何かの案件で実装したんですが、しばらく使わないと、忘れてしまうので、スニペット的な感じで書き留めておこうと思います。
なにかでこの記事を読んだ人の役に立てれば幸いですけど。

もう古い?!テキスト飛ばし「text-indent:-9999px;」

いままでのテキストを飛ばして画像に置き換える手法は、今でも使われていて、一般的ですよね?

#text-tobashi {
    background-image : url("image/置き換えたい画像.png");
    text-indent:-9999px;
}

ボタンやロゴを画像にしたい場合によく使いますし、自分もつい最近まで使っていたのは、ここだけの話です。

「text-indent:-9999px;」を使わない事をお薦めする理由

よくSEO的に良くないと、これまで耳にしてますが、明確なことはないようなので、その辺は言及しませんし、深く考えないことにしてます。

ただGoogleは、もともとテキストを隠したりすることを嫌っているというか、ダメとしてはいます。

隠しテキストは Google のウェブマスター向けガイドライン違反です

約 1 年前に、「 Google の検索は隠しテキストが嫌い 」という記事を Google 公式ブログ 日本版 に掲載しましたが、その記事でもお伝えしましたように、隠しテキストは、Google の ウェブマスター向けガイドライン に違反します。その理由の詳細は、ウェブマスター向けヘルプ センターの記事 にも載せておりますが、本日はその背景と、日本で多く見られる隠しテキストの具体的な一例を改めてご紹介します。
Google の検索は、隠しテキストに限らず、ユーザーが閲覧するウェブページと Googlebot が取得するウェブページの情報が大きく異なる状態を好みません。なぜなら、Google の検索では、Googlebot が取得したウェブページの情報をもとに検索結果をユーザーの方々に返しているため、取得したウェブページの情報と、実際にユーザーが見るページの内容に大きな差があると、適切な検索結果を返すことができなくなってしまうからです。

とした上で、こうも言っています。

ポイントは、そのテキストがユーザー向けであることです
ただ、画像の内容と CSS や alt 属性による代替テキストが完全に一致していなければならないわけではありません。前回の記事 に も書きましたように、代替テキストが、ユーザーに読ませることを想定し、ユーザーにとって有益なものであると考えられるものであれば ( 例えばテキストブラウザや、テキスト読み上げソフトをご利用のユーザーのために書かれたものである場合 ) 、問題はありません。

あとは、長くなるのでリンク先のウェブマスター向け公式ブログの記事を読んで参考にしてください。

でも、もう一つの理由は、サイトのページのパフォーマンスが低下する、ということです。

確かに言われてみれば、-9999pxによってブラウザの幅を広げてるようなもんですから、これを多用すると、低下するかも・・・って容易に想像できるんじゃないでしょうか?もし画像置き換えを一度に大量にしているページがあるとすれば、単体では、それほど見た目に感じることは無いのかもしれませんが、それが100ページ、1000ページとかになってくると、どうでしょう?

ということで、こうすれば良いのではという手法を書き留めておきます。
自分も忘れたら、この記事を読み返すことにします(笑)

「text-indent:-9999px;」に変わる手法

これであれば、パフォーマンスの低下は避けられるみたいです。

#text-tobashi {
    background-image : url("image/置き換えたい画像.png");
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

line3〜4が「text-indent:-9999px;」に変わる部分ですね。

text-indent: 100%;でギリギリ見えない位置に飛ばし、
white-space: nowrap;で行が折り返さないようにし、
overflow: hidden;でハミ出した部分を見えないようにしています。

さいごに

テキストを大きく飛ばすわけではなく、(許せる?範囲でちょっとハシに避け)隠すことになるので、SEO的には微妙と言わざるを得ませんが、特にダメとは言われていない(特にGoogleさんとかに)ので、これからも使っていこうとは思っています。

sanpo-zukan

sanpo-zukan

ストアカで『【オンライン★初心者向け】気軽で楽しくワードプレスのお悩み相談教室( https://www.street-academy.com/myclass/78668 )』運営中!

関連記事

特集記事

コメント

この記事へのコメントはありません。

CAPTCHA


sanpo-zukan

sanpo-zukan

当サイト(さんぽずかん)を運営しています「しゃむ」です。 役立つ情報からしょうもないネタまで、少しでも読んだ人の役に立てばいいなと思って、いろいろな記事を掲載していきます!

最近の記事

  1. 唐辛子買ってきた。 #唐辛子|インスタからの投稿

  2. WordPress管理画面の投稿一覧で「タグ」の絞り込み表示をできるようにする方法

  3. スマホアプリのGoogleマップでダークモード使う方法

  4. PR

    【オンライン★初心者向け】気軽で楽しくワードプレスのお悩み相談教室

新着 オススメ 特集記事
  1. 唐辛子買ってきた。 #唐辛子|インスタからの投稿

  2. WordPress管理画面の投稿一覧で「タグ」の絞り込み表示をできるようにする方法

  3. スマホアプリのGoogleマップでダークモード使う方法

  1. Flexboxでjustify-content: space-betweenの最後の要素を左寄せにする方法

  2. しまった!アップグレードしたらサイトの表示が崩れた!!WordPressをダウングレードするカンタンな方法とは?

  3. サイト表示を少しでも早く!WordPressでJavascriptファイルを非同期にする方法

  1. GoogleAdsenseで口座確認のデポジットがなかなか入金されなかったとき確認すべき点

  2. サイト表示を少しでも早く!WordPressでJavascriptファイルを非同期にする方法

  3. ネコ好きLINEユーザー必見!懲りずに第二弾はスタンプ8個でお手軽LINEスタンプ!「ゆるかわミケにゃん」販売開始!

TOP