image alt and title information

Specifics in this tutorial apply to CMS sites using a text editor, such as JCE or JCK or TinyMCE, to add and code images in an article. However, the ideas may be used for static sites, as well. It's just that the "alt" and "title" tags must be hard coded into the HTML document.

Most people simply click the insert image icon JCE Image editor icon in the site's text editor, navigate to the image and click on it to insert it and move on to some other task. This assumes that the image has already been uploaded to an images directory on the hosting server. However, if SEO is a consideration, here are two tips that will help with rankings:

  1. Before you upload an image, re-title the image to something that makes sense. For example, a photo of a tree might be titled "tree.jpg". And, if possible, include a keyword or two in the title. Using the earlier example, an arborist might title the image: "oak-grown-at-The-Arborist.jpg". Then upload the image and add the image to the website page.
    When titling an image - or any other file to be used on a site, do not leave spaces between words, use a hyphen or underscore. A space could cause the browser to not "see" the image and result in a "broken" image icon on your site..
  2. Never, never, ever forget to include information in the "Alternate Text" input box. This creates the "alt" tag in the HTML coding, which is important for search engines and accessibility. It is also "best practices".
    If you are using the JCE text editor, also open the Advance Tab and look for the "Title" input box. This is a wonderful opportunity to double up. Because Internet Explorer only "sees" the "alt" tag while standards compliant browsers "see" the title tag, it presents a perfect - and legitimate - opportunity to add searchable keywords that can improve your site's ranking.

The title and alt information can be the same or different. It's up to you. It should be a relatively short description of what the image is or is about. Another example, this site uses a small icon image, Opens a new window., to indicate if a link opens a new window. The alt and title tags used for this image are: "Opens a new window". Note: In this case, the information offered is to help a visitor understand what the image means. If you scroll over this image, you'll see a pop up window which says "Opens a new window.". In this example, the alt and title tags are used as an instruction. Useful information shouldn't be overlooked; search engine algorithms are sophisticated enough to understand the difference. An instruction won't help with keyword counts but will help with relevance and WAI.

A word of caution about trying to "trick" the search engines by loading alt and title tags with keywords. Alt and title tags are used by text readers to inform the listener what the image is. If the alt and title tags are not "helpful" in this regard, the site may be penalized.