css (RSS)

CSS: How To Hide Headlines For Better SEO Effects

April 27, 2008 in css how-to seo

seo-optimsation-with-css CSS: How To Hide Headlines For Better SEO Effects

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 id="header">

<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.

Spread this KnowTe

Digg Del.icio.us Stumble Float Technorati Bump
Whatever you want to say!
Leave a Comment »

Andrew Jhonson
Sep 02, 2009
No: 3 / ID: 4787

This is indeed a great article. CSS always plays a vital role in web design and it always gives you opportunity to make your website Google friendly. I have compiled few factors ‘why Google loves CSS’ that you can check at http://www.bestpsdtohtml.com/g.....or-google/


mktgbill
Jun 27, 2009
No: 2 / ID: 4435

Though I imagine there are cases where it is feasible to use hidden H1 tags to replace comparable graphic elements I imagine it won’t be long before SEs works this into the algo to cancel out any “benefit” a hidden H1 tag would provide. Based on my own testing and recent reading I believe the H1 tags have less influence than they have in the past with Google anyway; though it’s use is still good for usability when not hidden.


Joe
Dec 12, 2008
No: 1 / ID: 3483

I wonder if you can get penalized by SE for hiding H1? Probably goes against TOS? I like the idea because of design aspects you dont want H1 on every page. However, if penalized by google, then what’s the point?

Leave a comment!
Note: You can also use your free Gravatar avatar on Knowtebook! Please also read our Publishing Policy before posting.

Ja, ich möchte bei Kommentaren benachrichtigt werden!

Trackbacks/Pings
Trackback-URL