CSS: How To Hide Headlines For Better SEO Effects

April 27, 2008 in css how-to seo

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 Facebook 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?

Or search by time

Subscribe to KnowTeBook

LovedKnowTes

-->

Recommendation

Community Links

iPhone Games
Best place to get updated information related to iPod Touch apps and iPhone games
Community News: Are you Missing out in Submitting your Design Articles Online? | Design Juices
Articles can be submitted in nearly every design site around, each will often either have their own page or have a submission form in the sidebar of their pages. News can be submitted quick and easily, often bringing new droves of people to your site.
Desire Lines: Let Your Audience Shape Your Design
Desire lines show how people are actually using your design. They show how people want your website to behave.
Learn a New Photoshop Trick with VunkySearch
One of the best ways to learn a new trick in Photoshop is to grab a tutorial that catches your eye and dive right in. VunkySearch offers just that kind of eye-pleasing, pick-up learning.
Jump-Start Your Freelance Career
Practical methods of getting new freelance business
The Inside Design
Web and Graphic Design Blog
Images Of Faces: What Do They Communicate?
Three principles of design that involve how we perceive images of people are attractiveness bias, face-ism ratio, and baby-face bias.
All Da Crazy and Fun Stuffs You Can Do in PHOTOSHOP
Because a little bit craziness is healthy for your life. And there are no boundaries to what you can do in Photoshop. So fire up your imagination and let’s check out what life has got to offer today.
Gotta' love HTML5 & CSS3
Creating a tabbed animated image gallery with only HTML & CSS
Missile Defense Agency Logo – A new twist to the tale!!
Here comes a new twist to the Missile Defense Agency logo design. A striking resemblance has also been observed between the new “MDA logo design” and the “Iranian Space Agency logo design”.
Cognitive Dissonance: How Contradictory Ideas Affect Design
The theory of cognitive dissonances suggests that people are motivated to reduce dissonance by changing or rationalizing attitudes and beliefs.
web 2.0 templatesWeb 2.0 templates with simplicity, cleanliness, and elegance in design and the less number of columns and work great for all your needs and have all the great features of Web 2.0 technology.

Subscribe to RSS | Submit a Link

KnowTeBook.com

UserTalk