What is Alt Text and How to Add Alt Text to Images?

Alt text is a HTML attribute that displays an alternative text when non-textual elements like images cannot be displayed on the browser. Real human users can see and understand images and text content. But search engine bots can crawl the text content easily but the media content like images are not easy for search engines to crawl and index in the database. In order to overcome this all image elements should have an alternative text associated with it so that search engines can understand more about the meaning of the element.

Use Alt Text in Webpages

There are three main use of adding alternative text to an image element:

• To help visually impaired users
• Displayed on incompatible browsers
• Help search engine bots

For Visually Impaired Users

Generally users with visual problems use screen readers to translate the web page text to speech and listen to the content. Again images will become problem for the screen readers if they don’t have a text content associated with it. When alt text is used with images, screen readers will read this text as normal text content.

For Incompatible Browsers

When the browser cannot display an image due to any incompatible or momentary server issues the alt text attributed to that image will be displayed.

For Search Engine Bots

As search crawlers cannot understand images properly, alt text helps them to understand the meaning of an image and index in the database correctly. Search engines have separate crawlers for images and web crawling so that corresponding image or web search results can be effectively served to users. Adding alternative text to images is an essential part of optimizing images for search engines.

Syntax of Using Alt Text

Alt attribute is used as part of HTML image tag <img> when adding images on a web page. Below is the syntax of using <img> tag with alt attribute:

<img src="image URL" alt="short image description">

Adding Alt Text to an Image

Alt text can be added to any image using the above syntax as part of HTML image tag <img> attribute. But this is a time consuming tasks and most of site builders offer a simple user interface to add the text without changing HTML code. Here are two examples from Weebly and WordPress showing how easy it is to add alt text to images uploaded on a page.

On Weebly site builder, you can upload the image and just click on the image to open the popup shown like below. Alt text can be easily added in the desired text box.

On self-hosted WordPress platform when you upload an image, there are options to add title, caption, description and alt text.

Guidelines for Using Alt Text

Alt text should provide an appropriate meaning of an image to make it meaningful for all the above-mentioned usages. Below are some basic guidelines for webmasters on how to add alt text to images:

• Alt text is required only for the meaningful images to be understood by users and search engines. For example, a tick mark image used for a bulleted list in a web page really does not need an alt text as “tick mark”. Similarly decorative images can have caption without alt text.
• Provide short, simple and meaningful text for images. Think what if the text to be entered in case the non-textual element cannot be used on that place.
• If the images contain words, it is good idea to use the same words as alt text.
• Ensure the alt text is inline with the main keywords of the entire article. Using irrelevant text for images will reduce the search ranking since crawlers think there is no relevancy between the images and the content of that page.

Points to Note:

• The actual name of an image does not have any impact on SEO and user experience.
• Alt text is different than title, caption and description of an image.
• WordPress has high-end plugins like Yoast SEO which calculates the SEO score of the page by considering the alt text descriptions of the images on that page. This will help to adjust the alt text and improve the SEO score.