バックグラウンドのみのテキストなしのリンクについてGoogleは何を考えますか？

Question

このような：

<a href="/" id="logo"></a> 

それとも私が代わりに次のように行うと、ゼロにフォントサイズを変更する必要があります。

<a href="/" id="logo">Home</a> 

編集： ここに誰もが私の質問を理解していないようにみえます。だから私は、あまりにもいくつかのCSSを投稿します：

#logo { 
    display: block; 
    width: 326px; 
    height: 69px; 
    background-image: url(images/logo.gif); 
    background-repeat: no-repeat; 
} 
#logo:hover { 
    background-image: url(images/logo-hover.gif); 
}

それはそのように見えますので、その後、ホバーは動作しませんので、私はイメージでそれを置き換えることはできません。これには解決策がないように思えるので、私はそれをスキップします。

Answer 1

私が理解しているように、Googleではリンクテキストを使用してページをランク付けしています。 「foo」を検索すると、リンクテキスト「foo」を含むページは、そのページに高い検索結果の位置を与えます。あなたの例を使用して

は、次のようんでした：

は、リンク内の説明テキストを使用します。

<a href="#bar" id="foo">Foo</a> 

<style type="text/css"> 
a.foo { 
    display: block; 
    text-indent: -999em; /* Hide the text, using a negative indent (only works on single lines) */ 
    background: url(foo.png) no-repeat; 
    width: 329px; 
    height: 69px; 
} 

a.foo:hover { 
    background-position: 0 -69px; /* Using spites to switch between normal and hover state */ 
} 
</style> 

は、ページ内の画像を使用してください：

方法あなたの

<a href="#bar" id="foo"><img src="foo.png" width="329" height="69" alt="Foo" /></a> 

<style type="text/css"> 
a.foo:hover { 
    background: url(foo-hover.png) no-repeat; 
} 

a.foo:hover img { 
    visibility: hidden; /* Hide the image on hover, so the background of the link is shown, but dimensions and page flow stay the same */ 
} 
</style> 

あなたがそれで何をしたいかによって決まります。たとえば、印刷スタイルシートを作成する場合は、背景画像が（デフォルトでは）印刷されないため、画像を使用することをお勧めします。

Answer 2

SEOの問題に関係なく、形式や文章（テキスト、タイトルまたは説明）の説明文を含まないと、アクセシビリティに問題が発生します。

編集：バックグラウンドイメージを使用したい場合、リンクのテキストを非表示にする方法を尋ねている場合、その方法はいくつかあります。私の好みのオプション（可能な場合）は、固定された高さを与え、次に行の高さを3倍大きくしてオーバーフローをオフにすることです。文字間隔を調整して幅を0に縮小することもできます（例：生産コードから：

背景：透明なURL（../ images/sprites/icons.gif）no-repeat;

a.foo 
    { 
    width: 16px; 
    height: 16px; 
    display: block; 
    overflow: hidden; 
    line-height: 666px; 
    letter-spacing: -1.1em; 
    } 

Answer 3

リンクには画像またはテキストを入力する必要があります。イメージルートに行く場合は、イメージやリンク先を説明する代替テキストも必ず用意してください。

従来のブラウザを使用しているユーザーや画面に表示される方法の視覚的なヒントがないため、今何をしているのか、何もリンクしていない、リンクを処理するリーダー。

Answer 4

より良いアプローチは、タグに画像を置くことです。 a：hover CSSはこれでも動作します（少なくとも一部のブラウザでは動作します）。簡単な例として、

a { color: #30f; } 

a:active, a:hover { 
    text-decoration: none; 
    color: #F30; 
    background: yellow; 
} 

は、画像の隣に黄色のバーが表示されることがあります。

Answer 5

SEOの観点では、画像を含む限り、アトラスタグが必要です。