How to Add ALT text to images on your blog?

This post is for people who have been blogging already, if you are a newbie and would like to start a food blog, read about How to start your  food blog in 4 simple steps?

So, if you are blogging just for your pleasure sake or to kill you time, you don’t need to read this post..

Tell me if you are blogging with a wish or hope that someone somewhere in a part of the world will try your chocolate brownie recipe that you made with oat flour and oil instead of butter……….. Then welcome!

So how is it going with your food blog? And then your tasty food photos? I just clicked few pics of my newly discovered love avacado last weekend and hope to make a post soon on it..But…

…..before I post a new recipe I wanted to tell you guys of something.Remember at the end of this post Top 5 Reasons am moving from Blogger to WordPress I promised that I will share my learnings with you?

So here am with a post that you cannot leave this page with just reading..And I have some action items for you…Ready? Let’s dig in..

Have you ever thought how Google or any search engine understands that you posted about a spicy chicken curry or how to make puffed up rotis? I know you have named it like that but where are the other areas that we can take a chance and tell the whole wolrd that you have written a detailed post on chicken curry? Images? Ofcourse we people see the image and confirm it’s a chicken curry, but google or any search engine isn’t a person, they just can’t see and they can only read text.

It is the web browser that communicates what your image is about to the search engines. So who will communicate to your web browser? It is your image properties or famously called the image tag ..Where is it? It is the HTML or CSS or some XYZ code behind your image that you upload on your blog.

It typically looks like this

<a href=”http://www.sirisfood.com/wp-content/uploads/2014/07/importance-of-image-tag.png”><img class=”aligncenter wp-image-1076″ src=”http://www.sirisfood.com/wp-content/uploads/2014/07/importance-of-image-tag-1024×677.png” alt=”importance-of-image-tag” width=”504″ height=”333″ /></a>

Different parameters like href,class,src.alt,width,height define the characteristics of the image or simply tells Google about the image

1. href define where that goes to if you click.Here you see that’s the web server’s folders its pointing to.
2. img class is the type of alignment either left or right or centre
3. src is the source of image again(more in detail below)
4. ALT is called alternative text which displays if your image is not displayed, (keep reading to know more)height and width you knew it already!

Remember your web browser or the search engines or let’s simply called computer can’t see your image…it can only read text! So we have to tell to the computer that our image is actually about a chicken curry! Red this paragraph again!

And how do we do it?? Let’s talk about my laziness to understand this..

You know what? Am the most laziest person in this world..I just insert my images as it is how they come out of my camera..if it gives me a image named image_777, I will go use it in my blog as image_777.But then who is going to tell my computer or search engine what my image is about?? As far as browser can read, it is only about image_777 and not anything about the signature chicken curry I have specially prepared.

Let’s look at an example, go to your blog home and create a new post and try to insert an image, am going to insert my kolhapuri chicken curry image.

Ok here is the code behind our image upload, in blogger you can see in the HTML tab

The above lines represent your image properties when you upload an image in your blog.It is where google will be told what your image is about and not the one we humans see..

And the two important things I would look in the above lines are SRC and the ALT tags.

Src is nothing but the source of your image.Just like you organise books in shelf, the images are stored in your server’s folder or libraries. So if I name a book containing Guinness records with just book, how will the readers know about it? I need to name the book properly right? Similarly you need to name your image appropriately,

In the above example, my post is about Kolhapuri Chicken but it gives details that the image is all about IMG_2186(which is meaningless? )Isn’t it? What if I have named the  image as Kolapuri chicken ? google would have known that I have content related to Kolhapuri Chicken!

Remember your web browser cannot  see you image, it can only read the text. And am not bored to repeat this as many times as possible J

It’s difficult to rename the images after you upload, so better you rename it before you upload.

If you have 3 pictures for yor Kolhapuri chicken curry don’t hesitate to give Kolhapuri-chicken, Kolhapuri-Chicken 1 and Kolhapuri Chicken2.. go as relevant as possible

ACTION ITEM #1  Name your images appropriately before uploading to your blog.

If you want to correct for your old posts and you have time and patience to do it, it won’t go waste.Do it, and I will wait for you here!

Our goal it to correct the image code like this now so that google knows we have a content related to Kolhapuri Chicken

How to Add ALT text to images?

 So next comes the other part of the img tag called ALT which is also called alternative text.Lets take a look at the image tag again

 alt=”IMG_2186″ 

Alt tag is nothing but the alternate text , its a kind of HTML attribute that explains what that image is about. Just look at the below example, you would have seen it many times.

When you have a bad Internet connection, your browser can’t display the images and does only text.And imagine if you have a ALT text set to some image_777 for a recipe page about Kolhapuri chicken curry. It seems so inappropriate isn’s it? Also imagine a blind person is going through your blog with some hearing tools, and it would read that as image_777 and not Kolhapuri chicken.

Not convinced? Ok if you go and search in google images and type Kolhapuri chiicken it is going to search images that are taged with Kolhapuri chicken and not IMG_777 ..got the point?

So if you are not going to use proper names and ALT tags for your images you are going to send few visitors back to some other sites on your own.Not good, is it? You have the tastiest Kolhapuri Chicken in your blog and how can you do that?

Get as relevant as possible while defining the ALT text and it is ok if you give the same name to title and ALT tag.Use your common sense and don’t go out of Kolhapuri chicken 😉

Ho to add ALT text on WordPress?

When you Click on Insert Media–>Upload–>you get the below screen to give details to the image. Please fill in the ALT attribute appropriately.Use you common sense to derive a meaningful name.It could be same as your image name but make sure to fill the ALT text!

I am not using Blogger currently but did it for 2+ years so can help you out,

How to add ALT text in Blogger?

Step 1 Create a post and click on insert image, when you upload a photo few functions will be displayed like below

When you click on properties it will show you a dialogue box like below, Fill the ALT text and save it!

You had enough now, go and change your image properties for all your old posts as well (am yet to do!) and consider this while making a new post..Things like this will certainly make some big changes to boost your blog traffic.I will better talk in a different sense, more people will get benefited with your Kolhapuri chicken J

ACTION ITEM # 2 Never leave your image ALT tag blank , Define ALT text for all your old images too

change the ALT tag for your old posts and it will definitely pay off.

I have one more tip on this to tell you, if you implement these features, Ok I trust you that you are going to implement these in your blog and giving you another tip

Giving ALT tag to your images makes it easier to pin your images on Pinterest. Look at the below screen shot as I have a pin it button configured in my browser so I can easily pin my images(apart from the pin it button on the images) So when you click that and select a image the ALT text will automatically come in the description part of your pin..How cool is that?? On shot and two birds!!

I guess you are now convinced enough and know how to add ALT text to images

So there is one more mistake I have been doing with my blog until very recently. Size of the images!! You know what?

Ok you have an image with size 1024×725 , You will upload to your blog and adjust the size to be 300×175 or which ever size you wish to show your readers. And if you think you have saved the server’s disk space or memory or whatever xyz behind the image size, then wait! It is only the way you are showing in your blogs changes and not the actual size.

The size of the image will still remain as 1024×725 and would take time to load. So your site loading speed is directly proportional to the size of images you upload. So what you will do?

ACTION ITEM # 3 Resize your image before uploading to blog and fix all old posts

Yes, fix one old post a day or one post a week! It helps. Remember you all have tasty recipes on your blog that could drive traffic to your blog. So before heading to write your next post, try to fix a old post!

Am happy you made it yourself  to reach till this point and read the whole thing.You are on you way to boost extra traffic even to your old posts now !

If you are interested to know more about any other topics or have any questions on this post, do leave me a comment here.Also please feel free to share this post for those who might need it. Sharing is caring..Isn’t it?

For more tips,

Subscribe to Email Updates

* indicates required

Email Address *

Leave this field empty if you're human:

I have never bothered about ALT text or name of the images in the past,(ignorance!)So how many of you fill ALT text ?