CSS and SEO Question

Question

Hello, I am currently building a webiste for a client whereby I am using CSS for the menu (not javascript). For the rollovers, have a background image that contains the regular state and the rollover.

an example code is: <a id="foo" href="bar.php" ><span>BAR</span></a>

I hide the <span> and use the background image instead.

My Question Is:

Is this form of navigation good for SEO? Is hiding the <span> seen as spam by the search engines. Will search engines even pick up this form of menu??

Please Help

Answer 1

Many/most/(all?) search engines will not understand CSS to the degree that they know you're hiding the <span>. For those, you're fine.

For any that are bright enough to understand your CSS, they'll also understand the reasons why people do that, and will recognise what you're doing. So for those you're fine too.

Many questions like this one boil down to "Are search engines just clever enough to misunderstand what I'm doing?" And the answer is no, because it's not in their interests. As the author of a search engine, you wouldn't add support for noticing CSS-hiding without also adding reliable heuristics to tell the difference between its normal use and its abuse.

Answer 2

You may use text-indent css property for your <li> or <a> element. This way you won't have to hide it via css. So you'd have something like this

<ul>
  <li><a id="foobar">foobar</a></li>
</ul>

Then you could have following css:

li a {
  display: block;
  text-indent: -1000px;
  width: 20px;
  height: 20px;
  background: transparent url('/image/path.png') no-repeat;
}

Answer 3

If you are simply going to hide them using display: none; then you will want to check out the question Stack Overflow thinks is most related to yours: Google SEO and hidden elements.

Summary: Google ignores anything it can determine is invisible to humans.