How to Add Alternative Text and Title Text for Images in Blogger

Do you use images or photos in your blog posts? It's true that using relevant and eye-catching images tend to keep readers on your pages. Absolutely, a picture is worth a thousand words. I'm sure you have come across sceneries that cannot explain using words. Images help readers refresh their eyes and get attention instead of several hundreds and thousands of text does. It's a matter of attraction. But it needs to be relevant and meaningful. Else using images doesn't make sense most of the time. Instead of adding images to your posts or pages, have you ever thought how you can make use of the image HTML attributes?

Though you add an image to your post or page, actually the source code behind the image links the actual image and reflect on your page. If you are a Blogger user, now you know where your uploaded images located. The HTML img tag responsible for that. HTML attributes were not defined just as standards, but to make use of. Well, now I'm gonna talk about two useful attributes used in HTML img tag - ALT and TITLE. Let's see how they gonna help you on blogsphere.

Image Alternative aka Alt Text

The alt attribute in HTML img tag is a very useful and important attribute. Quite helpful if you make use of it correctly. You know what the word Alternative means. Here it assures the meaning. The alt attribute allows you to define an alternative text for the image. BUT... What for? Don't your readers suppose to view your image? Think of a scenario where your images may not load properly on reader's web browser due to a technical difficulty or slow connection on user's end. In such a situation where your image doesn't render properly, this alternative text will be displayed to readers instead of nothing at all. Also it helps in screen readers, when someone listen to the content than viewing it. Screen readers read alternative text when it come across an image. So you must remember, the alternative text is to define and describe the image.

For example, if you have added an image representing a chocolate cake, simply the alternative text would be "A German chocolate cake on a dinner table".

Oh wait... Though alt attribute meant to work that way, it seems only Internet Explorer follows the rules as I try it on popular web browsers. Other modern browsers like Chrome, Firefox and Safari, just don't show the text defined with alt attribute though the image can't display. So now you think, "No point of using it?".

Search engines also keep an eye on your blog as you generate content. Eventhough search engines can crawl text easily on web pages, they are not smart enough to crawl and find information about images you have in posts. Your readers can identify images with the information on the page, but search engines need extra help. When a search engine bot crawls images, it looks for alternative text and store that information in the search index related to that specific image. Unlike you do search by image, when users search for images by entering query, if it matches with your image's alternative text, that image will show up in search results. In other words, alternative text helps your images to be searchable and you will able to get more traffic to your blog too.

Image Title Text

The title attribute in HTML img tag is used to specify extra information about the image. It's optional though. As we did talk, the alt attribute was used to define the image. But here it's about being more descriptive for viewers. Actually it works as a tooltip and whenever a reader hover mouse pointer over the image, the extra information specified with title attribute will be displayed.

I'm gonna take the example I used when describing alt attribute. There, the alternative text was "A German chocolate cake on the dinner table". But you can add extra information here by specifying title text as "The first ever chocolate cake made by my baby girl Sophie for her dad's 40th birthday". Now you get it?

Let's take it into the action. You can hover your mouse pointer over below image and see title text in action.

It doesn't contribute to SEO, but helps you to specify something relevant to the image and viewer will able to find more information about it. You can be creative with this one.

Blogger Made It Easy

Did you felt like I've been taking you through a HTML lesson? Now you know what ALT and TITLE attributes are stands for in HTML img tag. But you need to know how to specify those tags, if you don't familiar with HTML. What if you don't need to? In Blogger, now you can specify values for these two attributes easily without worrying about knowing about HTML. Yeah, Blogger made it easy for you. You just need to specify relevant information and Blogger will automatically place them for you in HTML img tag. Let's proceed and get to know how you can specify alternative text and title text easily, for your images.

Steps:

1. First off, You need to have your image(s) added to your post or page.

2. Now click on a image in Post Editor.

3. Click Properties option on the image options panel appears beneath the selected image.

4. Now you will see a pop up window where you can add alternative aka alt and title text.

5. Enter relevant information match with the image in available fields and click OK button.


Enjoy :-)