Adding alt text tags to images in blogger for SEO

I mentioned in a previous post about simple SEO steps for increasing traffic that you should add descriptive alt tags to your images and since I’ve had a few emails regarding how to do that in Blogger I’d thought I’d right a quick tutorial for future reference.

What is an alt tag

An alt tag is an html attribute that explains what an image shows. It lets search engines and users using a screen reader know what an image is about.

Why add a descriptive alt tag?

Images can generate a ton of traffic. How many times have you been looking for something on Google and clicked into image search? I bet quite a few. Search engines can’t “read” or “see” images like they read text so it is important to describe the image/picture for them if necessary. For example if there was an image of a dog sleeping, we can easily see what the image is about but Search engines can’t and so we need to simply describe it like “dog sleeping”. Then when someone uses google images and searches for a sleeping dog, the search engine will know to show that image. We usually include keywords so that spiders/web crawlers know what the image is and what the post/page it is on is about.

How to add an Alt Tag in HTML

If you’re adding an image to a post, page or gadget and want to add Alt Text Tags, simply add alt="YOUR DESCRIPTION" to your image code before the closing /> like this.

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

Adding Alt Tag in Post Editor – Compose mode

While editing a blog post in Compose mode, you can click the image, click properties and insert the description to the Alt Text box.

Adding alt text tags to images in blogger for SEO

Adding Alt Tag in Post Editor – HTML mode

While editing a blog post you can switch to HTML mode instead of compose to see the markup of your post. If you’ve added an image you’ll see something similar to this code

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-JNWtDffwCHY/U6GiKZMrzJI/AAAAAAAAAvY/gCIhigzcKVg/s1600/Moving1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-JNWtDffwCHY/U6GiKZMrzJI/AAAAAAAAAvY/gCIhigzcKVg/s1600/Moving1.jpg" /></a></div>

Adding alt text tags to images in blogger for SEO

so from this post on the basics of images and links, we know what each of these sections of code are. The blue is the link associated with the image, the pink is the code for showing an image.

<div class="separator" style="clear: both; text-align: center;">

<a href="http://1.bp.blogspot.com/-JNWtDffwCHY/U6GiKZMrzJI/AAAAAAAAAvY/gCIhigzcKVg/s1600/Moving1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

<img border="0" src="http://1.bp.blogspot.com/-JNWtDffwCHY/U6GiKZMrzJI/AAAAAAAAAvY/gCIhigzcKVg/s1600/Moving1.jpg" />

</a>

</div>

to add an alt tag to that we add alt="DESCRIPTION" before the closing /> in the image code.

<div class="separator" style="clear: both; text-align: center;">

<a href="http://1.bp.blogspot.com/-JNWtDffwCHY/U6GiKZMrzJI/AAAAAAAAAvY/gCIhigzcKVg/s1600/Moving1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

<img border="0" src="http://1.bp.blogspot.com/-JNWtDffwCHY/U6GiKZMrzJI/AAAAAAAAAvY/gCIhigzcKVg/s1600/Moving1.jpg" alt="SHORT DESCRIPTION OF IMAGE/POST USING SOME KEYWORDS" />

</a>

</div>

Tips for adding alt tags

Short, concise, relevant and descriptive alt tags work best. Try to use one or two keywords that are related to the topic of that post or page, but don’t overdo the keywords. If it’s a product review be precise, mention the name of the product. If it’s a recipe mention the name of the dish. If it’s an event mention the name of the event… you get the idea.

Testing your alt tags

Use this tool to test the images on your site, it will give you a run down of the alt tags used.

Related Posts

More SEO tips
HTML Basics for Beginner Bloggers

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

10 comments

  1. Allie on

    OMG, I never knew about this and I am pretty SEO savvy. Well know I know and will mark every photo. Just went back and tagged all of my photos on my last post, so super easy to just click on the image and click properties to add the tag. Took less than 5 minutes to tag 10 of them. Yay, so excited, thank you so much!

    Reply
  2. patricia on

    Wow! Amazing tips, others websites wouldn’t be able to answer this question, I am intoducing food and restaurants in Malaysia. Thinking about how to improve the views in my website, you help me a lot. Thanks really.

    Reply