Prayagasoft - web designer India, Ecommerce developer india, Ecommerce design

In this tutorial you'll learn how to use proper title tags in your pages for the benefit of search engines, but display an image in their place for your visitors.

The Article

Most web designers have used images in place of titles. We all know that this is not very search engine friendly, but we do it anyway because, quite simply, it looks better than plain text. We helped a little bit by using alt tags, but this doesn't have anywhere near the same impact in search engines that using a proper title would have.

Take a look at the following titles we could use in a page:

<h2>Widescreen Televisions</h2>

<img src="title.gif" alt="Widescreen Televisions" />

The second option has very little relevance in a search engine. It treats it as nothing more than an image (which is precisely what it is). The first option however lets the search engine know it's a title. It will index the text, treat it as a title, and you'll get a much better ranking. Google loves title tags, so it makes sense to use them. We already know this, but we chose to use images because they look better.

Did you know that you can actually have both?

What we want to do is use the <h2>Widescreen Televisions</h2> for our title for the benefit of search engines, and then replace it with an image when a real person views it. We can do this easily using CSS.

Create a page and add the following HTML:

<h2 class="widescreentv">Widescreen Televisions</h2>

Create an image saying "Widescreen Televisions", save it as widescreentv.gif and make a note of the width and height.

We now need to add the CSS. In this example the image has a width of 250 pixels, and a height of 150. Add the following CSS to your page:

h2.widescreentv {

  margin:0;

  padding:0;

  padding-top: 150px;

  width: 250px;

  background-image: url(widescreentv.gif);

  background-repeat: no-repeat;

  overflow: hidden;

  /* For IE5 */

  height: 150px;

  voice-family: "\"}\"";

  voice-family:inherit;

  height: 0;

  }

Change the width value to match your image. Then change the padding-top and the height values to the height of your image.

I'll explain what each part does.

background-image: url(widescreentv.gif) and background-repeat: no-repeat set our image as the background for the <h2> .

We set the margin and padding to 0, but then set the padding-top to the height of the image. This makes the height of the <h2> big enough to show the whole image.

The text will still be visible on top of the image, so we set the overflow to hidden, which hides it and shows only the image.

height: 150px;

voice-family: "\"}\"";

voice-family:inherit;

height: 0;

IE5 will read the height:150px and make the <h2> tall enough to show the image. Then it reads the next parts and doesn't know what to do, so it stops where it is. The image is displayed perfectly. Modern browsers however will continue reading the CSS and see the height:0px , which then squashes the <h2> back down - but the padding-top had been set high enough earlier on to still display the image.

Sounds complicated, but all you need to do is change the values to suit your own image and it will work properly. It works perfectly in Mozilla, recent versions of Opera, and IE5+.

This method isn't just limited to <h2> tags, you can use it on any title tags, divs or paragraphs.

Hopefully you'll now be able to use this on your own sites and see significant improvements in search engine rankings