This is a quick note about alt tags.

Please see this article for more info: Can google see your website?

The reason I’m writing this again is because of its importance, but more importantly because of how many people do not do this.

Imagine you’re sitting in a movie theather, 60 / 70 years ago. Movies have not yet advanced to a stage where there is sound, so its a silent movie. Not very nice hey? And to make matters worse, you’ve brought your blind friend with you.

So, what has this got to do with the search engines. Well, you need to think of your website as an old fashioned movie with no sound. And you need to think of Google as your blind friend. He can’t see anything, and, as there is no sound in the movie, he can’t hear anything. Besides the pop corn, its really a waste. He needs to read braille.

Images on your website are like that silent movie. Google, being blind, needs the braille of the web, that is, it needs plain text! If you have a website with loads of images that look really great to visitors, remember, your blind friend google can’t read them (or the other search engines).

So, what should you do? Provide Alt text in images.

Here is an INCORRECT <image tag img src=”someimage.jpg”>.

Here is a CORRECT image tag <img src=”someimage.jpg” alt=”Yay, google can read this!”>

Ok, so, a demonstration is in order. Now, lets see an example, then you can rush off and try this on your own site. We are going to work with three php file1:

1) image_noalt.php which has only an image as the main body. This image has NO alt text. So, this page is very bad and google can’t index it correctly. What about the meta keywords tags? Look here, google DOES NOT USE THEM, or look here! Matt Cutts is a chief engineer from Google. If I have his title incorrect, please forgive me, I don’t work there, I don’t know who gets called what, I just know that he’s a pretty important person there!

2) image_alt.php. This page has the same image, but it DOES have alt text, so google can “read” what your image is about, and can thus index it.

3) split.php. Here we have split this image. We have kept the heading as an image because we wanted the cool shadow effect (which you can probably do with some clever CSS anyway). The header image has alt text. Then, for the two smaller images, we’ve made their titles plain text, so google can index that. We’ve also added alt text to both the smaller images, so google has 5 pieces of information here.

To see what google more or less sees with these files, click on the links below. There are the normal links that you can see as you would expect, and the Search Engine links that represent how the search engines see your sites (note, you need to copy and paste these links into a browser, they don’t work by linking to them due to the terms of the external website).

1) Normal image_noalt.php | http://www.delorie.com/web/lynxview.cgi?url=http://www.softsmart.co.za/blog/image_noalt.php

• Note here that the image name big_image.jpg is all that is visible to google, in terms of the main body text, not good at all

2) Normal image_alt.php | http://www.delorie.com/web/lynxview.cgi?url=http://www.softsmart.co.za/blog/image_alt.php

• Here there is alt text that is visible to google, so it is an improvement

3) Normal split.php | http://www.delorie.com/web/lynxview.cgi?url=http://www.softsmart.co.za/blog/split.php

• Here there is alt text ON EACH images, as well as plain text that is visible to google, this is the best way of making sure that google know’s what your site is about.

Conclusion

If you use image, use alt text. Always! No exceptions! If you are able to split the image up, then do that. Use plain text where possible.