What Andy Beard accidently taught me about CSS and SEO

How to use SEO friendly "Just Text" and a Graphic for your site's title.

One of the biggest lessons I have most recently leaned about site design, CSS and SEO came from a great guy called Andy Beard. It was not what he said but something he did not do that led me to learn this thing. This page is a tribute to the trick in question using the very example that led me to it.

Disclaimer(s): I had recently been looking at cssZenGarden before the fatefull visit to andy's site and I have a nagging feeling that some of the method came from something I saw there but it was still Andy's site that put it altogether for me. · Andy might change his site at any time so it might not be as it was when I wrote this. · Andy Beard and his site are very cool and no disrespect is meant. · If the graphics I use look weak that is because they are a quick screen shot of Andy's site title because I am a little lazy.

Andy uses a nice simple logo an "A" in a box. It works very well when a small graphic is needed in social networking sites. Everyone recognises it once they know him. It's a great bit of branding but also a pain-in-the-butt for his web design.

Andy has said many times that his "thing" is not-so-much SEO as niche marketing (a topic on which he certainly "knows his stuff"). All of the examples in this tutorial link to Andy's site so if you click them be sure to come back and carry on reading. I recomend bookmarking Andy's site and subscribing to his feed insidently.

Andy's title atually says "ndy beard" with an image where the "A" should be. It looks good but is nofollowed to stop too much google juice assosiated with such a misspelling of his name. This method solves that two ways.

When I searched for "ndy+beard" I discovered that he did rank 1st for it anyway so the nofollow simply didn't work (BTW). I think this is becasue google notes the link but does not follow it so all that it knows about the target is the link text. Whoops, but not to worry I have an answer and a neat bit of CSS to share.

This is how Andy does it:

Andy Beard | Niche Marketing NDY BEARD

This is the source:

As you can see it works very nicely but you can not use it so well for "on page SEO". I suggest a "h1" tag some basic text and some CSS. I've also cheated and added a "span" inside the "h1" so that I can do what needs to be done to satisfy SEO and style.

This is how I would do it:

Andy Beard

What is the difference?

In the first example the link is no-follow as the letter A is replaced by an image but in the second the title is a simple "h1" with a span inside. The contents are ENTIRELY text!

There is not an image to be seen.

Honestly that is all text.

I achieve all results via CSS and I have left the link followable. Admitedly my markup abuses html slightly by putting the "a" around the "h1" rather than in it but the result is that it looks exactly the same to humans while looking like a good SEO H! link to search engines.

You will need a CSS something like this:

#blog-h-title{
  height: 69px;
  background-image: url(andy-name.jpg);
  background-repeat:no-repeat;
  border-bottom:0.2em solid #ccd0d6;
  padding:0px;
}
#blog-h-title span {
  width:0px;
  height:0px;
  padding:0px;
  margin:0px;
  overflow:hidden;
  display:none;
  visibility:hidden;
}

Normal markup plus a script.

Purests might object that the link now makes the tags part of the text and this is bad for SEO (I have no idea if this is the case). This answer serves them too. The link is now inside all the markup (as you would expect) but when we shrink the text to replace it with an image we loose anything we can click. So some JavaScript gives us the navigation back.

One assumes that browsers with CSS also have JavaScript enabled too. This might not be the case and Google might think the shunken span is spam so I would suggest option 2 but here is option 3.

Andy Beard

We now have CSS like this (note the single extra line to make the mouse pointer clue the user into the navigation):

#blog-h-title{
  height: 69px;
  background-image: url(andy-name.jpg);
  background-repeat:no-repeat;
  border-bottom:0.2em solid #ccd0d6;
  padding:0px;
  cursor: pointer; /* This allows the JavaScript solution to look nice */
}
#blog-h-title span {
  width:0px;
  height:0px;
  padding:0px;
  margin:0px;
  overflow:hidden;
  display:none;
  visibility:hidden;
}

You will also want some javascript:

Of course if navigation were not an issue then you could gorget the javascript and have a "linkless" graphic. Not quite "masking" not quite whitehat. So now there are three options for doing what Andy does. I hope you find this little tour of CSS and SEO interesting.

Bonus: Option 4!

Andy Beard

Here is text, no javascript and no hidden text but also no graphic - not even is CSS. It does not look exactly the same and Andy might not like it much but it shows that some things can be achieved with pure CSS. There is a "span" in the mark up but it is my understanding that google will more or less ignore it and so we have text in a "h" tag that is followed and works as part of on page SEO.

The CSS I used is:

#blog-h-title2{
  border-bottom:0.2em solid #ccd0d6;
  padding:0px;
  font-weight:normal;
  font-size:3em;
  line-height:80%;
  letter-spacing:1px;
  margin:1px;;
  text-transform:uppercase;
  font-family:verdana,geneva,sans-serif;
}
#blog-h-title2 span {
  Border: 5px solid black;
  font-size:130%;
  padding:0px 8px;
  margin:1px;
  margin-top:8px;
  background-color:white;
  line-height:110%;
}

I am sure that it could be tweaked infinitly to make it even more exactly like the other options but as I said - I can be lazy. Thank you for looking I hope you learned as much as I did.

About the author: Matt B often goes by the screen name of "Lord Matt" which is a long running joke that he has given up trying to explain. He writes a number of blogs on a number of topics including Thanet Star which is focused on Thanet (in Kent, UK) where he lives.