The Importance of the "alt" image attribute for SEO

Indeed, both the content your users see, and the coding behind the page that search engine spiders read, are important for search engine optimization. Pretty well anything you do with your website will affect how the search engines view your website. And images are a source of search engine optimization, as well.

Before we continue, let's show you in xhtml (html does not need the closing / at the end) code what an image "alt" looks like.

<img src="products/redrubycollar.gif" alt="Red Ruby Collar for Kittens" /> OR

<img src="http://www.mykittywebsite.com/products/redrubycollar.gif" alt="Red Ruby Collar for Kittens" />

Now looking at this piece of code, you will notice that it tells the server to find the photo in the "products" folder. But let's say that photo is missing or the file path is incorrect or the user turns her images feature off on the browser. The user will just get a "broken icon" on the screen. And if the graphics are part of the navigational or menu bar, the user cannot browse the site. But equally disastrous is the search engines have no clue what that spot means. They can only read the text and the content on the page but will not be to list the photo in the "images" database so those photos, if important, are not provided in the search results for images.

But if the "alt" text is present, the search engines know what the photo is. In this example, it tells them to look for a picture of a "red ruby collar for kittens". And for the person using the site with graphics turned off, she will see the text and know what is meant to be there. Specifically, the "alt=" is a way to speak to the search engine spiders, and should be descriptive about the photo that the code is referencing. It is also compulsory if you want to write correct code and have your code validated.

Keep in mind that the name of the GIF or JPG does not have to be the same as the ALT. Your ALT should be descriptive and can even be a sentence. Going one step further, although the "alt" is not a license for "keyword stuffing", if used properly, it is a way to get better rankings for a keyword. Take a look at this example we found on an auto insurance information site:

<img src="insurancepolicy.gif" alt="Take a moment of your time and find out how cheap your car insurance could be!" />

You notice that we have asked the user to take action while at the same time we told the search engines that our keyword is car insurance. In addition to the actual content, the descriptive alt sentence will help us do better in the search results than if we left the ALT empty. (alt=" ").
And remembering the importance of using small file sizes, here is what your image code should look like when complete. You might ask why you need the width and height in the code thinking it is redundant because your picture is that size. The reason you need it? If the browser knows the size of the photo, it will load the text above, below and around. Your users can start reading without waiting for the whole page to load. Without this "placeholder", browsers must wait for the photo and continue.

<img src="products/redrubycollar.gif" alt="Wouldn't your kitty look sweet in this size two, red ruby collar for kittens?" width="190" height="153" />

Lastly, the more photos on a page, the longer it will take to load.