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:
<h1>
<img src="/img/spacer.gif">
</h1>
Using the CSS Replacement technique, first you would create a CSS class that would look like this:
h1.logo {
px; px;
"clear:both;">
Related Posts
- Best WordPress Plugins: Feedburner Feed Replacement
- Grab an image editing software
- Check if Your Images Appear on Google Image Search
Share
Sign-up To The Newsletter And Get A Free eBook
- Sign-up to the Daily Blog Tips newsletter and you will be able to download the "Make Money Blogging" eBook for free (worth $47).
- You will also receive tips to improve your blog, strategies to make money and useful resources from around the web.
20 Responses to “Is CSS Image Replacement OK for SEO?”
-
Brno on
December 16, 2008 9:38 am
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.
Cheers!
-
jitendra vyas on
December 16, 2008 9:47 am
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
-
Frank on
December 16, 2008 10:11 am
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.
-
Daniel Scocco on
December 16, 2008 11:20 am
@Brno, but that would still be considered hidden text as you would have an image above it.
-
the Blogoholic on
December 16, 2008 1:35 pm
No, I think Google is smart enough not to penalize legit sites using this tactic. (Like mine.)
-
Blog Expert on
December 16, 2008 1:45 pm
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.
-
Joshua Clanton on
December 16, 2008 2:25 pm
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.
-
Bruno on
December 16, 2008 3:37 pm
@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.
-
Ajay on
December 16, 2008 3:51 pm
Maybe today it may not be an SEO problem. However, you never know what Google may decide in the future.
-
Ajith Edassery on
December 16, 2008 5:04 pm
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)
-
Dan Schulz on
December 16, 2008 11:18 pm
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.
-
whizblog on
December 16, 2008 11:27 pm
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.
whizblog.net
-
Ara on
December 17, 2008 2:06 am
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.
Thats all!
-
Dan Schulz on
December 17, 2008 6:31 am
@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”)
-
Dan Schulz on
December 17, 2008 6:33 am
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="/img/spacer.gif">
Just make sure you replace [ and ] with in your own code.
-
dan on
December 18, 2008 11:42 am
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
-
Associate Money on
December 21, 2008 6:54 am
I think it is legitimate and Google shold not penalize such a practice unless it is abused throughout the site.
-
Yellow Search Engine Optimization on
December 24, 2008 3:48 pm
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
-
ayman on
June 13, 2009 9:11 pm
good work
-
michaelb on
October 21, 2010 11:37 pm
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.