GET STARTED

The Do’s and Don’ts of Writing Image Alt Tags

One element that is common on most websites today is the use of visual elements. Branding with images is a way to communicate with your customers and show them who you are.

It’s important to choose the right images, but it’s also important to use the correct alt text. The alt text performs an important function when it comes to user experience and contributes to image SEO. In some cases, poorly written alt text can be as bad as providing no alt text at all because it can confuse.

What is alt text? (alt attribute)

Alt text or alternative text is used within HTML code to describe the image or what it represents. The primary purpose of alt text is to describe visual elements to those who cannot see them; including sight-impaired users and users whose, browsers or screen readers block images. Alt text is visible when an image is not able to load.

Google uses alt text in the same way as visually impaired people use them. The Google algorithm cannot “see” images, and it uses alt text to comprehend them. The alt text tells it what the image is about, so it can serve it in image search results. Alt text also provides contextual relevance about the page where an image is found. It’s a signal of importance that can give the page a boost.

Image title

Some people may be confused about the difference between alt text and the image title text attribute. The image title is not used for search ranking but is used to provide additional information about the image. Simply use a short, catchy title that complements what you optimized for the alt text. Almost 1/3rd searches on Google are for images so analyze the image titles and the keywords wisely.

Describe the image specifically

When writing alt text, it should be sufficiently descriptive that if you close your eyes and someone reads it to you, you can imagine a reasonably accurate description of the image.

Take a photograph of a cake as an example. You could say <img src=”cake.png” alt=”cake”> but saying <img src=”cake.png” alt=”chocolate cake with caramel icing”> is much better.

Keep it short

Some popular screen readers cut off alt text at about 125 characters. It’s advisable to keep your description to around 100 characters maximum.

Long descriptions describing small details, such as the following one of two dogs, are unnecessary.

<img src=”dogs.png” alt=black dog on the right and white dog on the left in a field of green grass with little yellow flowers”> A good description would be <img src=”rabbits.png” alt=black dog and white dog in field”>

Don’t use “picture of” or “image of” because it’s unnecessary and wastes space.

Include a keyword or phrase

If you leave the interpretation of an image to the search engine crawlers, they can get it wrong, and you could miss out on a chance to rank for a keyword or end up ranking for the wrong keywords.

On-page keyword usage is still significant when it comes to ranking. When using alt text to describe the image, including a keyword or keyword phrase your targeting can work in your favor and signal to the search engine that your page is relevant to a specific search query.

Use company name in logo image alt text

If you have a logo, then alt text should repeat the company name that appears on your logo graphic. Rather than just writing “company logo” in alt text mention the name of the company.

Don’t forget about buttons

If a form on your website uses an image as a submit button, you need to write alt text. You can describe the function of the button, such as ‘search,’ ‘sign up,’ apply now, etc.

Avoid keyword stuffing

Keyword stuffing was a tactic commonly used in the past, but Google released algorithm updates to combat the problem. Any gains that come from keyword stuffing are short lived. Focus on writing descriptive alt text and include a keyword if possible, rather than trying to insert as many keywords as you can.

Here’s an example of the type of keyword stuffing that often occurred in the past – “yellow t-shirt, yellow shirt, yellow men’s shirt, yellow short-sleeved shirt, yellow men’s shirt, light yellow t-shirt, light yellow shirt, light yellow men’s shirt, light yellow short-sleeved shirt, light yellow short-sleeved men’s shirt”.

This use of keywords benefits your photo SEO if it is done smartly. Do not be tempted to name the image by its default name. Instead, select quality keywords. If you plan to republish your old content, analyze if new keywords are required or you need to change the image to a new one. Old content if republished with new images and content can boost organic traffic by 111% so take the image part seriously.

Avoid meaningless alt text

The point of alt text is to define meaning for viewers. Web developers are inclined to use alt text for image file names, sizes, etc. but this is not their purpose. As it does nothing for readers, details like this should not be included in alt tags.

Use bullets and simple icons in CSS where you don’t need alt text but if you have to have them in HTML, use a blank alt attribute. Putting an asterisk to represent a bullet can be more confusing than a blank.

Avoid use of images instead of text

Avoid using images in place of words because Google can’t see them, and if there’s no text, it must rely entirely on alt text to comprehend. A photograph may be more explicit than a thousand words but not to Google unless it has some alt text.

If you have an HTML slideshow or a photo gallery, you can add alt text to these images too, but if the images in the slideshow are purely for decorative purposes, you don’t need to worry about alt text. It’s unnecessary to provide the same information found within the content surrounding the image in the alt text.

Conclusion

Try to make using alt text standard practice for all images because it’s easy to implement and contributes to user experience and SEO for a long time. It may not have as much impact as other ranking factors, but it’s still worth the effort to write accurate, concise, meaningful alt text.

Written by Simi
The Blog