What do Google think about links without text, with only background?

Question

Like this one:

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

Or should I do like this instead and change the font-size to zero:

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

Edit: No one here seems to understand my question. So I'll post some CSS too:

#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);
}

It looks like that, so I can't replace it with an image because then the hover wouldn't work. Seems like there is no solution to this so I guess I'll skip it.

Answer 1

Not including descriptive text of one form or another (text, title or description) would be a serious accessibility failure regardless of any SEO issues.

Edit: If you're asking how to hide the text of a link given a desire to use a background image, there's a few ways to do that. My preferred option (where possible) is to provide a fixed height and then a line height ~3 times as large and turn overflow off. You can also adjust letter spacing to reduce the width towards zero, e.g. from production code:

background: transparent 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 2

You should provide either an image or text for the link. If you go the image route, be sure to have alternate text as well that describes the image and/or the link destination.

Failure to provide ANY context for the link, which is what you are doing now, having nothingness be a link, is poor usability as there is no visual hint for a user using a conventional browser or any way for a screen-reader to handle the link.

Answer 3

A better approach may be to put an image in the a tag; the a:hover CSS can still work with this (at least with some browsers). As a simple example,

a { color: #30f; }

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

can cause a yellow bar to appear adjacent to an image in an a href.

Answer 4

As I understand, Google does use link text to rank pages. A page with an incoming link text of "foo" will give that page a higher search result position when searching for "foo".

Using your example, you could do the following:

Use a descriptive text in the link:

<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>

Use an image in the page:

<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>

Which method you choose, depends on what you want to do with it. For example: if you're creating an print style sheet, using the image would be preferred, because background images won't be printed (by default).

Answer 5

In the terms of SEO, Atl tag is needed as long as it involves images.