Is Image Alt Text Relevant for Usability and SEO

Images have a multitude of uses on a website. They can be used as navigational buttons, bullet points, text graphics and icons to name just a few. Most visitors to a website will be able to interpret and understand the images simply by looking at them. But there are many instances when users won’t be able to do this.

They include:

* Blind or partially sighted users who use screen readers when browsing.
* Users that have disabled the images in their browsers.
* Users that have text only browsers for various reasons.
* Search engine crawlers that can’t understand images.

Hyper Text Mark-up Language (HTML) allows you to add a textual description of the images so they can be read by browsers and understood in the situations listed above. This is done through the alt attribute. An example of this is:

The image alt attribute is certainly a significant factor for usability and an important tool for search engine optimization (SEO). It provides website visitors with restricted access with an extra layer of functionality that enhances the usability of the site. It also allows search engine crawlers to understand what the images represent, which in turn helps them to rank in the search engine result pages (SERPs). For example, if a user did an image search for ‘big brown dog’ in a search engine, images with an alt attribute that contains the words ‘dog’ and ‘brown’ in various combinations have a chance of showing.

Below I have listed some aspects that can help your images regarding usability and SEO.

Image Tips

Use the following image formats when saving images for the web – gif, jpeg, png, bmp, svg and webp.

When saving an image use a filename that is descriptive of the image and not a generic filename, such as DSC221069.jpg.

Search engine crawlers normally index images of all sizes, but getting the file size down as small as possible will help with the page loading time and will enhance the visitor user experience. This can be done by reducing the physical size of the image and reducing the number of colors used by the image with the help of image manipulation software.

Specify the width and height of the image within the HTML. This tells a web browser the dimensions of the image before it has loaded and space will be reserved for it. This prevents the elements on a page from jumping around while it downloads. An example of this is:

If you have text that is important in terms of relevancy to the website or SEO, do not embed it within an image, make sure it can be read as text and is part of the normal content on the page.

Alt Text Tips

Image alt text must be descriptive and ideally ten words or shorter. The following examples demonstrate correct, incorrect and average usage of the alt attribute:

Incorrect:

Average:

Correct:

For SEO purposes you should try to include keywords within the alt attribute, but avoid keyword stuffing. For example, if you were showing mens watches; this is an example of incorrect alt text usage:

If your website has a number of images showing mens watches, make sure the alt text is different for each image. Try to include the model of the watch or the color.

If an image is used for navigational purposes, reflect this in the alt text. For example, an image used for a ‘Contact Us’ button should also have an alt attribute that reads ‘Contact Us’.

Where a company logo is displayed, it is good practice to use ‘Company Logo’ as the alt text. Some people make the mistake of typing ‘Back Home’ in the alt text tag for the company logo with a link that takes them to the main page. This should be avoided. It is always better to have descriptive alt text rather than the destination of the link.

Image HTML tags can also contain the title attribute and this is often confused with the alt text. The title attribute is meant to be read solely by a human visitor to the site, whereas the alt text is also read by search engine crawlers. An example of title text would be ‘Click here for more information’ on an image that links to another page.

When to Use Null Alt Text

Only use null alt text for images that are being used as spacers. These images are usually meant to be invisible and help structure the layout of certain elements. Null alt text is implemented like the following:

Use null alt text for icons, bullets and decorative images such as borders etc. Another way to stylise bullets and icons is through cascading style sheets (CSS) which will remove the need for the alt text completely.

By improving the usability of your website with the correct use of the image alt text attribute, you will enhance user experience which impacts on your site’s overall SEO in a positive way.