1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Hiding "H" tags (headings) CSS coding

Discussion in 'White Hat SEO' started by seomedia, Apr 20, 2009.

  1. seomedia

    seomedia Registered Member

    Joined:
    Mar 18, 2009
    Messages:
    89
    Likes Received:
    33
    Occupation:
    seo
    Location:
    London, UK

    Quick question to you coders out there, regarding the hiding of h tags.

    Which of the following CSS should be used? They both hide content but which is best for SEO or do the bots not even take this into account? It would be useful to know.

    display:none

    visability:none
     
  2. BozoClown

    BozoClown Junior Member

    Joined:
    Jan 4, 2009
    Messages:
    150
    Likes Received:
    106
    I don't know whether there is a difference, but you take extra precaution by using javascript with whichever you choose. The bots are not fans of javascript.

    My 2 Cents.
     
  3. Sippy79

    Sippy79 Junior Member

    Joined:
    Feb 13, 2009
    Messages:
    104
    Likes Received:
    26
    Use display:none; but why want you to hide the h tags which are pretty relevant to your sites SEO?
     
  4. kaidoristm

    kaidoristm Power Member

    Joined:
    Feb 13, 2009
    Messages:
    561
    Likes Received:
    726
    Occupation:
    Freelancer
    Location:
    Estonia
    Home Page:
    I dont get it too.
     
  5. letusgo

    letusgo Junior Member

    Joined:
    Nov 15, 2008
    Messages:
    199
    Likes Received:
    125
    display:none doesn't use space but visability:none will.
    let's say that the height of h tag is 10px when apply
    display:none,it simply disappear and
    visability:none you could still find out the existence of h from its height.
     
  6. sec-dee

    sec-dee Registered Member

    Joined:
    Dec 5, 2006
    Messages:
    61
    Likes Received:
    29
    I think I understand what he intends to do. I figure he will make the H1 only appears in the underlying code but not on the page itself.
     
  7. seomedia

    seomedia Registered Member

    Joined:
    Mar 18, 2009
    Messages:
    89
    Likes Received:
    33
    Occupation:
    seo
    Location:
    London, UK
    Sec-dee - correct. Much like a wordpress blog. Or many pages out there that actually have a title in the "logo image" rather than have text.

    Thanks for the answers.
     
  8. SEO20

    SEO20 Elite Member

    Joined:
    Mar 25, 2009
    Messages:
    2,017
    Likes Received:
    2,259
    The diff between "display:none" and "visibility:none"

    "display:none" does not show or take place on the design. Visibility is still taking up space on the page.
     
  9. lase

    lase Registered Member

    Joined:
    Jan 21, 2009
    Messages:
    51
    Likes Received:
    3
    Location:
    United States of America
    Home Page:
    So why exactly are you hiding the H's?
     
  10. Sippy79

    Sippy79 Junior Member

    Joined:
    Feb 13, 2009
    Messages:
    104
    Likes Received:
    26
    If you want to have an image but still want some SEO benefits you should consider shifting the h1 tag (hint: text-indent: -9999px;) and display an image instead :)
     
  11. seomedia

    seomedia Registered Member

    Joined:
    Mar 18, 2009
    Messages:
    89
    Likes Received:
    33
    Occupation:
    seo
    Location:
    London, UK
    Interestingly this is how johnchow has set up his H1:

    Code:
    <div id="header">
    		<div class="main">
    			<h1 id="logo">
    				<a href="http://www.johnchow.com/"><span></span>John Chow dot Com</a><br />
    				<em>The Miscellaneous Ramblings of a Dot Com Mogul</em>
    			</h1>
    
     
  12. Sippy79

    Sippy79 Junior Member

    Joined:
    Feb 13, 2009
    Messages:
    104
    Likes Received:
    26
    Yep and the related CSS:

    Code:
    #logo span {
    background:transparent url(images/logo.png) no-repeat scroll 0%;
    cursor:pointer;
    height:60px;
    left:0pt;
    position:absolute;
    top:0pt;
    width:454px;
    }
    
    
    
    He is using an empty span to fill in the background image...Just another way :)