A Comment on SEO & CSS Image Replacement Techniques

Recently in the offices of my current employer there has been a friendly debate around some of the specific things we do as developers and how they may be impacting SEO and search engine rankings.

For some background info, here is an email that was sent out by Project Management that, with approval, would have become a best practice:

We learned something new today about H1 tags relating to SEO that we felt was worth sharing company wide. I’ll try to keep it short…

Currently, it is common practice to place H1 text behind the logo image on every page (cloaking). The actual main heading on the page in this case, would be an H2 tag.

Up to this point, I think that most of us thought that this was okay as long as you were not stuffing the H1 tags with keywords, but instead using the company name.

After much research, [Project Manager #2], [Project Manager #3], and I found that this practice is becoming less desirable by both Google and Yahoo.

You can watch Matt Cutts take on the situation here: http://www.youtube.com/watch?v=fBLvn_WkDJ4

This is what Google has to say about it: http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=66353

From now on, please avoid cloaking. Instead, use the alt tags and please follow this best practices for images: http://www.google.com/support/webmasters/bin/answer.py?answer=114016

I believe that email was primarily prompted from the video posted by Matt Cutts (head of the Google Webspam team) on YouTube with his answer to the question “If you have a company logo on your site, what is the best way to include the text of the logo for SEO purposes? ALT tag, CSS hiding, or does it matter?” Yes, this video was posted 8 months ago, but new people are always discovering it. His answer, and the other links cited above, give the impression that using any sort of CSS image replacement technique, for headers or otherwise is going to have a negative impact on a site’s rankings and may even get Google to ban it.

Now, this would have major changes to some of my best coding practices that I use on every project, the same ones I’ve passed on to other developers as senior developer in the Creative department, and so when asked for my input on the subject I felt the need to set a few things straight. It may be a bit “inside baseball” but below is my full response (cleaned up and edited just a little for the blog):

Here’s my take on the situation, and granted I am no Matt Cutts of Google, who’s word is treated as the gospel by all SEO-inclined web devs out there.

Where we use this technique primarily is in a page header for the logo. From an SEO perspective this is the going to be the first bit of information a search engine sees and should be treated as one of the most important parts of the page. It tells you where you are at, what site you are on, maybe what that site is primarily about. From a web development standpoint this is going to be one of first (in code order) pieces of non-structural semantic content. From a user’s perspective (normal, screen reader, mobile or otherwise) this is going to be the first thing they see.

That’s why we use an h1 tag. It gives a semantic meaning to the text it contains (vs. using span or div or nothing at all) and says to search engines, screen readers, limited mobile browsers, and normal users (when left in a default style) that this info is !important.

Now typically a logo is simply a fancy type treatment on some words, and it may or may not be combined with some sort of brand mark. I believe putting this text (Company Name, Brand, whatever) into the h1 has more meaning to a wider variety of users and devices than simply alt text on an image file. Again, an h1 has more semantic meaning to the content of the page. Also, screen readers can be set to skip alt text and in those few cases do we really want accessibility issues of users not hearing the name of the site they are on?

I’m not saying that including a logo with proper alt text is a bad technique. As Matt Cutts says in the video it is the easiest way to do it; but I don’t think that it has the same benefits as what we currently do in this instance. Now simple text can’t always recreate what would better be served by an image or photo, and of course proper alt text should be used in those cases to give search engines/users the gist of the meaning of an image.

Now to dispute the idea that the techniques we are using are somehow “bad.”
Nowhere in this video does he say that Google disapproves of what we are doing specifically or that these sites will be penalized for doing so. He is simply pointing out that alt text on an image should be used and he stands by it being the better technique in this one case.

So, my argument:
As I said we’ll presuppose that the when we are using this technique it is primarily for a proper company name or headline. At the most basic level this Name is simple text, readable by any machine or human, so that is the data we start with when writing the HTML. But on a website, in this position on the page, clients/users/people expect and want to see it in its more stylized format (the logo).

Example: Joel Sunman Co., LLC. vs. This is a terrible logo

I’ve been trained and learned that there should be a clear separation between a web page’s content (HTML: titles, words, links, photos, dates, numbers, etc.), the way it is designed and presented (which should be controlled by CSS) and the way it behaves (functionality and interaction increasingly driven by JavaScript).

Again, supposing that this logo can be boiled down to simple text I see our technique as more of a progressive enrichment of style to the page. This is a term that is used more and more for web pages where developers add enhancements to a page that may improve aesthetic or functionality, but which do not hinder those who can’t view the technique. We do this all the time with CSS, Flash and JavaScript.

For example the new CSS3 specification allows for style enhancements such as drop shadows, rounded corners, text shadows, things that make the site look a little prettier, without having to cut out (and have the user download) a dozen more images, or would otherwise simply be impossible. Now a user looking at the site on an older or incompatible browser may not see that text box as pretty as someone else because it’s not rounded with a drop shadow behind it, but they still get the information.

With Flash it is the same thing, we give you an Flash-y banner maybe with some interactive buttons for more info, but if you don’t have Flash we’re going to give you a static image with active links. Or maybe it’s a drop down menu we’re talking about. A little CSS and the menu hides when your mouse leaves the navigation, and pops up when you rollover. If you are on an older browser maybe you need a little JavaScript to nudge you along. If you can’t even handle that, no problem: here’s a basic unordered list with anchor links.

All this is to say that the technique we are using is a simple bit of progressive enhancement. Everyone gets the important text, and if you can handle it (even though that may be 99.7% of everyone nowadays) you get a pretty picture in its place, and bonus: the important text is still there!

Nowhere do we get into the spammy techniques that Google is warning against using here:

There is no hiding for the purpose of deception. We’re not giving Google keywords and normal users something different. This isn’t nefarious CSS trickery anymore than serving an IE6 specific stylesheet to fix that browsers bugs is. This is a VERY, very common technique. Disable stylesheets on your browser and surf around. Unscientifically, I bet I can find just as many big sites that the same technique we do for their logo (Best Buy, Yahoo!, Digg, Facebook) as use just a plain image with alt text (Google, Microsoft). That is enough evidence to me that this is not going to get anyone banned from Google or have a negative impact on rankings, and it’s my belief that doing as we have actually increases SEO relevancy for the company name and has been used time and time again to sell our successful “SEO-ing” of a site.

I’m all for looking at new evidence or techniques when they come up, but it would be a mistake to read these few articles and take it to mean that we should completely abandon what we’ve been doing for years with success.


SEO Case Study #1: Me

As long as I’ve been a professional web developer, I’ve been learning the ins and outs of SEO. That’s Search Engine Optimization for those who don’t know and is basically the answer to the common question of “How do I get my site to appear first when I Google [such and such word]?”1

It’s such a common request and the process is so frequently misunderstood that I’m starting this new series to pass along the very, VERY simple things that anyone could be doing to optimize their website for search engines.

First let me say that never trust any company that claims they’ll get you #1 rankings in any Search Engine. It’s a scam, end of story. There is no guarantee when it comes to rankings. The processes used to determine the order of search results in Google, Yahoo, Bing, or any other engine, are highly guarded trade secrets. Because there is money involved people are always trying to game the system, while the Search companies try to stay one step ahead.

“How can I make Google show my site first when I search for my name?”

Your name, as an individual, company brand, whatever, should easily be the first thing you’ll start ranking for, and the home page should rank highly, if not 1st, in search results. It will probably happen naturally whether you try or not, because a web page has several pieces of content that a search engine evaluates for ranking, and many you’ll already be using. Let’s take my name “Joel Sunman” for the following examples.

My site in all its incarnations has always ranked 1st for my name, with or without quotes2. I’m not sure if I’m the only Joel Sunman in the world, but as of now I’m the only one appearing in any form on the web. So the repetition of the actual text “Joel Sunman” in the website is really all it takes, because there was no competition. Copyright statements in the footer, the text of the logo, text in an About Me-type page, all repeated the same two words.

Content like this will rank highly only when we’re talking about very unique phrases like names. Don’t expect this kind of repetition to do the same thing for a common word like “Computers.” Just think of how many other sites use that word in any way, shape or form (about 390 million today according to Google).

Now let’s say there is another Joel out there on the web. He doesn’t have a website, but maybe he gave an interview to a local newspaper and that story and his name appears online. Based on the overall popularity of the newspaper’s site, this article may start appearing above my own pages, but two more factors can give me the edge.

  1. Domain Text:
    The domain www.joelsunman.com directs to my site. Google and search engines pick out the words in your URL and you can think of each of these factors as adding points to a score. A URL that contains the searched for phrase counts for more “points” than just that phrase inside the copy of a page.
  2. Page Titles:
    Title bar example
    This is the text that appears at the top of your browser for any page. It’s purpose is to tell users (and search engines) what the page is about. A typical mistake is to use generic phrases to title the page such as “HOME”, “ABOUT US”, “CONTACT.” Since the page title is valued highly in the eyes of the search engine, higher at least than in-copy text, at the very least these titles should include your name, to distinguish it from all the other generic “HOME” pages out there. “Home of Joel Sunman & The Dam of Knowledge” > “Home Page.”
    Simple tweaks to page titles can have a big impact on ranking for keywords and phrases outside of just your Brand name. More on that later.

There are further ways that the actual HTML code of a web page is structured that has SEO significance, but most of these should already be implemented during the normal course of standards-based site development, so I won’t go into them here.

These are the first basics of optimizing your site for the search engines. After all that if your site is still not showing up highly for even just your name there are two possibilities:

  • Your site is too new and the search engines just haven’t found it yet…
  • Or, you’re unfortunate enough to share a name with someone/something that is very common or more popular than you in the search engine index.

All is not lost though, I’ll cover those cases in the future.

1 I’m aware other search engines exist, but I and 74% of search users don’t use them, so much so that “to Google” has become a verb. Unless otherwise noted, the specific case studies I talk about here deal with results in Google, while the techniques discussed will often benefit the results in other Search Engines in very similar ways.

2 There are always exceptions to the rule. When searching for my name Google now first returns “Local business results for joel near Sunman, IN.” This happens more and more as the top of the search results page is taken up with ads, maps, video results, etc. If I can’t even beat my namesake town in a search there may be no hope for any of us.

Google Results