Properly prepared images are an important component to search engine optimization. The key factor is the correct use of the alt attribute. Also called the "alt tag" the alternate attribute (as it is properly named) is a descriptive element that is added to the image tag.
The alt attribute's original purpose was to identify blank spaces in Web pages. Back in the "old days" when access to the Internet was accomplished using slow dial-up modems, it was common for Web pages to be displayed with blank spaces where images were supposed to be. The spaces would eventually be filled when the images completed downloading. It was common for some Internet users to turn off the image display feature in their browsers so that pages would download faster.
The alt attribute appears in the blank space in place of the image. Even today, with high speed access, an alt attribute will appear in the space that should be occupied by an image if the picture's download fails for some reason. In addition, special browsers that are used by the visually impaired will read the alt attribute out loud so that the picture can be "heard" rather than seen.
Search engines catalog the alt attributes on a Web page. A properly constructed alt attribute that describes the image with appropriate keywords will help the page's positioning in the engine's organic results. This function combined with the usefulness to the visually impaired makes the alternate attribute an especially important feature.
The image on the right is of a simple mailbox along the side of a country road. However, without the alt attribute the search engine does not know this.
A basic alt attribute for this photograph would be "Red mailbox."
A better alt attribute is "Red metal mailbox with a decorative yellow fish on the side."
The best alt attribute might be "Aged red metal mailbox decorated with a yellow fish along the side of a country road."
Why is the third choice best?
- The alt attribute describes accurately the subject of the photograph, yet it does not "over describe" the image
- It uses appropriate keywords and phrases:
- It is easily understood by real people
- The alternate attribute does not try to spam the search engines by jamming in repeating keywords or with lengthy sentences
In the case of images that feature text, such as header images, an alt attribute should reflect what is in the text. Search engines cannot read the text in an image, and neither can the "reader browsers" that are used by the visually impaired visitors.
Such an image is illustrated on the right. It is an advertisment for and air conditioning company. The ad announces a 15% discount on all new installation servies. An appropriate alt attribute for this image would be "Sammy's Air Conditioning offers a 15% discount on all new installations during the month of August."
The purpose of the alt attribute is to repeat the main message of the ad, which is in the form of "image text" that cannot otherwise be read.
Not all images need to have an alt attribute. In fact, applying alt attributes to certain images could be seen as an attempt to spam the search engines. The example on the is a typical image that could be used as a graphical element on a Web page. It would have an "empty" alt attribute. Empty attributes are not cataloged by search engines.
The Alternate Attribute in Use
The alt attribute is a component of the image tag. An example of an image tag code without an alt attribute is:
<img src="images/red_mailbox_300.png" width="300" height="225" />
Notice that this example is for the photograph of the red mailbox at the top of this page.
Here is the code sample with the alt attribute in place:
<img src="images/red_mailbox_300.png" alt="Red mailbox with a decorative yellow fish along the side of a country road" width="300" height="225" />
An empty alternate attribute is specified with double quotes, "". Here is an example:
<img src="images/simpleblock.png" width="200" height="200" alt="" />
Image File Names
Naming an image file can also be important. Search engines prefer images whith file names that are descriptive rather than gibberish. For instance, the photograph on the right is a closeup of acorn caps. The file name is:
Another acceptable name is:
Notice that the only difference is the use of an underscore (_) rather than a hyphen (-).
Older-style image naming conventions included:
- Numbers assigned by the camera, such as img00345.jpg.
- Positional coordinates (sometimes called "row/column") generated by design software as with r22c12.jpg.
- Apparently random names with no apparent reason such as 0003456.jpg.
The old-style names are perfectly acceptable in the technological sense. Browsers and computers understand them just fine. But, these naming methods are not up to modern SEO standards. While they will not harm search engine positioning, they will not help it, either.