Replace An Image In The Header Text

As we know the Search engines like Google, Yahoo, MSN and Bing are looking for the text of the pages primarily to index them. We know that how to use the header tags <h1>. The <h1> header tags are important because search engines value organised sectioned content.

As the header <h1> is having default properties. But you dont want the big text for your headers on your site. So why dont you use your custom graphis. <h1> are very friendly to search engines, and you dont want to skip your <h1> for <img> tag, It will be loss of search engine friendlyness. so dont do it.


I am Using a class to replace header text with an image. Use the header tag as normal, give a unique class name like <h1 class="headerImg"> Page Title </h1>In the css file, write the class as below.

.headerImg {
background: url(path of the image) no-repeat #ddd;
text-indent: -9999px;
width: 500px;
height: 100px;
}

In the above exapmple I have replaced the header tag with a background image and hide the title by using the property of text-indent:-9999px.

Now you can see the nice custom image rather than the old text header, with out missing the search engine readability.