SEO is a very sensible business and there are many ways which swear success, but most of them are pain for search engines. In this tutorial we will use headlines for reaching better results in search engines by using the CSS text indent technology. There is also an german article about image replacement by using CSS.

First, take a look into the source code of Knowtebook and you will find in the beginning lines beneath the body tag following code:

<div>

<h1> <a href=http://www.knowtebook.com/">
Knowtebook - Knowtebook is a social open source community
dedicated to web-developers and designers.</a
</h1>

</div>

The lines of code contains an H1 header-element with the title and the description of Knowtebook. The header is put into a div tag. So what’s so special about it? Well, try to find it on the front page!

Most techniques describe image-replacment tricks which are complicated or are very known by search engines and can lead to be kicked out of their index, because of cheating with content. Knowtebook uses the “text-intend” CSS technology shown below:

#header h1{
margin-top:10px;
margin-left: 0px;
background: url(i/logo-web-300px.gif) no-repeat;
float: left;
text-indent: -9999px
}

The CSS code will take your headline and will place it outside of the screen, but will show a logo instead. This way you can use your H1 elements for your search engine optimation and your nice logo. We have had nice experiences with this technology - what are yours? Please give us your feedback below.

Related posts

• CSS - Javascript: Dropdown-Menüs mit Pfeil komplett formartieren
• Restyle and optimise your digg count
• SEO: How to check the quality of link exchanges
• SEO: Tools that help you to optimise for search engines
• SEO: Find connections between several websites