Sirisfood

Tickling your taste buds

  • Home
  • ABOUT
    • Privacy Policy
    • ASK SIRI
  • RECIPES
    • Appetisers/Starters
    • Breakfast
    • Rice Dishes
    • Dals n Lentils
    • Dry Vegetables
    • Vegetable Curries
    • Chutneys/Pickles/Dips
    • Yummy Chicken
    • Sea Food Recipes
    • Egg Delights
    • Home made podis
    • Know Your Foods
  • KNOW YOUR FOODS
  • BLOGGER BITES
    • Blog Design
    • Food Photography
    • Building Traffic
  • WEIGHT LOSS

How to Add ALT text to images on your blog?

August 3, 2014 by Siri

importance-of-image-tag

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.

how-to-alt-text-images

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

src-alt-images-example1

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.

use-of-ALT-attribute

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!

ALT-text-image-example

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

blogger-add_alt-text

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

blogger-add_alt-text1

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!!

pinteres-alt-text

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

5.0 from 2 reviews
How to define your image properties for a blog post?
 
Print
Author: SIRISFOOD
Ingredients
  • Read this post again
  • Patience
  • Time
  • Common Sense
Instructions
  1. Always name your images appropriately
  2. Never forget to add ALT text to your images.
  3. Resize the images before you upload to the blog
3.2.2708

blogger-bites-sirisfood

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

MORE FROM SIRISFOOD

No related posts.

Filed Under: Blogging Resources, Food Blogger Tips Tagged With: alt tag, blogger bites, blogger tips, Blogging tips, Building Traffic, food blogger tips, SEO tips, wordpress tips

About Siri

Siri is a full time IT professional interested in cooking,travelling and photography .She believes in eating freshly cooked meals that are simple and easy to prepare.She aims to present such simple recipes with detailed instructions for you! Thanks for visiting!

« Basic Vanilla Sponge Cake Recipe
Avocado Peach Salad with Cherry Tomatoes and Apricots »

Comments

  1. shailaja sen says

    August 3, 2014 at 8:31 AM

    Wow shirisha, you are giving very nice information in every post about blogging. Can u post how to add recipe index to blog in your next post…currently iam in WordPress. Com but iam unable to add recipe index to my blog.

    • Sireesha Puppala says

      August 4, 2014 at 1:49 PM

      Hi Shailaja,

      Thank you very much!

      I have used a cutom theme for my blog but there are many free plugins available too for visual recipe index if you move to a self hosted blog.
      For now I have less idea on how ot develop this on wordpress.com but would try to gather some info for you and let you know.

      Are you by any chance looking to move to a self hosted blog?

  2. Princy says

    August 3, 2014 at 5:02 PM

    Wow Siri lovely stuff and this is how I am. I definitely try to follow all this if I have time.

    • Sireesha Puppala says

      August 4, 2014 at 1:50 PM

      Thanks Princy!

  3. Sangeetha says

    August 4, 2014 at 5:35 PM

    wow..Siri! this is really a nice information and thanks a ton for sharing with us. Great job Siri! Now will spend few more time for my images too. Thanks again Siri!!

  4. Sireesha Puppala says

    August 4, 2014 at 7:37 PM

    Hey Sangee,

    I know you take killer food photos so please spend some time on making them more visible to google.
    Let me know if you need any help on this or you have any questions.

  5. Mayur Shah says

    August 6, 2014 at 5:33 PM

    Well explained. I am an HTML guru but I must confess such posts explaining basic things on html are very rare now a days. you have nailed it… keep writing such articles on basic blogging techniques.

  6. Kalyani says

    April 3, 2015 at 11:25 AM

    Yet another very useful post from you. I am a budding blogger and I have almost named my images as you have mentioned as it has been my practice since I stored my first picture in my system. Very neatly explained. I was trying to figure out this and you have made my search easy. Can you please post on ” Moving from a blog to a self hosted website”.? Also I would be honoured if you take time to visit my blog and provide me your feedback. Thanks a ton once again 🙂 You are outstanding .

Hey!Nice to meet You!

Welcome to the world of spicy Indian Food and more.,Double click on RECIPES for a tongue tickling visual menu to choose! Read More about me…

logo
Food Advertisements by

Subscribe to get free recipes

* indicates required
How to start a Food Blog

Subscribe to get actionable food blogging tips

* indicates required

Starting in Few days!

Like my Recipes?

Let’s Stay Connected

  • Facebook
  • Google+
  • Pinterest
  • Twitter

Learn to take tasty food photos!

Tasty Food Photography eBook

The Journey of Food Blogging!

logo
Food Advertisements by

Catch the Latest Scoop

  • Welsh Cake and some news!
  • Victoria Sponge Cake Recipe | Summer it is!
  • Saturday Snapshots #7- A food photography learning series
  • Baked Sweet Potato Wedges Recipe , How to make potato wedges
  • Aloo 65 Recipe, How to make Aloo 65 or Potato 65 | Indian Appetizers Recipes

My FOOD GALLERY

my foodgawker gallery
myTaste.in
Foodies100 Index of UK Food Blogs
Morphy Richards
logo
Food Advertisements by

Subscribe to Email Updates

* indicates required

FOOD BLOGGER TIPS

A step by step tutorial on How to verify blog on Pinterst
mini-chocolate-thumbprint-cookies
importance-of-image-tag
saturday-snapshots-logo
how-to-start-a-food-blog
  • Facebook
  • Google+
  • Pinterest
  • Twitter

Copyright © 2022 · Foodie Child Theme by Shay Bocks · Built on the Genesis Framework · Powered by WordPress