treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Is using css to show a logo in place of h1 text against google rules?

  • I've been contacted by a client who wanted me to remove all hidden text from his site( by this he refers to h1 tags that are hidden using css to display a logo or so,) as he thinks this is against Google's latest updates and saying that this could lead to his site being punished by Google!

    Is that true in any way?
    thanks.
  • It depends on how you're doing it, I suppose.
  • Google does respond negatively to hidden links, because there was a time when designers would make links really small or the same as the background color, just to get a higher rank on Google searches.

    h1 tags are considered important, but I think that a hidden h1 tag would just be ignored.

    Are you putting the image as a background to the h1?
  • Yes, the image is used as a background to H1 tag of the page title which is given a text-indent of -9999px, I've always done this.

    Is it considered bad practice now?

    thanks,
  • In my opinion, SEO/SEM is not an exact science, not even for Google's algorhytms. It's just as hit and miss as, say, marketing or PR. It's a combination of so many things, sometimes things help, sometimes they don't.

    Having said that...

    If you look on this page (I looked because from one day to the other, my own site is not listed in Google anymore when you do a simple search for "senff"....), it says the following:

    "However, certain actions such as cloaking, writing text in such a way that it can be seen by search engines but not by users, or setting up pages/links with the sole purpose of fooling search engines may result in removal from our index."

    Again, it's not an exact science because I'm sure it's not a crime to do this for H1's, but still, if you follow it to the letter, it's bad practice.
  • Yes, it's really bad. Google just adopted a new algorithm.

    It's basically penalizing every over-SEO-optimized websites out there, the ones with hidden links & header tags and 100 lines of meta description.

    looks like your client has done some good reading. Panda algorithm, look it up.
  • So, for all the above discussion I understand that's it's better to have an image inside of the h1 tag and let the alt tag be the text I wanted to include like so,
    <h1><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/logo.gif" alt="My Site Name" /></a></h1>


    Is that the best thing to do then?
  • For all intent and purposes, using the site logo as a H1 is not the correct use in the first place, I think.

    H1 should be used to describe the topic/subject of the very page, not the site.

    For example, on any book page on Amazon, H1 should be used for the book title -- not the Amazon logo.
    On any auction page on eBay, H1 should be used for the product title, not the eBay logo.
    On a page like this one, you'll see that the topic of the page ("Sass vs Less") is the H1 title -- NOT the "CSS Tricks" title.

    If you keep focusing on that, then you won't even really need to replace it with images, since the page title is usually actual text (unlike the site logo).
  • @senff is right there, if you use the heirarchy of the h# tags correctly it will result in better rankings. However putting the img inside the h1 will be better than hiding text for sure.
  • Thanks @Sneff and @schmotty for the explanation, I really appreciate it.