January 2, 2016

How to quickly put alt tag on images and reap benefits?

You might have heard about 'alt tag' in relation to HTML or web images. The expression is also often touted when techies discuss search engine optimization (SEO). Yet, this tag is among the least applied ones, though extremely simple to do so. 

What is an HTML tag, and why is ALT TAG special?

HTML is the language in which webpages are written. Even in the Blogger text editor which looks pretty much like a page on MS Word, there is html hidden behind it. It is this language which your browser (e.g. Edge, Safari, Firefox, Chrome) recognizes.

In HTML, there are expressions that perform various functions. For example, if you type Make your blog search-friendly and want to make the text bold, you will have to put a tag for making the text bold. The HTML with this tag looks like this:
<b>Make your blog search-friendly</b>

Alt tag is used for giving a text identity to images. Images cannot be read by search engines and by image disabled browsers. Screen readers for people with defective vision also are not able to read images. The alternative information that describes the image (i.e. in text form) has, therefore, importance in terms of SEO as well accessibility.

How alt tag looks inside source code.
If you are not a tech guy, you will find it interesting to know how the alt tag is actually used on websites. On this webpage that you are reading, right click and from the pop-up menu select 'view source'. A new page opens; this is HTML behind this page. Look for this expression: alt="use-of-alt-tag-on-image" You will see a long line with expression as given in short in the image above. Note that there is an image tag ( <img>) which defines various properties such as height, width and placement of the image. One such property is alt, which defines what text should be read in place of the image by search engines etc. In our example, we have put an image 'alt-image.png' on this post which has use-of-alt-tag-on-image as its alt text. 

How to put alt tag on an image?

You can put alt tag without knowing HTML at all!

On text composers on major blogging platforms (e.g. text editors in Wordpress.com and Blogger) you use the formatting tools and forget the HTML behind the content, isn't it? So is the case with the alt tag.

Option of alt tag on image in Blogger post
On Blogger's post editor, click on the image and you get a bar below or above the image. On it, look for 'properties' and click on it. You get three options now. Put the desired text in the text-box for alt text, and that's it! (By the way, on Blogger you can put a caption and a title on the image. Do take care that if you put more than one of these, they should not be exactly the same.)
However, if you want to put an alt tag to an image that is not in the text editor, you may have to put the alt tag manually within the <image> tag as shown in the image given above.You will be able to do this only when you have the facility to edit the html code. On Blogger, this is possible: (i) on the blog's main images through Template editor and (ii) on most widgets through Gadget pop-up window.

Some technical terms such as attribute, property and tag have been used loosely so as to keep it simple.