26

この記事では、この手法の使用は避けるべきだと述べています。これは素晴らしいと言っています。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リクエストが自動的に取得されます。

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

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

4

5 に答える 5

24

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

別の方法には、これが含まれます（zeldman.comから）：

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

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

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

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

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

于 2012-09-05T17:14:47.630 に答える
5

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

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

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

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

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

お役に立てれば。

于 2012-01-23T12:07:54.003 に答える
3

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

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

于 2012-01-23T11:58:12.243 に答える
2

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>、IE6でも確実に機能します。

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

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

于 2012-01-23T12:01:35.313 に答える
1

別の方法があります（私はこれを頻繁に使用します）。

<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;
}
于 2012-01-23T12:10:49.733 に答える