web-dev-qa-db-ja.com

text-indent：-9999pxは、テキストを画像に置き換えるための悪いテクニックですか？代替手段は何ですか？

この記事 このテクニックの使用は避けるべきだと言ってください。 これ それは素晴らしいと言います。 GoogleがCSSファイル内でtext-indent: -9999px;を探して、あなたを罰するというのは本当ですか？ ：|

私はそのプロパティをたくさん使用してテキストを非表示にしています。たとえば、アイコンで表されるボタンがあります。

<a href="#" class="mybutton">do Stuff</a>

CSS：

.mybutton{
  text-indent: -9999px;
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}

コードに代わるものが見つかりません。これを画像に置き換えると、ボタン画像ごとに+20のHTTPリクエストが自動的に取得されます。

リンクを空にすると、スクリーンリーダーがそれが何であるかわからないため、アクセシビリティが低下します。そして、空のリンクは奇妙に見えます、おそらくグーグルもそれを好きではありません...

では、そのような状況に対処するための最良の方法は何ですか？

htmlcssseotext-indent
25
Alex

-9999pxメソッドを使用しない理由は、ブラウザが、これが適用される要素ごとに9999pxボックスを描画する必要があるためです。明らかに、特に複数の要素に適用する場合は、パフォーマンスが大幅に低下する可能性があります。

代替方法にはこれが含まれます（ zeldman.com から）：

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

...または代わりに（ ここ から）：

height: 0; overflow: hidden; padding-top: 20px;

（ここで、「padding-top」は要素の高さです）。

最初の方法は通常の方法で高さを設定できるのできれいだと思いますが、2番目の方法はIE7でよりうまく機能することがわかりました

23
Nick F

Googleはネガティブを使用するという概念を宣伝していないことを読みましたtext-indentアンカータグで- http://maileohye.com/html-text-indent-not-messing-up-your-rankings/ 。理想的には、タイトルタグとrel属性を使用して、検索エンジンにリンクについて詳しく伝える必要があります。

また、次のスレッドを読むことをお勧めします。

サイトマップ、ロボット、可能な場合はrelタグとtitleタグを使用するアンカータグ、および画像にaltタグを適用すると、SEOが向上するはずです。

グーグルはまた、AJAX駆動されたコンテンツを現在Shebang（＃！）演算子を使用してトラバースしているので、おそらくそれを読みたいと思うでしょう- http：//www.seomoz。 org/blog/how-to-allow-google-to-crawl-ajax-content

HTML5とJQueryを使用して、Ajaxリンクのブックマークとディープリンクを可能にするプラグインがいくつかあります。

お役に立てれば。

5
Sagar Patil

テキストインデントのトリックは、アクションボタンでは問題ないはずですが、検索エンジンでターゲットページのページランクを評価しながらリンクテキストを考慮したい場合は、おそらく問題ありません。

ちなみに、GoogleはマークアップをSPAMと見なす前に複数のヒューリスティックを使用するので、テキストインデントを何気なく使用する必要はありません。

3
Salman A

Googleに問題があるかどうかはわかりませんが（リンク先の記事 Googleの従業員からのブログ投稿 なので、ある程度の重みがあります）、代わりに<img>を使用することもできます。透明なGIFでタグを付け、スプライトをbackground-imageとしてタグ付けします。

HTML

<a href="#" class="mybutton"><img alt="do Stuff" src="1-pixel-spacer-image.gif" width="16" height="16"></a>

CSS

.mybutton,
.mybutton img {
  display: block;
  width: 16px;
  height: 16px;
}

.mybutton img {
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
}

<img>タグの背景画像は、IE 6でも確実に機能します。

もちろん、Googleがやろうとしているのは、表示されていないテキストのインデックス作成を回避することであり、altテキストも表示されません。ただし、Googleのアルゴリズムによってページがスパムとしてフラグ付けされるリスクを回避できる可能性があります。

また、この方法では、ユーザーがブラウザで画像を無効にした場合、少なくともテキストが表示されますが、text-indentでは無効になりません。

2
Paul D. Waite

代替手段があります（私はこれを頻繁に使用します）。

<a href="#" class="mybutton"><span>do Stuff</span></a>

コンテキストに基づいて、スパンをstrong/h1などに変更できます。

.mybutton{
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}
.mybutton span{
    display: none;
}
1
mreq