View Full Version : Header Help with image and h1 tag

11-12-2010, 04:59 AM
I have a div for the heading in my website at www.doneanddustedcleaning.com and am concerned that SEO etc won't pick up the important h1 tag because I've used it with an image, here is the code:

<div id="site_title">
<h1><a href="http://www.doneanddustedcleaning.com/" target="_parent">
<img src="images/logo.png" alt="Domestic Cleaning Northampton with Done and Dusted" />
<span>Domestic Cleaning Northampton</span>

Is this a ok way to display this or is there a better way ?, any advice would be appreciated !!

Thanks, Nick C

11-12-2010, 05:12 AM
First of all you don't need to wrap a heading tag in a div. A heading tag is already a block level element.

If I use an image for heading tags I set it as a background image in the CSS and write the text of the image in the HTNL as well for search engines and screen readers. The text I swap out of the screen with a very high, negative text indent.
<h1><a href="http://www.doneanddustedcleaning.com/" target="_parent">text from image</a></h1>CSS:

h1 {
width: 300px; /*width of the h1 image*/
height: 30px; /*height of the h1 image*/
background: url(images/heading-1) no-repeat;
text-indent: -9999px;

11-12-2010, 06:06 AM
Yeah, I use the same solution as gentleone.

11-12-2010, 09:44 AM
Thanks for replies, will give it a go !

Thanks Again