Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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

share|improve this question
add comment

3 Answers 3

up vote 4 down vote accepted

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?

share|improve this answer
add comment

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

http://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.

share|improve this answer
add comment

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.

share|improve this answer
    
Do you have an url? –  Goboozo Mar 25 '11 at 12:51
    
The url listed in the question: google.com/support/webmasters/bin/answer.py?answer=66353 –  paulmorriss Mar 25 '11 at 12:53
    
I load my JS at the foot of the page (before the closing body tag) This would mean the header would be visible until the page has fully loaded –  bodacious Mar 25 '11 at 14:00
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.