Tagged with seo

Google's image replacement technique

Posted in Tutorial tagged with css, html, seo Thu 3 Jun 2010 11:50 am

Image replacement is a great technique for anyone wanting to maximise SEO and design on a web page. What with the “do they don’t they” question of whether Google penalise pagerank for those using it more or less answered, I thought I’d have a look at how Google do it themselves.

On any Google search results page, you will see their logo at the top left of the page, next to the search box. This image is an image sprite consisting of most of the images used on the page. If we disable images on the page, we are left with a text link back to Google’s homepage where Google’s logo was. Disabling both styles and images leaves a similar result. Google achieve this with the following HTML.

    <a href="http://www.google.com/">
        <img width="167" height="222" src="nav_logo13.png" alt="" />

The HTML used is what you’d expect for a text based link, apart from the empty alt text attribute and with the addition of some text reading “Google” between the anchor tags. It is this text that we need to hide (or replace) in order to get the look we need. This is achieved with the following CSS.

    font-size: 1em;
    font-weight: normal;

h1 a
    height: 49px; width: 137px;
    display: block;
    position: relative;
    overflow: hidden;

h1 a img
    border: 0;
    position: absolute;
    left: 0;
    top: -41px;

Let’s start with the CSS applied to the image itself. The border property is to remove the default anchor border style. So far, so boring. The position property is more interesting, as it allows us to hide the “Google” text between the anchor tags. Absolutely positioned elements can be positioned with the top, right, bottom and left properties. These properties set the margin (in pixels) between the element and the next parent element with a position property other then the default “static” value.

In our case, the parent element is the anchor. The left property is applied to our image with a value of zero, which means the image will have no left margin in relation to the anchor. As a result of this, the text between the anchor tags is covered by the image. Image replacement complete!

The rest of the styles are only necessary if you are going to use an image sprite. The height, width, display and overflow properties applied to the anchor trim the image so that only the Google logo appear, and the same goes for the top property applied to the image. The font styles applied to the h1 element are to make the text small enough to hide behind the image.

Alt text is used to give context to an image for a screen reader or if images have been disabled by the user. In this case, it is not necessary; the “Google” text between the anchor tags serves this purpose. One criticism you may make of this method is that it generates “double text” if the user has disabled styles but not images, as both the image and text are visible. Please bear that in mind if you would like to implement this method.

If you would like to learn more about the CSS discussed in this article, W3 Schools is a great resource. If you’re wondering how on earth I figured out the CSS applied to each element, you need to get Firebug for Firefox in your life!

Sloppily typed by Nick Pyett


Posted in Article tagged with seo Wed 23 Sep 2009 9:30 am

At launch, my homepage joined the ranks of those trying to rid the net of a deprecated convention, and decided against the www.

Why is the www. deprecated? Well, it just isn’t necessary, as the people at No-WWW. explain:

Mail servers do not require you to send emails to recipient@mail.domain.com. Likewise, web servers should allow access to their pages though the main domain unless a particular subdomain is required.

So if the www. is deprecated, what are the benefits of not using it? Well, none. The most important thing is that you CHOOSE TO USE IT OR NOT and then stick to it. The problem arises with search engine optimisation, as Canonical SEO explains. A search engine may well list your homepage twice, once with the www. and once without. This is bad for your page rank, because the more inbound links to your site, the higher your rank. With your links potentially being split between two pages, your site will appear lower in search listings.

This problem can easily be remedied, all by adding three lines to your .htaccess file that will direct all the traffic from the www. site to the non-www. site or visa-versa. The .htaccess file is an Apache configuration file located in the root directory of your website. You can edit it through your FTP program. It may be hidden, much like a hidden file on a PC, so go to your FTP program’s settings and find and click the box that says “Show hidden files and folders” or similar.

To always remove the www. add this.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

To always use the www. add this after changing “example.com” to your own URL.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]

Whether you choose www. or not is up to you. But, answer me this. When was the last time you said the www. whilst discussing a website? Or saw it on an ad? Or typed it into your browser? Without it, devilishly clever URLs have been created, such as http://del.icio.us and http://tr.im. And don’t forget, www is the most inefficient abbreviation ever. It has three times the syllables (nine) than the phrase it is an acronym of (three).

Sloppily typed by Nick Pyett