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.

Share the love

BTW: Good Quality Brochures Online Color Printing at PsPrint.

Spread this KnowTe

Digg Del.icio.us Stumble Facebook Float Technorati Bump

Whatever you want to say!

Your turn »

Mateusz Blumenthal
Jul 29, 2011
No: 4 / ID: 9132

@Joe: You could be penalized by Google only when somebody is sending report with your site URL to spam report forms in Google. I thinking that methods used above are called “cloacking” and banned

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

Loved KnowTes

Recommendation

Community Links

20 Mind Melting Examples of Light Painting
Photographers utilize their knowledge of the different colors produced by various lights, and how they interplay with white balance settings. Light paint brushes can be as simple as a flash light, laser pen, old lantern, or even off-camera flash combined with colored gels.
KP Design
Inspiration for all - photography, design, art, travels, and more!
30 Free Christmas Icon Sets for Designers
Christmas is just around the corner and this is the time when designers need loads of different resources and material to design Christmas related themes,
Domain Name Selection: How to choose the best
To have an appropriate domain name is always the cause of worry for most website owners, the reason being, it is the primary step to ensure the success of a website or an online business. But there are several other benefits of having a right domain name such as it helps in effective marketing, branding, attracting visitors, building credibility, etc.
60 Remarkable Examples Of Typography Design #6
It’s been a really long time since we did our last installment series of “Remarkable Examples Of Typography Design.” To be precise, the last post was way back in June, 2011. Christmas is right around the corner and many designers are using their creativity at a maximum expense.
Make Forms More Usable With HTML5
html5 introduces new form elements, new input types, and new attributes to help making building and using forms easier.
Examples of Street Art and Graffiti Art
With today’s collection, we aim to pay tribute to some of the best street art that will simply blow your mind away.
Showcase of Beautiful iPhone Wallpapers
Acknowledging the fact that the design and development community love to decorate their devices with stylish and classy wallpapers,
Beautiful Tera Environment Concept Art & Character Design
Developed by Korean game developer Bluehole Studio and published by Frogster who also manage Runes of Magic, these environments are breathtaking with some being just concept art and not the final version they show that the world will be beautiful. In addition featuring detailed character design I can not wait for the release of Tera next year.
25 Incredible Logo Designs Inspired by Plant
Logos are the visual representation of the organizations and their businesses,
How To Add Images To Your CSS Borders
How to use css3 border-images, instead of generic styles, as borders around your elements.
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