Is CSS Image Replacement OK for SEO?
CSS Image Replacement is a web design technique that calls a logo or specific image via the CSS stylesheet, while hiding some text behind it on the web page.
The normal code for a logo would look like this:
<img src="images/logo.jpg" alt="logo name" />
Using the CSS Replacement technique, first you would create a CSS class that would look like this:
width: 300px; height: 50px;
And then you would call the logo on the web page with the following code:
<h1 class="main-logo">Logo name</h1>
The visual result would be the same in both cases, but with the CSS Image Replacement you would have the “logo name” text hidden in the page.
Why? Why Not?
Why did people started using this technique? Mainly because it makes the logo more accessible. Search bots, for example, will be able to know what it is about (they can read text, but not images).
Why there is some controversy regarding this technique, though, if it makes the web design more accessible? Simply because it can be exploited for SEO purposes. Hidden text is a very old SEO trick, and today most search engines penalize it.
CSS Image Replacement in theory is a legitimate reason to hide text, but it is not always clear if Google and the other search engines are fine with it.
What Does Google Say?
Matt Cutts, who is head of Google’s Web Spam team, once wrote:
If you’re straight-out using CSS to hide text, don’t be surprised if that is called spam. I’m not saying that mouseovers or DHTML text or have-a-logo-but-also-have-text is spam; I answered that last one at a conference when I said “imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company’s name and it’s Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is ‘Expo Markers cheap online discount buy online Expo Markers sale …’ then I would be more cautious, because that can look bad.
So according to him it depends on how you use the technique. He does mention that it can be a reason to get your website flagged for spam though.
Who Uses It?
Apart from checking what people are saying about it, it would be nice to see who, among the SEO experts, is actually using the technique, right?
Rand Fishkin from SEOMoz seems to be a big proponent of that. He uses CSS Image Replacement on the logo of his popular website, and he also wrote a post once defending the idea behind it.
Aaron Wall from SEOBook, on the other hand, does not use it.
Wikipedia seems to be using CSS Image Replacement, while Google does not use it on any of its properties.
What Do You Think?
Do you think that CSS Image Replacement could cause SEO problems to a site using it? Obviously we are considering a site using it legitimately, and not abusing it. Let us know what you think and leave a vote on our poll too (RSS readers might need to visit the post to see the poll).
20 Responses to “Is CSS Image Replacement OK for SEO?”
This image replacement is only one of the many techniques that are available.
You could just position the image on top of the text and without hiding it with css. The only drawback is that you have to use some extra markup, but it’s easily done and i think that is preferred.
I think no affect on SEO but there is a one problem for people on Slow internet connection and justkeep images turn off they can’t see logo image or text hidden by css.
they need to to disable css to see logo H1 Text
I’m not a SEO expert by any means, but we’ve been using it for years on the Doreo web site. We are, however, very careful how we use it. Within the Doreo site we have h1 tags that show as the main “title” for each page. These h1’s use image replacement to show a text graphic instead of the actual text. We believe that this is safe because the text in the graphic (and the alt/title tag) exactly matches the image that replaces it.
@Brno, but that would still be considered hidden text as you would have an image above it.
No, I think Google is smart enough not to penalize legit sites using this tactic. (Like mine.)
I definitely would not use it. If there is any thought that it might hurt you then why take the chance. I think it is always better to stick to the basics.
I would definitely use CSS image replacement techniques. Not only are you not penalized by Google, but all things being equal, using semantic HTML and well chosen CSS techniques results in higher rankings. (Because Google favors pages with a better code/content ratio.)
Of course, the reason people use image replacement in is because it is generally considered a best practice among standards-aware designers.
@Daniel, yes it’s hidden to the eyes but not to the bot. Unless Google understand absolute position and where is every element positioned in the page.
Searching for a negative “text-indent” is a much easier thing to do.
Also, I agree with Frank. I wouldn’t waste the h1 tag on a logo. Headings are supposed to be related with the content of each page.
Maybe today it may not be an SEO problem. However, you never know what Google may decide in the future.
I believe that usage of the conventional ‘alt’ property is the best approach though in my case I use a different approach (including a hidden H1)
For starters, I don’t use this for logos on the sites I develop. Instead, I use an actual image; saving the H1 heading for its intended role – the top level heading of a Web PAGE.
Since Web pages are unique, and search engines index pages rather than sites, using the H1 heading for a site logo makes about as much sense as using tables for layout.
That being said, the technique you outlined here will cause accessibility issues as jitendra pointed out. If you turn off images while leaving CSS support on, your users will not see the image or the text. It’s far better to use an empty SPAN next to the text, and overlay that on the text with absolute positioning (set the parent’s position to relative and set its overflow state to hidden, then set the span to absolute and give it a height and width equal to the parent container).
@Blog Expert and Ajay – Google has already said that they consider it to be a user experience enhancement and won’t penalize site owners as long as they’re not doing anything stupid like stuffing 50 keywords into the substituted image’s parent container. You can rest easy in that regard. 🙂
it not make much different to be honest.. but if google take it seriously you better be worry.. sometime and for some reasons dont mess with them.
do we put “blog about blog, how to become rich etc”. behind image? because only that way, the techniques seem give benefit.
Looking for a ‘wise’ solution regarding this issue daniel 🙂
Ehm, how about if i use as the alt text? And, if it affects seo, how far it will reduces the optimization?
Sometimes i thought that seo is a kind of idealism, a kind of pattern which motivate us to reach it, but would be never.
@whizbang, re: “do we put â€œblog about blog, how to become rich etcâ€. behind image? because only that way, the techniques seem give benefit.”
The answer is no. You put the text that appears on the image in the heading. If your “substituted” or “replaced” image says “Joe’s Blog about Blogging”then the text that it’s covering up better also say “Joe’s Blog about Blogging” – and nothing else.
@ara, assuming you’re talking about using the IMG element for the logo (which I do), using the alt=”” attribute won’t harm the optimization of the page. After all, you don’t want to waste the H1 heading on the site title anyway – you want to use the heading as the top-level heading on the current page. And that heading should contain the keywords that best describe the page.
For example, if the page was about changing a flat tire (let’s assume it’s a car care tips site), then the H1 would look something like this: (I hope the brackets don’t get stripped or parsed, I really do.)
How to Change a Flat Tire
The logo would then be an image that had the alt text identify the text in the image logo, like so:
(the empty title attribute is there to fix an Internet Explorer “bug”)
Well that bites… so they did get parsed (sorry folks). Okay, here’s the code (I hope), but with straight brackets instead of the regular standard fare…
[h1] How to Change a Flat Tire [/h1]
[img src=”/images/logo.png” alt=”200″ height=”80″ alt=”Car Care Tips” title=””]
Just make sure you replace [ and ] with in your own code.
The alternative is using an image, as stated before in comments, with an alt tag.
I tested for 1 month on my h1 title tag. The results were interesting.
I’ve dropped from the first position in google.ro for “blog” (romanian pages) to 4th, just 1 day after changing h1-text-replaced-by-css with h1-image-with-alt-tag.
this week, i’ve putted back the CSS replacement tehnique and now i’m back on top.
there’s nothing more to say
I think it is legitimate and Google shold not penalize such a practice unless it is abused throughout the site.
Yellow Search Engine Optimization
CSS header / image replacement techniques are effective but so is alt text is equally as effective. The reason h1 technique does work great some times is usually due to proximity of the header logo usually being the first thing in the body text
I’d say it would be very risky using hidden text that that does not contain exactly the same text as the image. Google has very powerful text-in-image readers. There is no reason why they wouldn’t use this capability to match the image text with the h1 text. I think that is what’s hinted at by the Google employee. Also, to my understanding, for the the more popular websites, Google will do a manual (human) review of a site.
Comments are closed.