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

Question

Like this one:
Or should I do like this instead and change the font-size to zero:
Home
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

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:
Foo
<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:
<img src="foo.png" width="329" height="69" alt="Foo" />
<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 3

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 4

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 5

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