Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Image Replacement + Google

May 05, 2008

At An Event Apart in New Orleans a few weeks back, something that Aaron Walter said on stage caught my attention.

During the portion of his talk where he discussed image replacement and its impact on findability, he addressed the white elephant question that has likely occurred to most designers who have used image replacement over the past five years or so: what does Google think of CSS image replacement, anyway? But the part that surprised me is that he actually had an answer: Google’s okay with it, you won’t be penalized for using image replacement properly.

Though I’ve long believed this to be true, I had never heard a conclusive answer. One assumes Google is smart, and their algorithms ought to know the difference between keyword-stuffed text and plain English content written for real people. For example, I’ve often wondered if the potential to abuse image replacement and load invisible text with keywords was akin to, say, the potential to stuff keywords into the alt text of img elements, or even into meta tags. The net result seems similar in all three cases: otherwise-invisible text on a page that could unduly influence Google’s ranking. Presumably whatever algorithms they use to detect keyword-stuffing on the other two elements would equally apply to text hidden with CSS.

Not to mention the more compelling evidence that numerous sites I’ve built using image replacement techniques fare well in Google’s ranking. That fact alone indicates that Google won’t ban a site for simply making use of image replacement techniques (though I’m sure they’ve banned numerous sites using the technique in a sneaky, black hat SEO manner).

But again, I’ve never heard of an official blessing from Google. So I did some searching, and asked him for some follow-up (thanks, Aaron!), and here are the relevant resources that came out of that conversation:

Hidden text and links

The second bullet (“including text behind an image”) accurately describes a few image replacement techniques. It’s mentioned in the context of being a potentially untrustworthy activity, followed by a warning of the consequences of using it incorrectly. However, further down the page, the focus changes to techniques used for the sake of accessibility and why you would want to describe something search engines or users with assistive technology may not be able to access. This is a fairly accurate description of the intent behind image replacement. The article also suggests a handy rule of thumb for judging these techniques on your own: show the Googlebot the same thing your visitors see. Properly-used image replacement passes that test.

Best Uses of Flash

See point #2 in regards to sIFR, an ideologically similar concept to CSS image replacement, which suffers from the same potential abuse vectors. As this is a Google blog, it appears sIFR has an official blessing. Also mentioned in this article is a similar guideline to the previous one: show users and the Googlebot the same content. Sensing a theme here?

Working with Flash, images, and other non-text files

More of the same. Provide text alternatives for non-crawlable content, sIFR’s great, etc.

So it appears that, short of a set of stone tablets carried down from the hills of Mountain View, we do have a fairly clear answer. Using CSS image replacement in a responsible way, where the image truthfully represents the content it’s replacing, is safe to use. The simple act of hiding text from users is not enough to get your site banned from Google’s index.

(This article has also been translated into Russian.)


May 05, 15h

Very good news Dave although not really surprising to me; I mean, that’s how things are expectedto work in the modern Web.

In my opinion, generally speaking, when something non-textual has to replace something textual (via CSS, for instance), the textual fallback representation must always be provided: first, because we care about users; second, because we also care about “special” users such as bots and source analyzers like those of Google ;)

Of course it is good to know that Google has “implemented” the right intuition of things!

Mike D. says:
May 05, 15h

Amazing to me that we invented sIFR over four years ago as a band-aid and it’s arguably still the best thing out there for custom typography.

Let’s go browser manufacturers! Take Safari’s CSS3 custom font implementation and adopt it already!

May 05, 16h

Dave, to add to your comment about the SEO success of the site’s you’ve built for your clients using image replacement - Apple.com has one of the highest PageRanks on the Web with a score of 9 out of 10 possible. Their navigation uses the Leahy/Langridge Method and they are certainly not being penalized for it.

In order for a site to be blacklisted as the German BMW site was in 2006 (see http://www.news.com/Google-blacklists-BMW.de/2100-1024_3-6035412.html), people on the webspam team at Google review it in person. This means that if you’re using image replacement legitimately (ie. the text in your image matches the text in the element where the switharoo occurs) the webspam team will not mistake your good deed for a black hat trick.

@Mike - agreed. It’s time for the type issue to be resolved.

May 05, 17h

I was under the impression that the potential for penalties from search engines for hiding content with CSS only applied to inline styling and not to anything contained in external stylesheets. Maybe that notion is out of date? As an added security measure, I’ve always disallowed indexing of my CSS directory with robots.txt.

I think another interesting question to ask relating to the use of images for text is whether an image-replaced piece of content has any more SEO weight than the same image in the HTML (not CSS) with the text contained within the alt attribute?

May 05, 17h

This is such good news! And thank you very much for writing it down, now I can reference it in the future.

We had a client last year who used another firm for SEO that made us change our CSS image replacements because they said that’s why they weren’t getting their search results. Justification finally! Hurrah!

May 05, 21h

To me, Google sees image replacement as a sort of reverse alt tag for text. When used properly, it’s just a way of providing a different interpretation of the same content.

7
TyGos2 says:
May 05, 21h

Thanks for the timely post. Image replacement is really at the heart of the whole X in xhtml logic. A stylesheet can make the images fit where they need to go given the media, even mobile design structure from the same xhtml page.

Ole Hook says:
May 06, 02h

I have a question to you experts:

I use an another technique of image-replacement. So i don’t integrate the image as a background-image, but as a normal image in the code and add an invisible span-tag with the real text in it:

Lorem ipsum dolor sit

The class “invisible” looks like this:

.invisible {
position:absolute;
left:-9999px;
}

I need to integrate the headline image into HTML as an image-tag, because it can have 1 or 2 lines and it is generated automatically via PHP.

So what do you think about this? And what thinks GOOGLE about it…?

Ole Hook says:
May 06, 02h

For better understanding here is a code snippet:

<h1><img src=”headline.gif” alt=”Lorem ipsum dolor sit” width=”300” height=”22”><span class=”invisible”>Lorem ipsum dolor sit</span></h1>


Sorry for double post…

May 06, 03h

This information is sort of a relief for all people working on accessible websites. We long have been insecure about Google handling stuff that was hidden via css to serve visitors with assistive technologies.

May 06, 07h

It is good to get this confirmed, great job Aaron! So basically, all ‘regular’ image replacement techniques are safe, because a penalty will occur after a human inspection (as what happened to the German BMW site)?

May 06, 08h

I’m glad someone finally addressed this issue and backed it up with some reputable sources. Thanks for posting this, Dave.

I’ve had the pleasure of meeting up with Aarron several times since SXSW 07. He is an intelligent, creative and resourceful individual who is passionate about all aspects of this industry. Evaluation of markup strategies like image replacement is just one the aspects of findability that he covers in his book:
http://buildingfindablewebsites.com/

Yes, that was a blatant book plug, but since Aarron didn’t do so in his comment, I figured somebody had to mention his book. :)

13
3D says:
May 06, 08h

I think one of the reasons why Image replacement technique would be considered to be bad idea is that both text and image won’t show up, when user turn off their image display option “off”.

But it is very good to know that google okay with it when it comes to SEO.

Thanks for the info!

May 06, 15h

“I think one of the reasons why Image replacement technique would be considered to be bad idea is that both text and image won’t show up, when user turn off their image display option ‘off’.”

Not necessarily; there are techniques like Gilder-Levin where the text is still visible with images turned off.

May 07, 08h

Ole Hook, I don’t see how your version of image replacement would be any different according to Google. But now that you know Google won’t penalize you for using “display:none” on that span tag, it would make your code shorter and would avoid any possibility of someone who has a browser width of 10,000 pixels ever seeing it… which I know doesn’t exist, but you never know if it ever will exist on a really, really big screen someday. Maybe some little guy with a complex will invent that. :-P

16
Daniel says:
May 10, 06h

I had an argument(as in exchange of ideas) with a collegue a month ago. He *discovered* that I used an image replacement tehnique on an h1 tag - despite the fact that I replaced an image contiaing the same text it displayed; I had used your revised image replacement, however his main concern(being somewhat SEO obssesed) was that this will impact it’s page rank, thus the position in the google page search results. So it was never a question if this is enough to get our client’s website banned.

Matthias says:
May 14, 09h

I’m working widht for instance: text-indent: -9000px;

… and it works with Google.

I think Image Replacement for Headlines is okay, because nobody will be able to give a headline a completly diffrent meaning.

18
abu says:
May 14, 18h

uhmm, maybe it’s a n00b question, but why everyone assumes that googlebot is aware that some text is being image-replaced via css?

I mean, that would imply the bot has to parse tons of html and external css files, request image files ecc… and in the end figure out if major browsers could render the page so that some images obscure some other text.

I think it’s feasible but it would be a hell of a overhead.

Anson says:
May 14, 20h

Abu, Google already does a lot of work parsing massive amounts of HTML, not to mention the work done with that parsed HTML to rank pages effectively according to relevancy. Checking the CSS for common methods that hide content is really not that difficult in comparison to what they’re already doing with the content they’re indexing.

20
Web Design Glasgow says:
May 16, 07h

Google can’t really penalise anything based on its analysis of your CSS because it can change after the page loads. For example, you might hide a div with display:none until the user mouses over a particular area of the page.

Thus, Google has to resort to language analysis to detect keyword stuffing, and links to determine a level of trust in the page.

May 19, 18h

@ Dave:
“One assumes Google is smart, and their algorithms ought to know the difference between keyword-stuffed text and plain English content written for real people.”

You’re right there. For anyone who needs convincing on Google’s intelligence, take a look at the two articles written by Sergey Brin that I’ve linked to below – they provide an insight into the sheer thought that has gone into Google, as well as how it works “under the hood”.

A quick glimpse at these should convince you not to worry about things like image replacement, the ‘off-left’ technique, or using the odd ‘display: none’ rule to hide a skip link etc.

The Anatomy of a Search Engine
http://tinyurl.com/6zxo7h

What can you do with a Web in your Pocket?
http://tinyurl.com/6dblxl

PS: I’ve converted these rather ugly, long-winded links into “tiny URLs” because I don’t want to be responsible for breaking your layout (I’m good like that!). Also, the documents are only available in Postscript and PDF respectively, so I’ve linked to the HTML versions generated by Google.

May 21, 13h

I spoke with Google about this about a year ago and it was put to me quite matter-of-factly: They don’t care about legitimate uses of hiding text for design and accessibility, that they check before pulling the plug, and that logic and common-sense is applied.

I was relieved to hear it.

David says:
June 01, 18h

Hey,

google uses image replacement techniques like Ole mentioned above: Have a closer look at Google Reader - the logo is replaced via css. Actually, it’s a h1 which inner text is hidden and replaced by an image.

I think Google does not flag a site for using these techniques without manual review. I use as much text replacement images as it makes sense…

June 04, 11h

That’s why I hate that ‘innocent’ attitude from Google.

What if then Google comes and says: “Using images to replace text is not a proper technique, is not search engine/bot friendly.”

Then we all have to bow down and obey. BS.

It’s like if Google ‘owns’ the truth now, a truth that we all already know exists WAY before Google existed.

It’s OBVIOUS this technique es proper, it respects human users and search bots/spiders in every sense, and this happens even without Google having to state it in their Webmaster Help Center.

We were lucky, VERY lucky, that Google considered that rule as ‘valid’, otherwise, web designers/SEO consultants would’ve had to kneel and bow.

Google sucks big time, it’s either what they WANT or what they WANT.

Sad reality mates.

June 26, 05h

@Anson:
“Checking the CSS for common methods that hide content is really not that difficult in comparison to what they’re already doing with the content they’re indexing.”

I’m sure your analysis of the relative complexities is correct. But I routinely list my external CSS files as off-limits to robots via my robots.txt file. (After all, I do want the content of my pages indexed, but why would I want my styling code indexed?)

Which raises the questions that I’ve asked in several SEO forums over time (but never got a conclusive response to): if Google has been told to ignore your CSS files, and assuming that it honours that instruction, how then can it determine when CSS has been used to hide text in the markup? External CSS must, by now, be more prevalent than styles placed in the head of the page after all. Does it simply look for markup that has been known to be used for image replacement? That would be quite a big assumption to make – I’m sure that image replacement is not the only use for an empty span.

Can Google really get past a disallowed external CSS file?

Tilaka says:
July 11, 12h

We’ve just begun to use CSS sprites with one client - and I never thought about this particular approach to introducing descriptive text.

Sprites are not very mainstream yet, but they certainly can help download speed by reducing the number of http connections. With google putting more and more emphasis on the end user experience when they click on google search results, all those factors that improve page speed seem to be potentially helpful in ranking.

July 15, 01h

I use already some image replacement technics and is nice to see that is still evolving. Thanks for the usefull info and the tips.

July 16, 21h

@Rick

“Can Google really get past a disallowed external CSS file?”

I’m I’m correct, a “no follow” will prevent an engine from indexing a page but they will still read it, nonetheless. They will still see your styles which is how they know if you are using black hat techniques.

An engine will read all code that a browser would load.

Sam Daams says:
August 10, 14h

There’s a thread on Webmaster Google Groups (http://groups.google.com/group/Google_Webmaster_Help-Indexing/browse_thread/thread/928aa76a1226cf89/32b089e3248cef78) about this from last June, where one of the Googlers went and checked with Matt Cutts (head of Google spam) and quotes him.

The basic answer is like you’ve mentioned, it shouldn’t be a problem. However his answer also makes it clear it puts you one step closer to ‘the grey area’. All things considered, if this is the extent of what you’re worried about with regards to Google mis-interpreting, I think you’re very much on the safe side of things :)

ps. is it just me or does the checkbox for Remember me stretch about the same width as these other input fields? Intentional?

October 04, 03h

Image Replacement is o.k., as long as the designer will do it for design proposes. That’s it.

October 04, 22h

Thank so much for the straightforward answer to this question. I will use this as justification to all my clients to use image-replacement and/or sIFR.

Is sIFR more desirable than image-replacement or some other method?

Good point about us bowing to Google, God help us if they ever decided to say image-replacement is “bad!” I’m not at all anti-Google, but seriously…it’s a point to consider. Kinda like trying to boycott Wal-mart.

32
Ellen says:
October 05, 02h

Thank you for this. I’m really glad to have a definitive and documented position from Google, but there are still outstanding concerns.

First, I am with John (#4) in wondering whether, in creating a Heading that contains an image, there is a difference in the SEO value placed on actual text versus alt=”text”? Is the alt=”text” parsed and if so, is it considered heading content when attached to an image inside the heading tag? I’d rather use a direct HTML img than a background CSS image since it is still displayed when CSS is turned off and is printable (and yes, I know I could serve a different stylesheet for printing). Nonetheless, it makes a big difference on choice of technique to know this.

Yet, this is a bit of a moot question today since only some browsers display the alt text - and quite differently at that - with images turned off, making this technique a questionable choice for accessibility to all users in that it requires browser dependent stylesheets. I’m so tired of having to make bad coding decisions in order to accommodate non-compliant browser software.

Is there a reason related to coding and separation of content from style that would suggest choosing HTML text rather than alt=”text”? It feels like there should be. Both techniques work efficiently, but one requires no real text in the markup while the other requires an additional non-content tag. Does this point to why one method might produce better SEO results? On the other hand, I often indirectly include style coding in the HTML by accessing CSS through spans and classes ~ to change font colours mid heading, for example or changing the intended function/style of a tag ~ which seems just as muddled. Theoretically they should be the same, but my gut says that real text is a better choice. I’d love to know how G sees it.

Second, I am astounded that G suggests we should use a javascript or flash technique instead of simple CSS for image replacement when the whole point is to increase accessibility! I’m already jumping through hoops to make sure my site degrades properly and is still completely comprehensible without images, CSS, and javascript (which I add ONLY in the most unobtrusive and sparing ways AFTER the site is built) and altering font sizes. I’m a tiny independent business and I can’t imagine adding more techniques that depend on client-side functioning that hold the potential to interfere with my presentation - I find it hard to believe it would be a technique of choice for a massive site.

On the other hand, if font substitution without downloading or client-side installation is something we want … I have just read about FLIR (http://facelift.mawhorter.net/) - a much simpler font replacement technique (sorry Mike) with solid promise using only javascript and real (not flash) fonts that returns a scalable image styled with CSS. Perhaps, at least for headings and menu/navigation links, this debate might soon end.

Sorry for the long post.

AMEN @ Ricardo and @ Elaine

October 10, 04h

An important issue this and possibly reopened for debate. Google has clearly changed something last month (Sep 08) as I have seen a dramatic drop in page rank on some client sites for very relevant key words. I am not alone on this either.

My own site has also jumped dramatically on a very general term. Not complaining on this one but it is very odd.

October 13, 16h

I’m really glad that someone has managed to straighten this out. Over the last 3 weeks we have been trying to reach a conclusion over the strategy on this subject.

I’ve noticed instances of both ‘good use’ and ‘bad use’ of image replacement, be it sIFR or any image replacement technique. The puzzling thing to me is that the ‘bad use’ of this technique (meaning black-hat use), isn’t getting unscrupulous users of it banned by Google. Which can only mean they wait for these sites to be reported, and it’s done by hand (so-to-speak).

nice one keep up the good work ;-)

January 13, 02h

We recently updated our website where we were using the Phark Method to do the switcheroo on the H1 tag.

At the time I had read somewhere that Google took a ‘relaxed’ view on the idea of image replacement. So I added one or two extra keywords to the hidden text in the tag (literally) and updated the website.

After a week or so I did notice that the SERP had slipped, and continued to do so for a number of weeks afterwords! We actually slipped 7 pages as a direct result of this.

I think that maybe someone had brought it to Google’s attention (maybe a competitor), and Google had picked it up and penalised us for this breach of the proper use of the image replacement technique.

Obviously, we now have everything swapped back to the correct use of the technique, where the image matches the text… but nevertheless an interesting experiment!

Good article - love this site.

Naia says:
February 23, 04h

I wonder what Google thinks of hiding text using one of the least used CSS properties : clip.

A simple image replacement technique we use (alas, with a SPAN around the text) works like this :

A { width:whatever; height:whatever; background:whatever; }

A SPAN { position:absolute; clip:rect(0 0 0 0); }

I suppose it doesn’t work with screen readers, since the text is effectively hidden (I haven’t tried it though). But I wonder how it compares to ‘display:none’ or ‘visibility:hidden’ for Google, since a browser like Lynx sees the text fine…

gav says:
February 24, 18h

my understanding of the way google ranks websites starts
-with the number and quality of inbound links to a given page and the
-associated keyphrases contained in the anchor text.
-the keyphrases in the title for the page
-the keyphrases in the h1 and h2 tag if any
-the keypphrases in the first paragraph and last paragraph of text on the page
-etc

And so, I don’t think that using image replacement to replace (eg) the text in the h1 element would have a significant effect on a web page’s ranking in the google search engine results pages for a given web page. (If the google bot wasn’t able to index that text)

Very little happens, I think, to a web page’s rank for a given keyphrase by stuffing the keyphrase 100 times into the alt tag for example. Google doesn’t give a web page a better rank if you increase the number of instances of a keyphrase appearing in the webpage from a small number to a large number. Hence there isn’t any need to worry about what would happen if google wasn’t able to collect the text that would have been in your h1 tag because it isn’t that important in google’s algorithm.