みなさんは「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さんとかに）ので、これからも使っていこうとは思っています。
コメント