Ways to obsficate the H1 tag

29 replies
  • WEB DESIGN
  • |
Everything I read about onpage optimization says that H1 tags are a really important place to put your keyword phrase. However, with the design of a couple of my client's sites, it just doesn't look right at all. There isn't good way to make it work visually.

I have also read that Google frowns upon using CSS hacks or other techniques to hide <h1> tags. But I have to imagine that the crawler can't find EVERY css hack there is to hide stuff...

For example style="display:none;" is blatently obvious. As is font-size:0px;...

But what about line-height:0%? Or position:absolute; left:-500px;

Are these techniques going to get me (or my client's sites) banned?

Also, Is it even worth it anyways? With the right backlinks, can a site reach position #1 without a good H1 tag? My data shows that it is possible, but I also want every edge I can get for my client's sites, especially when I have less than ideal contraints to work within.

Anyhow, thanks in advance for any insights.
#css #h1 tag #hide #obsficate #on page optimization #seo #tag #ways
  • Profile picture of the author freudianslip27
    I've also wondered about this myself as well. I can atest to the fact that you certainly can rank well without it.

    I wonder what would happen if you had the h1 tag set to be the same quality as the regular text, so it would just blend in. Would google catch that?

    Matt
    Signature

    WarriorForum Rules!

    {{ DiscussionBoard.errors[1576063].message }}
  • Profile picture of the author TheRichJerksNet
    spiders do not read your html tags ... They read the text on your site. I do not ever use that god aweful h1 tag and I have never had any problems getting great listings.

    James
    {{ DiscussionBoard.errors[1576109].message }}
  • Profile picture of the author bgmacaw
    Originally Posted by reilly3000 View Post

    Also, Is it even worth it anyways? With the right backlinks, can a site reach position #1 without a good H1 tag?
    Yes, it's very possible.

    Let's take a look at a few examples of top ranked sites in some tough niches...

    directlendingsolutions.com - no H1
    forextrading.com - no H1
    weightlosshelpandtips.net - no H1
    101fatburningfoods.com - no H1
    {{ DiscussionBoard.errors[1576272].message }}
    • Profile picture of the author Lloyd Buchinski
      Originally Posted by Kezz View Post

      The idea is not to hide your H1 tags with css, but rather to style them to make them look nice. What Google doesn't like is trying to make page elements invisible in an effort to trick them.

      Attach a CSS stylesheet to your page that includes something like:

      HTML Code:
      h1 {
      font-size:16px;
      font-weight:bold;
      color:#000099;
      }
      So, don't hide the tags, just make them look nice.
      That is my reaction to the problem and what I've been using. You can just style your h1 down to about h2. I'm a low key sort of person.

      Originally Posted by TheRichJerksNet View Post

      spiders do not read your html tags ... They read the text on your site. I do not ever use that god aweful h1 tag and I have never had any problems getting great listings.

      James
      This was a total shock to me. I have seen enough of your posts around here to think you are serious and you do have the experience to back it up. Will certainly be thinking about this for awhile. But wondering why do so many (all?) niche specialists suggest h1 keyword?

      Anyway the following quote does help to back it up to me, but feeling baffled again....

      Originally Posted by bgmacaw View Post

      Yes, it's very possible.

      Let's take a look at a few examples of top ranked sites in some tough niches...

      directlendingsolutions.com - no H1
      forextrading.com - no H1
      weightlosshelpandtips.net - no H1
      101fatburningfoods.com - no H1
      Of course all of this misses the all inclusive solution. Put the h1 tag at the beginning of your page, and the /h1 tag at the end of your page. Yes!! (Kevin Riley's idea)
      Signature

      Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

      The KimW WSO

      {{ DiscussionBoard.errors[1579457].message }}
      • Profile picture of the author Ben Roy
        Ok, it took a little digging, but if you look in Google's SEO Starter Guide, they have a section on proper use of heading tags (H1, H2, etc). I would be hesitant to decide to just ignore H1 tags if it was important enough to make their beginner's guide.

        Keep in mind that any single element can be more or less worked around - you see pages all the time that rank for keywords that are absent from their title, description, Url, domain, whatever. But I wouldn't skip any of those either.

        Official Google Webmaster Central Blog: Google's SEO Starter Guide
        {{ DiscussionBoard.errors[1579650].message }}
        • Profile picture of the author NickArnold
          Of course you don't 'need' the H1 tag to rank high. It's just one of many factors but not the most important by any stretch.

          Of course though if 2 sites did everything the same (same backlinks, same title, same keyword density etc etc) but one had the keywords in H1 and another didn't... The site that made use of the H1 would rank higher.

          So you don't have to use anything, but it carries weight so why wouldn't you?

          I don't want to sound harsh, but if you can't make a Header tag look inkeeping with the site are you sure you're in the right game designing sites for clients?

          Seriously, style it right, there is always a way to fit in into the site design.
          {{ DiscussionBoard.errors[1579699].message }}
          • Profile picture of the author JohnMcCabe
            I might be wrong (it's happened once or twice before ), but I thought spiders did indeed read html tags. They just don't index them.

            Without reading tags or css sheets, how would they spot efforts to game the system such as invisible text, etc.?
            {{ DiscussionBoard.errors[1579764].message }}
  • Profile picture of the author Kezz
    The idea is not to hide your H1 tags with css, but rather to style them to make them look nice. What Google doesn't like is trying to make page elements invisible in an effort to trick them.

    Attach a CSS stylesheet to your page that includes something like:

    HTML Code:
    h1 {
    font-size:16px;
    font-weight:bold;
    color:#000099;
    }
    That will make your heading look something like this

    The other thing to note is that you should use only one H1 tag on each page. It is supposed to denote your primary header. H2 is supposed to denote any secondary header, like a tagline.

    The only tags you should use multiple times on a page are H3 tags, which is why you'll often see wordpress sites use H3 tags on the post headings.

    So, don't hide the tags, just make them look nice.
    {{ DiscussionBoard.errors[1576325].message }}
    • Profile picture of the author Mattk
      Originally Posted by Kezz View Post

      The other thing to note is that you should use only one H1 tag on each page.
      Does WordPress make sure of this natively? Or do you have to edit the template?
      {{ DiscussionBoard.errors[1576865].message }}
      • Profile picture of the author Kezz
        Originally Posted by Mattk View Post

        Does WordPress make sure of this natively? Or do you have to edit the template?
        Well, it's not taken care of natively by wordpress itself as it's under the control of the theme creator. However, it is a standard for theme creation that almost every developer will adhere to, so in most cases you'll find your theme is already setup this way.
        {{ DiscussionBoard.errors[1577150].message }}
        • Profile picture of the author Elle Holder
          Originally Posted by Mattk View Post

          Does WordPress make sure of this natively? Or do you have to edit the template?
          Originally Posted by Kezz View Post

          Well, it's not taken care of natively by wordpress itself as it's under the control of the theme creator. However, it is a standard for theme creation that almost every developer will adhere to, so in most cases you'll find your theme is already setup this way.
          Actually, I've learned to always check, as there are some insane variances. When I put up free mini blogs, I'll often go searching for a freebie theme that suits what I'm doing. I now always check the code, because trust me, just because someone can put together a great theme from a graphic perspective, does not mean they have a clue when it comes to SEO.
          Signature

          {{ DiscussionBoard.errors[1579829].message }}
          • Profile picture of the author Andrew E.
            The H1 tag is important, but there are many other factors at play that combined, outweigh your h1 keyword density.

            If you just want to get rid of your h1 tag visually, though, I like to use css

            HTML Code:
            <style>
            h1 { text-indent: -9999px; }
            </style>
            {{ DiscussionBoard.errors[1580163].message }}
  • Profile picture of the author Ben Roy
    Yeah, not sure exactly what you guys are talking about. Apply styles to make the H1 tag look however you want it to look - it doesn't have to be ugly. If you want a very small header, then use a style or class to make the H1 tag small.
    {{ DiscussionBoard.errors[1576355].message }}
  • Profile picture of the author Dennis Gaskill
    Just use CSS to make your H1 heading look the same as your normal body text if you want it to blend in completely. You can even make it inline so it doesn't force a new line break.

    Code:
    <h1 style="display: inline;">heading text</h1>
    ...will allow the heading text to flow right along in the sentence just like normal text.

    I would put it in an external style sheet though, rather than using it inline as I did in the example.
    Signature

    Just when you think you've got it all figured out, someone changes the rules.

    {{ DiscussionBoard.errors[1576883].message }}
  • Profile picture of the author Mattk
    @Lloyd

    I had to give you a thanks just for your signature.
    {{ DiscussionBoard.errors[1579676].message }}
  • Profile picture of the author Dennis Gaskill
    The H1 tag is only one ranking factor. It does help, but a page or site can rank well without it if there are enough other factors going for it. I think it was Matt Cutts that revealed Google has about 200 different things that factor in to a site's ranking, so any one thing isn't going to make or break a site.
    Signature

    Just when you think you've got it all figured out, someone changes the rules.

    {{ DiscussionBoard.errors[1579790].message }}
  • Profile picture of the author Suzanne Morrison
    On the subject of how important the H1 tag is in SEO (or any other tags for that matter), I don't believe anyone really knows for sure (apart from Google), but here is a very useful page that I bookmarked a while back that shows the different on page SEO factors and their importance, as perceived by a panel of 72 SEO Experts:

    Search Engine Ranking Factors | SEOmoz

    If you scroll down to the H1 tag it is listed as having a moderate importance (4th most important on page factor after TITLE tag and domain name).

    I always use an H1 tag and use the stylesheet to get it to the font/size that fits in with my sites.

    Cheers
    Suzanne
    {{ DiscussionBoard.errors[1580218].message }}
  • Profile picture of the author digigo
    it would not surprise me if Google uses thousands of factors when calculating the ranking.. H1 probably is as important as your meta "keywords" tag.. which means very little.. dont spend too much time on those on page optimization.. have the right keywords, and promote and get meaning backlink, that is the right way to go
    {{ DiscussionBoard.errors[1580241].message }}
  • Profile picture of the author John Romaine
    H1 tags are over rated.

    Ive had a site first position (out of 41 million results) in Google for over 6 years and not once have I used H1
    Signature

    BS free SEO services, training and advice - SEO Point

    {{ DiscussionBoard.errors[1580333].message }}
  • Profile picture of the author ej2012
    I know this post is pretty old, but this information may still help out someone. I wanted to share what I do to get rid of the H1 tag that comes hard coded into pages and posts. I like to control what goes at the top of the page and posts.. in fact it's still an H1 tag by the time I am done, but I have better control over it and still get the SEO benefit from it.

    Here we go: Under Appearance, Click Editor, then move your eyes to the right and scroll down..

    1.) I go into the page template and post template, usually its page.php and single.php
    2.) I then find the line that look like this <h1><?php the_title(); ?></h1> in the page.php file and I change this to <h4><?php the_title(); ?></h4>
    3.) Then in the single.php file I find the line that looks like this
    <h1><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h1> and change it also to <h4></h4>

    Now you should see on your site that the titles for pages and posts just became pretty small.

    Now what I do is go into the stylesheet.css or whatever it is named for your theme. I add this to the h4 style display:none;

    That hides everything that is h4 on the site. That get's rid of your page and post titles.

    Now if you want a h1 heading in your page or post, you can control that when creating your page or post. Just put Your Title at the top of you content, highlight and use that drop down to select h1..

    Now you have your title as h1 and can center it if you want and that gets rid of having double titles and keeps your page/post nice and clean..

    hope that helps someone

    cheers,

    ej
    {{ DiscussionBoard.errors[4420993].message }}
  • Profile picture of the author Istvan Horvath
    ^^ that's a complete nonsense... it was not worth digging up this old thread

    There is a reason why a webpage (regardless whether it was created by WP or hand-coded html) should have one h1 and as many h2, h3, h4 as needed - to give a structure to your content.

    The big G. does read the headings and constructs the outline of your content. (In case anybody really knows how to use MS Word or OpenOffice Write... they should know how to use properly the headings. Unfortunately, the majority never uses them correctly. otherwise there wouldn't so many questions regarding how to create a TOC for their ebooks...)

    The principle is the same in the case of HTML.

    Oh, and the correct way to use H1 and h2 in a WordPress theme > check out the last two default themes: 2010 and 2011. There is a lot to learn from there!
    Signature

    {{ DiscussionBoard.errors[4421050].message }}
  • Profile picture of the author Kezz
    Istvan is on the money. And on that note I would say that if anyone wants more understanding on how different heading tags should be used in proper WordPress SEO they check out this article:

    HTML Heading Structure & Your Blog's SEO - Yoast

    Joost (Yoast) is one of the top SEO people in the WordPress space and the article tells you just about everything you need to know. You can see the principles in action just by viewing the code of his own theme.
    {{ DiscussionBoard.errors[4421306].message }}
  • Profile picture of the author wickedinnovation
    If you want your site to rank high. You need to use H1 tags to give emphasis on the phrase. Other sites do not use H1 tags because they think that they are tricking Google, but it is one of the factors on how Google ranks a site.
    {{ DiscussionBoard.errors[4429493].message }}
  • Profile picture of the author Karen Barr
    If the problem is because you have the post title on the page, and then you want to follow it with a H1 tag, then you can uncheck "Show title on page" on the WP editor screen for that post/page. I do this with quite a few of my pages where I want a snappy title in the menu but a longer headline on the page.
    {{ DiscussionBoard.errors[4430209].message }}
  • Profile picture of the author Tomos Wyn
    Why not use some kind of Image replacement technique? I mean I use this when I want to jazz the text up within any kind of tag.

    Nine Techniques for CSS Image Replacement | CSS-Tricks

    My preferred technique is #8
    {{ DiscussionBoard.errors[4430660].message }}

Trending Topics