Will Google penalize me for hiding header text?

Question

I read this post:

http://www.google.com/support/webmasters/bin/answer.py?answer=66353

On my site currently, I have the following:

// site.css
h1{
  background: transparent url("/images/mylogo.png") 0 0 no-repeat;
}

h1 span{
  display:none;
}

<!-- index.html -->
<h1>
  <span> Name of My website </span>
</h1>

My thinking was that by including the text in the header that the HTML would still be well-structured. Since reading that post though, I'm anxious that google may penalise us for hiding text content.

Can anybody shed some light on this issue?

Is including hidden text in the header beneficial or detrimental (or neither) ?

Answer 1

I think you have the right idea, but have implemented it wrong.

I think display none shouldn't be used because of screen readers, at least that's what I've read.

I really like this method:

<h1>My Website/Page Title<span></span></h1>

h1 {position:relative;height:100px;width:100px;}

h1 span{background:url(link-to-image); display:block; height:100px; width:100px; z-index:2; position:absolute;}

Pretty much you position a span tag over your text. So the text would be visible without images. Only downside is transparent images but you could always position the text in a non transparent part or text indent it.

Read about it first in: The Zen of CSS Design: Visual Enlightenment for the Web

Nice list of options: http://css-tricks.com/css-image-replacement/ (Method 8 is what I described)

Your not hiding the text from visitors, just presenting it.

From the Google link:

When evaluating your site to see if it includes hidden text or links, look for anything that's not easily viewable by visitors of your site. Are any text or links there solely for search engines rather than visitors?

Answer 2

You should really be using img and alt text to do this. css background images are more for pretification rather than content.

https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image

You could argue that it is image replacement of text which is quite common but as it stands the text wouldn't show even with images turned off.

At the very least that particular text is not going to be indexed as highly.

Answer 3

Why not follow Google's suggestion about using Javascript, and use it to hide the h1 and display the image. If it's not enabled then people (and search engines) will still see the text.