How adding your website logo as a CSS sprite blocks SEO
March 19, 2012 · Chris Peters
CSS sprites are a great way of speeding up your website's load time, but there is a point where you can take it too far. Using CSS sprites for your website logo can have a negative effect for your overall marketing efforts.
CSS sprites are a great way of speeding up your website’s load time, but there is a point where you can take it too far. When you have a hammer, everything looks like a nail.
I think that the biggest way that you can abuse this technique is by applying the technique to your website’s logo in the header. Let me explain how it affects your users and your overall marketing efforts.
The problem with adding your logo to a sprite file
A big part of getting some visibility in search engines like Google is gaining links from other websites. You want for people to mention your website in reviews and blog posts. When someone, often a hobbyist, takes the time to review your site, you want to make it as easy as possible for them to do their review.
One thing that many people will want to grab from your site and include in their post is your logo. Sure, you can provide a Press or About Us page with a media kit and such, but many will still try to grab the logo in the upper left corner on your layout. It’s best not to fight this.
When you provide your logo as a background image (as result of the CSS sprites technique), you rob reviewers of being able to right-click your logo and click Save Image As…. Why would you want to force them to follow the extra step of doing a screen grab or extracting the logo from the sprite file? You’re making marketing harder on them—and ultimately yourself—as a result.
Why would you do this in the first place?
Yes, the website logo will appear on every single page. That is an extra HTTP request on every page. I understand why you would be tempted to put it in a CSS sprite file. I get it.
Unfortunately, you’re probably hurting your website’s success in the long run by trying to shave a request off the page. There’s always a trade-off to every decision that you make, so you should think about it and question yourself frequently.
Concerned about performance? Cache it instead.
There are plenty of options for Apache, IIS, or whatever your web server may be. You can set up headers that instruct the browser to cache images like your logo. See your web server’s documentation for more instructions.
