SEO-Friendly Image Headers

OK, so everyone knows that images containing text that are used for headers are not very good for SEO. You can use the "alt" attribute, but its still not as good. So heres how to do it the SEO way...

HTML:


<h1><span>Your Header</span></h1>


Obviously, the difference here is that there is an extra "span" tag in there. Reason will become obvious in the styling...

CSS:

h1 {

background-image:url(yourimage.jpg);
width:200px;
height:40px; (Width and height must be that of the image)
}

h1 span {

display:block;
height:0;
overflow:hidden
}

This means that the text will essentially be there, but it will not be displayed

"Why not just use "display:none"?" I hear you say. (If you didn't, just humour me)

Well, its a possibility. That method is known as the Fahrner Image Replacement (FIR) technique. Unfortunately, it has a flaw, which is that it not only removes the visibility of the element, but it will also be ignored by screen-readers. Therefore if you want your site to be accessible by people with certain disabilities, it is better to use the first option.

Hope that helps you out!