SEO a href optimization

Question

I have a number of links

<a href="/somepage.html" class="link"></a>

and class has background image wich changes on :hover attribute.

Now the problem is how can I put any text inside <a></a> tags for google to catch but also that it doesn't appear cause if it will show it will mess up my background image.

EDIT:

How about this:

 <a href="/somepage.html" class="link"><span style="display: none;">some text</span></a>

Is this SEO friendly? Will google catch anchor?

Answer 1

 .link {display:none;}

Answer 2

If I understand the question correctly, you want only a part of the content inside the A element to be visible. In that case…

HTML:

<a href="foo.ext">Some text that will be visible <span>(some text that won’t be visible)</span></a>

CSS:

a span {
 display: none;
}

---

If you want to have content inside the A element (link text) and use CSS to replace those contents by an image, you could do this:

HTML:

<a href="foo.ext">Descriptive link text goes here</a>

CSS:

a {
 display: block; /* or inline-block */
 text-indent: -9999em;
 overflow: hidden;
 background: url(image.png) no-repeat 0 0;
 width: 500px; // set this to match the width of the background image
 height: 500px; // set this to match the height of the background image
}

 a:hover {
  background-image: url(hover-image.png);
 }

Note that it would be better to use a sprite image containing both images.

Answer 3

I recommend against the entire approach of using background images as substitute content, but if you really insist on doing it, then this approach causes the fewest issues:

{
    text-indent: -5000em;
}

Answer 4

This should do the trick:

<a href="contoso.com" class="link"><span class="style1">text will not be displayed</span></a>    

.style1 {
visibility:hidden;
}

Answer 5

a.link {position:relative;font-size:0;width:x;height:y;}
a.link img {position:absolute;width:100%;height:100%;}

<a href="page.html" class="link">
  Link text
  <img src="mynormalimg.png" onmouseover="this.src='myhoverimg.png'" onmouseout="this.src='mynormalimg.png'" />
</a>

The inline javascript there is possibly bad, but it's just to illustrate. Not sure if img-tags use background-image by default, but in that case it can obviously be done with css. Just don't put a background image on the a-tag, but on the img-tag instead.

Answer 6

If you want to know what google sees on your page you could use lynx. Then you know exactly what you can improve.