Image Alt Attribute's Relevant for SEO and Usability?

Images are used for various purposes on the web. On a standard website, graphics are used for navigational buttons, bullet points, icons, text graphics or other ways to supplement the text. Most users of the web are able to understand and interpret images by looking at them but there are many users that are unable to view them. They are as follows:

• Blind users that utilize screen readers to understand web content.
• Users that disabled the images on their browser.
• Users with slow internet that cannot download images.
• Users of standard browsers with text-only mode.
• Search engine crawlers that cannot interpret the graphic content.

HTML provides us with the image alt attribute to describe the image in readable text format. This helps to compensate for these situations where people or bots cannot interpret the image content. The following is an example of the image alt attribute:

<img src="rolexwatches.jpg" alt="Rolex Watch Silver Black Dial"/>

Image alt attribute is certainly significant for SEO and usability. It serves the users mentioned above with enriched website usability and also returns images in relevant search results due to enhanced site SEO. The following is a screenshot from Google Image search for the keyword 'watches for men'. These are images that have alt text containing the words 'watches' and 'men' in various combinations.

The following are some factors that help to optimize your images for usability and SEO.

Tips For Your Images:

• Use images in the following formats "“ BMP, GIF, JPEG, PNG, SVG and WebP.
• Ensure that the image file name is descriptive of the image content and not a generic name, such as DSC099778.jpg.
• Google crawlers usually index images of all sizes but keeping the file size within a certain limit will help your pages load faster. You can do this by cropping any extra white space in the image and reducing the number of colors in the image (do this using Photoshop). Make sure the total size of the page is under 100Kb. You can use online photo resizing tools like Smush.it or ShrinkPictures.com or any photo editor of your choice.
• If you have important text, ensure it is not embedded in the image itself. It must be kept in regular HTML.
• Specify the height and width of an image. This allows the browser to know the size of the image and it ensures that the space reserved for the image does not change when the page is loading. An example is shown below:
• <img src="menswatches.jpg" alt="Rolex Yacht Master watches for men" width="304" height="228">

Tips For Your Alt Text Content:

• An image alt attribute must contain a sentence of ten words or less that describes the image. The following are examples of proper, average and improper usage of the alt attribute:

Proper usage:

<img src="menswatches.jpg" alt="Rolex Yacht Master watches for men">

Average usage:

<img src="menswatches.jpg" alt="menswatches">

Improper usage:

<img src="menswatches.jpg" alt="">

• Image alt attribute must contain keywords, but in a readable format. Avoid stuffing keywords, as shown in the example below:
• <img src="menswatches.jpg" alt="mens watches watches for men rolex watches for men rolex watch"/>
• If you have multiple images of the same category of products, such as mens watches, try and differentiate the alt text of each image by specifying the type of the product. Avoid repeating the same alt attribute for all images on a page.
• Alt attribute can be the same as that shown on navigation tab images. For example, if a navigation tab reads 'About Us' let the alt attribute also be 'About Us'.
• Use 'Company Logo' for your website's logo image alt text. Some describe the alt attribute as the destination of the link on the logo as 'Back to Home'. It is advised to use the description of the image rather than using the destination it leads to.
• HTML for images contains title tags and alt tags that are often confused with each other. While title tag content is for human readers, the alt attribute is for search engine crawlers. Hence, title text can be written to direct a reader, for example, click here to see more men's watches, while an alt text is strictly meant to describe the content of the image in context, for example, designer men's watch.
• If you have a text image in a specific font style, use the same word/words as its alt attribute.

Null alt text:

• Use the null alt attribute for spacer images. These images are meant to be invisible and used to create space in the web layout. It is advised to use the null alt attribute rather than not using an alt attribute at all for these spacer images. Null alt attribute is declared in the following format:
• <img src="filename.jpg" alt="">

Use null alt attribute for bullets, icons and decorative images. Ideally you can include bullet and icon images in your site's CSS, this will remove the need for alt description completely.

Tips for SEO:

• Google tries to understand the content of the images by the text and keywords surrounding it. Therefore, ensure you place your images where they are relevant to the site content.
• Google also tries to interpret the content of the image by the anchor text to which it is linked. For instance, if your site's image is linked by the anchor text 'watches for men', then that image is optimized for searches.
• The page title (where the image is found) is also considered by Google search engine crawlers.
• Submit image sitemaps to search engines as this helps search engines index your images in a much more organized fashion. It will also help search engines decide which images on your site are important. Use image-specific tags in your existing sitemaps or use third party image sitemap generators such as Inspyder or A1 Sitemap Generator.

It is always better to use alt attribute in all the above forms rather than not at all. Search engines can index your images much better with the alt attribute and you can gain search traffic to your site simply by assigning appropriate alt text to your images. By enhancing the usability of your site you enrich the user experience and that indirectly improves your site's SEO. Thus, ultimately with the proper use of image alt attribute you positively affect search engine rankings of your site.