Image Optimization and Alt Text Best Practices

Keyboard with Alt Text Best PracticesThe primary purpose of alt text is for user experience. It is designed to provide an alternative description of an image for users who can’t view or choose search settings that do not display images.

Think of it from the standpoint of a visually impaired reader. Those with visual impairments use screen readers, which are unable to portray images, but will allow the user to read the title, alt text and captions – if they are provided.

Alt text has been built with the user in mind; however, improving the user experience doesn’t mean neglecting optimizing for company or personal goals as well.

Alt Text Descriptions for Maximum Rankings

When used correctly, alt text contains the ability to provide organic search benefits, which means more exposure for your products, posts and bylines. Just remember, as with all good inbound practices, do what is best for your reader, while following Google’s search quality guidelines, and you’ll get your rewarded in the SERPs.

Image optimization, like site optimization, should first start with the URL. For example, if I owned a fly-fishing shop, and bought the domain 12345xyz.com, do you think a user would know that this URL could lead them to a Sage rod? Highly doubtful.

Just like with the website example, if I had a picture that was saved as 12345xyz.jpg, would a user know that the image was of a Parachute Adams fly? Again, highly doubtful. This is why you need to make sure you start by naming your photos correctly. For example, I want to display an of the Adams fly, I would save the picture as parachute-adams-fly.jpg.

After the file has been saved with an appropriate description, move on to setting your alt text. Alt text should be a natural language description of the image. It shouldn’t ever surpass a single sentence and from personal testing, it is best to keep it under 8-10 words or 120 characters in length, although 5 or 6 words is usually enough.

If you are using a popular CMS like WordPress, this is easily inputted; however, if you are manually entering this, the format should look like this:

<img src=”parachute-adams-fly.jpg” alt=”Hand Tied Adams Fly”>

Don’t forget that if you are linking to an item from the image, the alt text is what will be used as your anchor text. This is another important reason to always set your alt text – it improves user experience by providing users with an idea of where the link will take them.

What to Avoid when Writing Alt Text

Alt text could be seen as the cross between a title tag and the anchor text of an html link. This combination leads to some dos and don’ts and the most common don’ts include:

Don’t stuff keywords

<img src=”adams-fly.jpg” alt=”Adams fly or parachute Adams fly is a dry Adams fly and we tie Adams flies”>

  • How many times can you throw the keyword Adams fly in there? That’s awful.

Limit the length

<img src=”adams-fly.jpg” alt=” See this list of commonly used dry flies including the famous Parachute Adams dry fly which is used in many fly fishing scenarios. Learn more about the Adams fly in this post “>

  • This is even too long as a meta description, so why would you use as alt text?

Don’t use alt tags out of context

<img src=”adams-fly.jpg” alt=”Sage Rod”>

  • The pic is still for the fly, but the alt text was set for Sage rod and is out of context for the source

Image Title vs. Alt Text

The image title is very much different from your alt text – it’s designed to be the text that is displayed as a tooltip when you hover over an image in most browsers. This is a common option on blogging platforms and can be used to markup almost any html document.

Your image title should be relevant, short catchy and concise. This is completely designed for user experience. I have yet to find a correlation between the image title and rankings.

The benefit to using the image title is the fact you can add subtle calls-to-action within these tool tips.

While I am a fan of using image titles, I do feel it is important to keep these from being duplicate to your alt text. If there hasn’t been an algorithm in place for duplicate image titles and alt text, I’m sure there will be down the road.

 

For additional information, see this video from Matt Cutts on writing great alt text:

6 thoughts on “Image Optimization and Alt Text Best Practices

  1. Thanks for putting this in plain language for non-developer types.

    I have a question. My clients – architects and designers, use extensive image galleries on their sites to showcase their completed projects. There may be 12 images of a kitchen renovation, so how different should each image name and alt text be? Would every image have practically the same alt text, such as alt=”Lake Forest kitchen renovation breakfast bar”,
    then the next photo in the gallery would have:
    alt=”Lake Forest kitchen renovation light fixtures”

    I’m still not sure if I understand how the image name and the alt text would be different. In the above example I would think that all 12 images would have the same file name, such as: ABC Kitchen Remodeling Lake Forest. How would I make the 12 image names different from each other without being redundant of the keywords used in the alt text?

  2. Sorry about the extreme delay on the response Denice. Duplicating the title and alt may seem like a low priority, but if your client works with many galleries on the same domain, then the duplicated alt tags and titles can actually prevent you from ranking in image search.

    There’s a couple options you have here. 1) find ways the images are different (even if it is very minimal) or 2), and my personal favorite, use semantic terms. Not everyone will search for kitchen renovation, but kitchen upgrade, kitchen remodel, kitchen restoration, galley renovation, etc. Go beyond the head terms and dig into all angles of the image. Not only will these keep things from being duplicate, but you’ll find your images ranking for more terms in image search.

  3. hi,

    thank you for this great post, i have a question !

    i have noticed that when i click on your image “the keyboard image” i get redirected to the same post “this post” can u please tell me how to do it ?!

    thanks

  4. Hey Rashid, thanks for the comment. I use WordPress SEO by Yoast and there is an option under “permalinks” that allows you to redirect attachment URLs to the parent post URL. You can do this manually by editing the image on the post and setting a custom URL location for the image or removing the link all together.

  5. I have a question about my ALT Text mostly auto generate same with H1 Tag and Title Tag such as Product list, so is this okay or I should re write and put the unique one ?

  6. I would definitely rewrite the alt text. You really want you alt text to describe the image, while making it relate to your post, and if it’s just duplicated from an H1 then there’s a good chance it’s not going to do a good job of either.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*
Website

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>