Creating image alt tags for your website is crucial to the performance of your website, blog or even your shop’s SEO. A properly executed image alt tag can make it or break it for telling a search engine what your picture is all about.

The following article may include affiliate links. Please read our full disclosure regarding our affiliate policy.

WHAT IS AN IMAGE ALT TAG?

It’s simply a piece of HTML coding that serves as alternate (“alt”) information about your photo. If someone (or a search engine crawler or bot) can’t see what’s in your image, they are able to read what it’s about based off of your text.

So by now, you are probably on board with the image alt tag thing, right? But… you just don’t know how to create an image alt tag. No worries! It does involve a little bit of coding into your HTML if you are using Blogger, or simply just filling out an additional field in WordPress, but you should strive to have EVERY (yes, I did say EVERY) photo on your website, with the exception of decorative elements, coded with image alt tags.

How to create seo friendly images for your blogger website or blog with atl tags

How to Create an Image Alt Tag in Blogger and HTML

1. Upload your image or images to your blog post or on your page in the “Compose” view on Blogger. This will automatically create the image HTML for you.
2. Switch your view to the “HTML” view on Blogger.
3. Search for the image you just uploaded. If you have a lengthy post, you may want to keep track of the images by numbering them or using my printable blog planner to help you with ensuring you are marking the correct images with the proper image alt tags. Your HTML will look something like this:

<a href="clickable link from image" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="actual link of where image is housed" width="320" /></a>

4. Add the following HTML code and replace the word “description” with your actual description of your photo. Be keyword precise and be as brief as possible.

<a href="clickable link from image" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img atl="description" border="0" height="320" src="actual link of where image is housed" width="320" /></a>

5. Switch back to “Compose” mode in Blogger and ensure nothing went awry on your post!
6. Save your post and off you go!

How to create seo friendly images for your wordpress website or blog with atl tags

How to Create an Image Alt Tag in WordPress

1. Upload your image to your media library.
2. Click on the image and you will be taken to a screen prompting you to fill out the following information, “Title, “Caption,” “Alt Text,” and Description.
3. Insert your alternative text for the photo into the “Alt Text” field and WordPress will populate your image alt tag for you.

You are almost done from here! DO NOT forget this step!

4. Insert the image into your blog post or website page.

5. Select the image and select the “edit” function.

Edit Image to Optimize Your Image Alt Tags in WordPress

6. A dialogue box will appear. Place the alternative text in the additional field as indicated by the arrow below. It is OK to copy and paste this from the alternative text (alt tag) in the upper portion of the dialogue box.

Optimize Images in WordPress by adding additional alt tags and alternative text in the edit screen

This is so simple, but so many websites are lacking this simple element. Don’t let your site be one of them!

Tiffany

subscribe to Business and Brand Consultant Tiffany Staples' email newsletter. Get tips, tutorials and inspiration for building and exceptional company.