CODEWITHSUNDEEP
htmlseo
Per
Per

Reputation:

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

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.

Upvotes: 2

Views: 1317

Answers (5)

tag
tag

Reputation: 225

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

Upvotes: 0

Ronald
Ronald

Reputation: 1815

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

Upvotes: 1

annakata
annakata

Reputation: 75862

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

Upvotes: 4

mas
mas

Reputation: 1117

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.

Upvotes: 0

Thomas Owens
Thomas Owens

Reputation: 116187

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.

Upvotes: 0

Related Questions