CSS Heading Image Replacement

A friend of mine recently asked me to weigh in on a question on his blog from a client who was raising some questions after attending a SEO seminar regarding hiding text with css for headings and SEO. Here’s my 2 cents…

This is one of those situations where “common sense” comes into play and your intent as a web developer as well. Unfortunately the amount of “SEO companies” that practice shady techniques (Black Hat) far outweigh the ones that follow the rules and are considered (White Hat). That puts a bad taste in people’s mouths about anybody who says they’re an SEO so it’s our job to educate them on the right way. The client was at a SEO seminar for a reason, so he’s already looking at what was worked on.

If you’re using an image replacement technique for design purposes it’s okay, BUT use common sense and understand the word “moderation”. Much like an alt attribute on an image, the text needs to be descriptive but not full of useless garbage just to throw keywords at the bots. So when you replace an H1 with an image and put text-indent:-9999px or display:none or visibility:hidden on the text within the H1; as long as you keep it description of what the image is you’re fine. If your H1 image replacement is the HLF Industries logotype, and your text says “HLF Industries” – there’s nothing wrong with that. Now if you put tons of keywords in with the HFL Industries… now you’re intent is not with the benefit of accessibility and your users, but to gain rank illegally and you’re not using common sense. That’s when Google starts to lay down the law with their algorithm.

The same goes for sliding door images and navigation bars with text in list items that are “hidden”. It’s descriptive text for the button navigation and there for text browsers and audible accessibility reasons.

Now if you don’t believe ME, then read the following comments and posts from Matt Cutts and Susan Moskwa of Google and feel free, Beau, to forward my comments onto your client if it would help.

1) Matt Cutts is a software engineer at Google and when posting about a site using some shady tactics got misunderstood and taken out of context by the community. He then made some comments and cleared up the situation, leaving us with some definitive answers on the topic.

Initial post on MattCutts.com – and his comment on ThreadWatch regarding people taking it out of context.

2) From a Google Groups discussion in the Webmaster Help thread (located here):
Susan Moskwa, who is one of Google’s Webmaster Central Google Groups support people, said it is acceptable, based on intent. Note the keyword there… “intent”.

“If your intent in hiding text is to deceive the search engines, we frown on that; if your intent is purely to improve the visual user experience (e.g. by replacing some text with a fancier image of that same text), you don’t need to worry.
Of course, as with many techniques, there are shades of gray between “this is clearly deceptive and wrong” and “this is perfectly acceptable”. Matt [Cutts] did say that hiding text moves you a step further towards the gray area. But if you’re running a perfectly legitimate site, you don’t need to worry about it. If, on the other hand, your site already exhibits a bunch of other semi-shady techniques, hidden text starts to look like one more item on that list.”

3) Roger Johansson at 456 Berea Street in 2005 weighed in on the situation and Matt Cutts said “We can flag text that appears to be hidden using CSS at Google. To date we have not algorithmically removed sites for doing that.” It is now 3 years later and Google still hasn’t done that, and in my opinion they won’t. That comment here at ThreadWatch.

I hope that helps Beau. I don’t consider myself a SEO guru by any means but I am on the front lines and have been at it for some years so if that’s any consolation; then there ya go.

For further reading here are some of my bookmarks on the subject: http://del.icio.us/chuckreynolds/seo

  • http://beau.frusetta.com Beau

    Good stuff Charlie Bucket! Thanks!

  • http://www.ericdoolan.com Eric Doolan

    I liked the article. It’s funny how people become so desperate to do black hat SEO work.

    About 3 months ago I put some crazy plugin on my WordPress site and it pulled some stupid SEO trick that got me on Google’s blocked list. Not fun. I had to go through StopBadware.org and appealed the whole thing. Thank god they fixed the problem but it took 3 months. Now what if that was a client? Oh man.

  • EZNowDude

    Google has been known to change their minds on things. One year at the SES they said doorway pages were the way to go. Everybody went out and created doorway pages. Within a few months, it was estimated that 20% of the sites in the index were doorway pages. The next year at SES, google and every other SE said that doorway pages were spam.

    My point is, anytime you put anything on a page that is not visible to the usual viewer, it MIGHT be viewed as spam. Just design a good clean site, get proper links from authority sites, give good links that pass pagerank, and everything will be fine. Trying to trick google is just dangerous. If they ever decide some tactic you are using is spam-ish, then you are screwed. The worst part is that they don’t tell you what is wrong and you might never know it.

    Why put anything on your site that google can see but a viewer can’t (other than the stuff required by the Disabilities Acts)?

  • http://www.lunchboxcollective.com Martin Kulakowski

    Correcto mundo. Basically what I’ve told Beau on his blog. Don’t abuse the power and you’ll be fine. Remember, the man is always watching! Word to your mother, Chuck-ee!

  • Indescretely Observant

    EZNowDude and Martin Kulakowski, how the hell did you even happen upon this site and NOT know that Chuck builds his sites according to not only semantically correct code but standards-based, which means that it is accessible to “ALL”? CSS images replacement has not only been deemed as an acceptable method but also recommended as well. Most European countries require that sites are build this way(standards-based), and soon it will be the standard. As far as the reason the method is used, you will never alleviate that particular client that says “well, I have to use this typeface, there is no alternative”, so tell me, if that’s the case, what option do you have?>! Do the research on whatever method you use and you will be fine, that goes for comments as well guys!

  • Indescretely Observant

    Great reference for this exact topic and further proof that it is currently accepted by Google..
    Tallyho

  • http://www.markupninjas.com Ken Hanson

    So, here’s a nice take that I’ve been using as of late.

    A good write up is here: Gilder Levin Image Replacemnt

    This one’s great because it solves the: 1) Images off, CSS off 2) Images Off, CSS On, and 3) Images On / CSS On cases. It only has problems with transparent images.

    I tend to run from transparency, as that will land you in some hacky territory, and most transparency can be faked anyway, so I’ve generally embraced this method.

    Anyways, the basic idea is that you wrap an empty element in your original element, stick the text outside of the empty element, and then absolute position the element on top of the text.

    No display or text-indent CSS involved at all.

    The Code looks like this:


    Image Name

    Tightening up your CSS can really help you automate things by using a global class for the image replacement rules, and then using one single set of rules for the image paths like so:


    .ir { position: relative; display: block;}
    .ir em { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; display: block; background-repeat: no-repeat;}

    And then your image declarations just need a height on the parent, a width, and your image like so:


    .eventEmail { width: 15px; height: 15px;}
    .eventEmail em { background-image: url(images/icon_eventEmail.png); }

    .eventDelete { width: 15px; height: 15px; }
    .eventDelete em { background-image: url(images/icon_eventDelete.png); }

    Tightening those icons up even more gets you sexy CSS like this:


    .eventView, .eventEdit, .eventDelete, .eventEmail { width: 14px; height: 14px;}
    .eventView em { background-image: url(images/icon_eventView.png); }
    .eventEdit em { background-image: url(images/icon_eventEdit.png); }
    .eventDelete em { background-image: url(images/icon_eventDelete.png); }
    .eventEmail em { background-image: url(images/icon_eventEmail.png); }

    So that any time you need to add an icon, you just add an image and a selector above.

    I’ve found this to be the best way, and JAWS absolutely loooves it. Reads it straight through without any problems at all. So you’ve got JAWS giving it the thumbs up, users that don’t look at images (think slow internet) giving it thumbs up, users that don’t use images or styling giving it thumbs up, and google loving it because its not flagging it as possible black hat. Win all around.

  • http://www.markupninjas.com Ken Hanson

    well, the css is sexier when the codes not compressed into a 515px div, heh.

  • http://rynoweb.com Chuck Reynolds

    Hey Ken, thanks for the great response on the article, I’m going to check that out here soon. And part of my todo list is to widen this site and open her up a bit… but you know how personal sites/projects go… lol

  • http://twitter.com/pixelshots @pixelshots

    damn good article man. I got what i was searching for. was doubting if will get banned if the image headings are represented with hidden h1 text.

    • http://rynoweb.com Chuck Reynolds

      if you follow that method you're fine… we all try to refrain from using terms like "hidden" ;) just heads up

rynoweb powered by chuck, built on wordpress