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.
There are three main use of adding alternative text to an image element:
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. 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. Alt Text in non-compatible Image 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. 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: 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. Alt Text for Weebly Image On self-hosted WordPress platform when you upload an image, there are options to add title, caption, description and alt text. Adding Alt Text in WordPress 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:For Visually Impaired Users
For Incompatible Browsers
For Search Engine Bots
Syntax
<img src="image URL" alt="short image description">
Adding Alt Text to an Image
Guidelines for Alt Text
1. The actual name of an image does not have any impact on SEO and user experience.
2. Alt text is different than title, caption and description of an image.
3. 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.
