Barry Webber. Freelance flash html and css developer from Southampton, Hampshire. Specialising in HTML, CSS, Flash, Animation and Design.

A lot of the time, at the top of your website you’ll want to use something a bit more impressive than a simple H1 tag. The obvious solution would be to replace it with an image, but then you don’t have a H1 anymore and it makes good SEO sense to keep them on your pages. I’m going to show you a way of replacing your H1 text with an image and the search engines will continue to read it.

First create your H1 tag on your page. Remember to be as descriptive as you can be (this is the one of the main things that search engines pick up on).

<h1>Your site description goes in here</h1>

Let’s say for example that you would like your company logo in here, and you need it to appear on every page. We will need to add the image we want and hide the text using CSS. You will also need to add height and width values to match the size of the image you are using. To hide the text we use a text indent of -9999em which put’s it way off the screen. You’ll notice that if you put 9999em instead your text is still hidden, but your page is now about 6 feet wide.

Here’s the CSS:

h1{
height: 150px; /*change these to match your image size*/
width: 400px;
background-image: url('your_logo_goes_here');
background-repeat: no-repeat;
background-position: left top;
text-indent: -9999em;
}

The text is hidden yet the search engines will easily find it at the top of your page (search engines completely disregard all CSS styles). A good way to test this (and other SEO techniques) is to disable all CSS using the web developer toolbar on Firefox. This will give you a visual overview of what the search engine will see, and in what order.

A lot of sites have a link on their logo and header which take you back to the homepage and so it would be nice if we could do that and still use the H1. Adding the link to the H1 is easy enough, but it’s wrapped around the text that is indented off the screen so it can’t be clicked.

Here’s the HTML mark up…

<h1><a href="#">Here is my H1 image and link test</a></h1>


and the CSS…

h1{
background-image:url(images/tile.png);
height: 20px;
width: 200px;
text-indent: -9999em;
margin: 50px;
}
h1 a{
padding-right: 9999em;
display: inline-block;
width: 200px;
height: 20px;
}


That works but it’s got a bit of a problem. The link stretches all the way to the left. If you change the link to display: block; then that stretches all the way to the right. Ok if your logo is right up to one edge but still not a great solution.

This time I will do away with text indents and try a different way of hiding the text. Hiding either the H1 or the link will cause the link to just dissapear. We still want the link, just not the text inside it. Enter our friend <span>. By adding a span around the text in the link we can now hide it without hiding the link.

mark up with span added.


<h1><a href="#"><span>Here is my H1 image and link test</span></a></h1>


the CSS is much cleaner now.

h1{
background-image:url(images/tile.png);
height: 20px;
width: 200px;
margin: 50px;
}
h1 a{
display: inline-block;
height: 20px;
text-decoration: none;
}
h1 a span{
visibility: hidden;
}


The above code and CSS now hides the text but keeps the link and the image in the correct place. Both the HTML and CSS validate and if styles are disabled then your normal H1 text shows up. As far as I can tell, the only downside to this solution is that if images are disabled then you see nothing. However having both images and styles disabled works fine. You could write some javaScript to counter this but would someone with images disabled have javascript on? I doubt it!

Tags: blog, css, h1, html, SEO, tutorial, validation

This entry was posted on Tuesday, October 13th, 2009 at 11:31 am and is filed under Developer Blog, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.