Adding the alt text attribute to image tags 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 the alt attribute

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.

If you want to get specific, alt is an attribute not a tag however “Alt tag” is a phrase that is commonly used as Yoast mentions in this post:

The term “alt tag” is a commonly used abbreviation of what’s actually an alt attribute on an img tag. The alt tag of any image on your site should describe what’s on it. Screen readers for the blind and visually impaired will read out this text and therefore make your image accessible

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" />

How to add Alt text in Blogger 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.

How to add Alt text in Blogger 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>

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