A site’s logo is an element that’s always there, but a lot of designers still treat it as just an image. It’s time to change that. If we treat the logo as just an image, google will treat it that way too. But we want google to treat your company’s logo like an important heading element, right? Using the stechnique I will describe now, we will make <a> element that holds your logo, and can still display an alternative heading to search engines.
The CodeHTML:
1 | <h1 class="logo"><a href="link-to-your-homepage.html">Company Name</a><h1> |
CSS:
1 2 3 4 5 6 7 8 9 10 | h1.logo a { background-image: ('link-to-your-logo-image.jpg'); background-repeat: no-repeat; width: 200px; //* Change to correct width *// height: 200px; //* Change to correct height *// text-indent: -9999px; display: block; } |
As you can see, the core of the code up here is the usage of a background-image for the link element, and the usage of text-indent. Text indent makes sure your text indents (duh). What this means in our case is that it is effectively moving the text 9999 pixels off-screen, so that we as end users do not see it. The search engine bots that crawl your site however, will see the content in there. So now, in stead of showing search engine bots an image, we are giving them the heading they need: your company name.
Last notesThis approach has another minor design advantage, you can give your logo a nice and fancy hover effect (check the logo on top of this site). It was created using the same technique, and adding a simple :hover element in the css.
Animating a link with jQuery
I am Gerben van Dijk, entrepeneur and front-end developer at Gport.
My passions are the web, music and other forms of creativity.
You can contact me here, or drop me a line on these social networks: Facebook, Twitter, LinkedIn.
Nice post. I like it so much.
- spam
- offensive
- disagree
- off topic
LikeNice. But I am also a bit scared of implementing this technique. Would some kind of penalty be associated with something like this? Essentially the text is seen only by the search engines and not by users. Wouldn't this be considered a form of cloaking? A lot of pharma/viagra spammers use the same technique and inject their links in otherwise benign properties.
- spam
- offensive
- disagree
- off topic
Likeshirleybrown Hi Shirley, I understand your concerns about this, but in my experience this does not result in penalty's in your ranking. I use this technique in all of my sites and haven't noticed any difference in search results/my rankings. Of course you should keep relevant text in there that represents the image :-)
- spam
- offensive
- disagree
- off topic
LikeI am new to blogging (and Livefyre) so your post is a little over my head. But I studied it hard and do think I was able to get some benefit from it.
- spam
- offensive
- disagree
- off topic
Like