How adding your website logo as a CSS sprite blocks SEO
Monday, March 19th, 2012CSS 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.
March 19th, 2012 at 11:21 am
Good point, Chris. When planning a site it seems better to use CSS so you can change the logo image, size, position, etc much more easily if you’re thinking about the long term interest of the site. But I admit the SEO and marketing down sides aren’t always thought of. And what about when you mention a URL on a Facebook post – the site’s logo won’t automatically get inserted if it’s not a normal image tag.
March 20th, 2012 at 7:48 am
I like the point about Facebook too, Gary. Thanks for the reminder!
March 25th, 2012 at 12:06 pm
Im going to put in sprite using this trick :0 http://www.onextrapixel.com/2011/07/25/using-jquery-to-create-a-right-click-function-to-save-website-logo/
March 26th, 2012 at 10:12 pm
Patrik: That looks like a cool technique for those who have some extra time to implement it. Thanks for sharing; it may come in handy in the future.
December 24th, 2012 at 4:38 am
Great advice. Thanks for sharing.
January 20th, 2013 at 10:46 am
Hi Chris, I’m a complete newbie. How easy is changing site images to sprites? I use dreamweaver and recon I could figure it out. Does it help SEO massively? Thanks for your article.
February 7th, 2013 at 12:02 pm
@Edinburgh Choirs,
The CSS sprites technique is mainly to increase performance. The user’s browser ends up making only one HTTP call for several elements on your page, which eases the burden on the client and server.
This increased performance could give you a slight edge SEO-wise, but I wouldn’t count on it nor consider it a primary SEO tactic. It does improve the user experience though by having a snappier site.