December 13, 2012

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 :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Brenda Lee said...

Very nice Mayura! I passed along your knowledge! :)

Mayura De Silva said...

Hey Brenda,


As always, Thank you for sharing the post with your friends and I do hope Blogger users find it helpful to grab some exposure for their images and to improve user experience :)


Cheers...

Adrienne said...

Well that was an easy instructional post Mayura! I don't use Picaso but I do use another program that is pretty easy to add text to. I think it's whichever program is the easiest for them but you've definitely shown us how it's done here.

Thanks for the great tutorial.

~Adrienne

Chathu Perera said...

It's very easy! :) Thanks for sharing this valuable info dear. Keep going!

Mayura De Silva said...

Hi Adrienne,


Actually these options are identical to Blogger but I just wanted to indicate why someone needs to have alt and title attributes for their images :) User experience matters, right? :) AND more exposure on search results too.


Thanks for stopping by and sharing your views dear :)


Cheers...

Mayura De Silva said...

Hi Chathu,


Yippy :) You can easily make use of 'em in Blogger and see how they gonna help you out by using 'em.


Thanks for stopping by and appreciate your comment dear :)


Cheers...

Sapna said...

Hi Mayura


At times we overlook some very important details, thanks for pointing towards that.

Sapna

Mayura De Silva said...

Hi Sapna,

Yeah dear, these are small details but matters if you are thinking of SEO value of your post images which helps bring more traffic.



However the instructions are for Blogger users, but the facts I described matters for all :)


Thanks for stopping by and commenting dear :)


Cheers...

Harleena Singh said...

Informative indeed Mayura!

I remember the time I was on bloggers, which was my first time blogging, and I hardly had any idea about all that one can do with images. I wish I had come across your blog then Mayura - it would have helped solve so many of my problems that time. :)

But yes, with time I learnt the importance of Alt text and image text, and now for some reason - some of the days my maximum traffic comes through the images shared on my blog- so that surprises me!

Thanks once again for sharing this. :)

Mayura De Silva said...

Hi Harleena,


Ha ha... But I think you love the fact that your blog is now operating on WordPress :) It's about our choice, no? :) Well, how about this - We met online and became friends, now that's the best part.


Wow... Really? That's an interesting fact Harleena :) It shows how much people interested in such topics. Bloggers trying out different methodologies such as spamming to get more traffic except for creating connections and using available opportunities.


Let's hope bloggers gonna use this one for their benefit ;)


Thanks for coming and adding value with your thoughts and facts dear :)


Cheers...

Margarita Slavkova said...

Hi. Mayura,

it was so very helpful discussing the img tag. I had a hard time distinguishing between the alt and title attributes.

Yesterday I had a problem with an image. I discovered that the hspace and vspace attributes are deprecated and the new browser versions do not recognize it. Do you know about replacement. I wanted to have some padding around the image. It was very technical for me.

I appreciate you taking into consideration this seemingly simple matters, but if we do not know about them, can spend long time to figure it out. Great tip from SEO perspective. :)

Mayura De Silva said...

Hi Margarita,

I can relate there dear :) I didn't know first place, but later on learnt about 'em as I go thorough img tag. And here no need to access HTML to add values for 'em.


Yeah, as it contributes SEO and why don't we if we can and want, right? :)

Ohw... hspace and vspace depreciated dear :) But you can use margin or padding in style attribute. Here's a example for using margin for a image ~ http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_img_hspace_css.


Let me know if you need more help :)



Thank you for coming by and sharing your wonderful thoughts on this topic dear :)


Cheers...

betty manousos said...

a brilliant and very informative post mayura. thank you for posting this.


i also thank you for the follow. it is much appreciated.


nice to meet you and have a great weekend!


i love your super awesome blog!!


:)

JB said...

You did it again!


Another great how to, and the best part is, it's not only HOW to do something, but also WHY to do it!

Mayura De Silva said...

Hi Betty,


Welcome here and hope you make use of image properties on your blog to dear ;) As you love images and share on blog, this one gonna help you...


Thank you for coming by and sharing your views with nicey compliments :)


Cheers...

Mayura De Silva said...

Hi Jan,

I think that's what necessary ~ Educating fellow readers, no? :) Hope this one help 'em out.



Thanks for stopping by, and appreciate your thoughts and compliments mate :)


Cheers...