Although the fundamental concepts of effective search engine optimization are fairly straightforward, a comprehensive SEO campaign also requires attention to many small details. Each of these details makes an important contribution to overall keyword relevance, domain strength and ultimately search engine visibility.

While search engines can readily access, organize and index the text content of your website, images are another story. Search engines are unable to directly interpret the representation or meaning of images - except with the image alt attribute, often called alt text. As with heading tags, alt text is part of a complete effort to improve the usability of your website and maximize search engine visibility from the ground up, right down the the details of your site’s HTML code.

Helpful All Around
The purpose of alt text is to stand in as a suitable replacement or substitute for an image in instances when it cannot be viewed directly. Providing alternative text content can be helpful for text-only web browsers or low-speed internet connections and a very valuable accessibility feature for visually impaired web surfers using screen readers. Search engines can also use alt text to better interpret and understand your site’s image content, making it another great opportunity to improve search engine visibility.

To better understand the alt attribute, take a look at the HTML code for an image:

As with other HTML elements like links or headings, the image tag contains descriptive attributes. img indicates that the element is an image, src indicates the path to the image file, width and height are the pixel dimensions, and finally alt offers alternative text for the image. Without alt text search engines don’t have much to go on to understand the images on your site and that’s what makes the alt attribute so important.

Getting It Right
Alt text is often misunderstood and misused, but a few simple guidelines will keep you on the right track. The most important rule to remember is that effective use of the alt attribute is largely dependant on the context of any given image. This includes some important distinctions about how the image is used. Alt text for the same image used as a design element, a button, an icon or general content will likely be very different.

An effective alt attribute should retain the meaning or function of the image it replaces. A great general rule is to indicate the text (if any) that you would use in its place if you were unable to use an image. Also keep an eye out for alt text that duplicates surrounding text content. This is an indication that there may be a better option, which in some cases might simply be an empty alt attribute: alt=””

Duplicating content with alt text is not only confusing to text-only web browsers and screen readers, but just as any other duplicated text, is unlikely to contribute to search engine visibility and can even be flagged as a mild form of keyword stuffing. Another option is to include some other keyword-relevant but legitimately useful text that contributes to the meaning of the image in context.

While there are other more specialized uses of the image alt attribute, these few common scenarios are a good starting point to using alt text for improved usability, accessibility and SEO.

Content Flow
The most common use of the alt attribute is for images that are part of the main content flow. In this case, alt text should be a sentence or phrase that can be read in place of the image and retain the same meaning and a natural flow.

In the case of a photograph or imagery that supplements or enhances surrounding content, a brief description might also be appropriate.

For an image that stands in for content that would otherwise be text, often directly in the flow of a sentence, the alt attribute should flow seamlessly with surrounding text content.

Buttons & Icons
Some cases require alt text that indicates the purpose or functionality of the image, rather than the meaning or description. A search button is a great example. Even if the image depicts a magnifying glass, in this context a literal description doesn’t accurately replace the image and isn’t helpful to the user. Instead, indicating the function of the image is a better choice.

Images used as visual representation immediately adjacent to descriptive text do not require alt text and the alt attribute can be left blank.

Another option is to include a description of the image. This can be a great option for product images on your ecommerce website. The Title Attribute
The title attribute is another good way to improve the value of your site to users. The title attribute can be used on any content element to add additional or advisory information. Titles are often used to indicate the full text of an abbreviation or acronym, offering extra detail, meaning and context to your site's content.

Most browsers display the title attribute as a tool tip, so text, images and links with title attributes will display additional or explanatory information when hovered over with the mouse cursor. Tiles can be helpful to offer more information about the destination of links that may otherwise only display “click here” or "more”.

Try hovering over this link to see the title text:

Ecommerce Cart Mods

The title attribute on a link might look like this: