Why and How to Add Alt Text to Images: Response to Jay

 Hi Sara,

I have been reading up on SEO lately as suggested in the forums so my shop gets more traffic. Lately I’ve seen people talk about “alt tags” for images. What are alt tags, and should I be using them?

Thanks,

Jay

Jay,

Great question! I had to consult our SEO guru about this one. Alt tags or alt text basically tells a computer or search engine what an image contains.  For example, if you had a picture of a piece of handmade soap you were uploading to your blog, a good alt text would be, “Oatmeal Goat’s Milk Soap Handmade by Jay.” This can be helpful both for SEO, as well as those readers are unable to see your images.

While you can’t really add alt text to your listings, you do have an option to add it on some blogging services. Sadly, Blogger doesn’t give you an easy place to fill this in, but you can add it to your image’s HTML.

Adding Alt Text to an Item’s HTML on Blogger

First, decide on a good alt text for your image. This should be about a sentence in length and accurately describe the item.

Open up a new post in Blogger, or your blog service of choice. It will probably be easier if you import the picture you wish to use first before writing the post.

Locate an “Edit HTML” feature on your blog editor. This appears as a tab on blogger.

 This will show the HTML for your image.  It should look something like this:

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

< a href= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xeIyLV2Wi1WZwPZesB31_MnX3iGVdVGeBMUHB2hoEVjdm-YuuVgAJ3pZiadHy8vtt3tmve_Xp8yWlzpipqOrHrEW8iW_9F5dkfv25b2stRiHIxLA0mcAQfh0-w4vkrtiulR8cG41aOye/s1600/334_avatar_thumb_crop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">< img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xeIyLV2Wi1WZwPZesB31_MnX3iGVdVGeBMUHB2hoEVjdm-YuuVgAJ3pZiadHy8vtt3tmve_Xp8yWlzpipqOrHrEW8iW_9F5dkfv25b2stRiHIxLA0mcAQfh0-w4vkrtiulR8cG41aOye/s320/334_avatar_thumb_ crop.jpg" />

The text in bold above (note: it will not be bold in your html editor, and has only been bolded to make it easier to identify here)"" is the image tag.  After the section, add your alt text in apostrophes, with the code alt= proceeding it. For this example, I’m adding the text “This is a picture of Sara!

The code to be added in: alt="This is a picture of Sara!"

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

< a href="http://4.bp.blogspot.com/ _jjFt29uruVo/TBACIcAw9VI/AAAAAAAAAEc/YD7Qge9uV_s/s1600/334_avatar_thumb_crop.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">< img alt="This is a picture of Sara!" border="0" src="http://4.bp.blogspot.com/ _jjFt29uruVo/TBACIcAw9VI/AAAAAAAAAEc/YD7Qge9uV_s/s320/334_ avatar_thumb_crop.jpg" />

Make sure you don’t add anything else to your image tag or else your photo might not appear properly.

After you’d added your alt text, go back to the regular editor. This appears as the “Compose” tab on blogger.

 

  

Finish writing up your blog post and publish it.

To test to see if your alt text is working, view the finished post on your blog. On Firefox, you can disable images by clicking Tools then Options and then unclicking the box labeled “load images automatically.”

Now refresh your blog. Your images in your post should now be appearing as linked alt text.

Make sure you turn images back on the same way you turned them off. You can now add alt text anywhere you can edit html. Use it to help improve your search ranking for keywords and to help those unable to view images when viewing your blog.

Hope that helps answer your questions! Let me know if you have any more.  :)

Sara
Sell Handmade Crafts Online
Do you have a question for me to answer on this blog? Email me: Sara@ArtFire.com.