Using Image Keywords in Image 'alt' and 'title' Text

If you have been working through this set of tutorials (full list at the bottom of the page), you will now have an excellently prepared webpage that contains many pointers to inform the visiting Search Engine as to what the page is all about. We are most interested in our images, though, and the task of trying to get the Search Engine to recognise and give importance to images that it cannot understand itself. Although the accompanying text on the page plays a huge part in setting the scene, the final clues for a specific image on a page can only be passed on through the two items that directly connect to that image: the image filename and the alt text that is placed within the HTML image tag. Here is an example:


<img src="image-file-name.jpg" title="Title of the image" alt="Description of the image" />

Our example image tag contains three attributes: the filename, the image title, and the alternative text for the image. There may also be other attributes, such as height, width, border, etc. that we won't concern ourselves with just now. The image filename is absolutely required: without it, the browser would not be able to locate the image to place on the page. The alt text is always recommended. It's purpose is to provide alternative information for an image if the user cannot or chooses not to view it. This may be because of a slow connection, an error in the code, or if the user uses a screen reader, or a standard browser with images turned off. If images cannot be displayed in a browser, a placeholder box will be displayed where the image should be, and the alt text will be shown within this box.

The title is not a required attribute, but is very useful. It's purpose is to provide a pop-up 'tooltip' box when the user hovers his mouse over the image. This can be used to provide instruction or information: the choice is up to you. It's usage is not confined to the image tag: in fact the 'title' attribute can be used on any HTML element since HTML5, though it is not always useful to do so. Like the alt attribute, it is very good at providing a Search Engine with additional clues about the content of the elements that it finds on a webpage. It is therefore ideal as a container for our important image keywords.

Alt and Title Differences

Many web authors don't see any great difference in the two, regarding alt and title text as interchangeable. This is not the case, though. Google puts a greater importance on the alt tag, but does encourage you to use the title attribute as well, to provide extra value to your users. It should not be forgotten, though, that some devices such as iPads and many mobile smartphones do not have the 'hover' facility on their screens, so these users will never seen the title-tooltip messages.

Alt and Title Content

Coming back to Google again, we discover that they recommend you to use about 8 words in your alt tag, as being an adequate amount to provide a basic description of content. They go on to say that using 25 words would be rather too much. The emphasis is again on human-readability, so don't stuff the tag with keywords in an effort to attract a Search Engine: that won't work, and may cause your site to be perceived as spam. We should spend time composing a concise and readable phrase that includes our wanted image keywords as clues to image content. It is recommended that you not use the same text in your alt and title attributes, so here is a good chance to mix your keywords and provide alternate ways to describe your image content whilst keeping them relevant, meaningful, descriptive, specific, and accurate.

Using Image Keywords in Image 'alt' and 'title' Text

Alt and Title Differences

Alt and Title Content

Other uses for your keywords