Follow Us on FacebookFollow Us on TwitterRSS Subscribe Follow Us on YouTube

September 15, 2012

Image Alt Attribute



Blogger makes adding Image Properties very simple. It's commonly referred to as the Alt Attribute or the Alt Tag. This tutorial will explain what the Alt Attribute is and how to add it to your images in Blogger.

The alt attribute is used as an alternative to the image. If someone visiting your site has their images turned off or blocked in their browser, they would use the image alt attribute to understand what was being displayed. Individuals who are seeing impaired or blind often use screen reading software to listen to websites. This attribute would come in very handy to them as well.

There is also the fact that the alt attribute contributes to your sites Search Engine Optimization. (SEO) When the Google Bots crawl your site, they can't see the images, they read the image properties.

Let's look at the two options Blogger gives you. When you add an image to your post, you will see the menu below it.


<img src="imagealt.jpg" alt="Image Alt Attribute">

If you click on Properties the below window will populate

<img src="imageproperties.jpg" alt="Image Alt Properties">

The title text is where you enter a 2-3 word description of the image. If you hover your mouse over the image, the title text will be displayed.

With the alt text, there are many variances out there.

<a href="DIRECT IMAGE URL"><img src="IMAGE NAME.JPG" width="150" height="20" border="0" alt="IMAGE DESCRIPTION"> </a>

OR

<img src="IMAGENAME.GIF" width="20" height="15" alt="IMAGE DESCRIPTION">

OR

<img src="IMAGENAME.GIF" alt="IMAGE DESCRIPTION">

OR

<img src="DIRECT IMAGE URL" alt="IMAGE DESCRIPTION">

(Please do not remove the Creative Common Licenses on any of the codes)

Of course, you need to edit and personalize the red text to describe your image.

I found a great video on the Official Google Webmaster Blogspot you might be interested in: Using Alt Attributes Smartly.

Check out how to take a Backup or Restore your template