This short SEO blogs post talks about ALT Tags in Images for SEO and usability by showing you what happens with and without ALT tags in images in your pages.

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).

How to Add Alt Tags In Images

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 files:

1) image_noalt.php which has only an image as the main body. This image has NO alt tags in images. 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 tags in images, 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, we’ll do a little comparison.

Below we have three examples. One is a page with NO ALT tags, and the entire page is just an image. There is a clickable link so you can see what the page looks like visually. Next to the clickable link, after the | symbol, is a link you need to copy and paste into a web browser. This will show you how google sees the page.  Do that for each of the three examples below. Note that when you copy the second link to see how google sees your page, you will notice some banners at the top. Those are advertising banners put there by that company. We are just looking at the text parts which is what google sees.

1) Normal image_noalt.php | http://www.delorie.com/web/lynxview.cgi?url=http://www.php-web-host.com/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.php-web-host.com/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.php-web-host.com/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.