Image alt-text: the good the bad and the ugly

Images are a key component for almost every website - it’s hard to find a page online that doesn’t contain at least one. 

For this reason, image optimisation plays a vital role in B2B website housekeeping. The benefits are plentiful. Optimising your images helps them to rank higher on SERPs, makes them more voice search friendly, funnels higher quality traffic to your page and ultimately improves UX.

With that in mind, alt-text is one of the most obvious places to start.

What is alt-text?

Alt-text - sometimes referred to as an “alt tag” - is an image descriptor that can be used as an alternative source of information about an image file.

This short copy has three primary uses:

• Improve web accessibility
• Convey relevant information when an image fails to load
• Provide context for search engine crawlers

Including alt-text improves ease of use and accessibility for the visually impaired by making it possible for screen-readers to describe an image, as well as its purpose. Alt-text also caters to those who have disabled image display in their web browser settings as a matter of preference.

In the unfortunate case that an image fails to load, the information conveyed by its alt-text helps to compensate and provide a better user experience. If an image is so crucial to your page that its absence might hinder comprehension, it is advisable to include both image alt-text and a caption (or image title).

Alt-text also makes it possible for search engines to crawl your website, make an image index and provide the context necessary to improve your rank. 

How does alt-text affect SEO?

In response to online queries, Google's search engine results pages display as many image results as text-based ones. So, images have the potential to be a highly fertile source of organic traffic.

Descriptive alt-text can quickly transform the images on your page into hyperlinked search results that draw people to your site.

In addition, despite great advances in voice search technology, AI often struggles to identify image context. Search engines instead discern meaning from the text associated to an image - the file name, alt-tags and image title or caption. From this, it calculates the image’s relevance to your content and topic clusters.

How do you write good image alt-text?

If you are using a content management system like HubSpot, clicking on an image while you are editing a website page should bring up various image optimisation options. This is where you can tailor the image alt-text to suit your needs. Your alt-text is then automatically generated in the HTML source code of your page. 

This is what alt-text looks like in source code:

<img src="filename.jpg" alt="this is where alt-text goes"/>

Here, 'image src' denotes the URL of the linked image (the source). It is a required element. 

As you can see, it is important to clearly name your image file before you upload it to your content management system. The original file name gets pulled across if a visitor opens your image in a new tab, or tries to save it. It can also be revealed using the 'inspect' function of your web browser.

The alt-text is what a visitor will see if they hover over an image, as well as what would be described by a screen reader.

This is why image alt-text needs to be descriptive, specific and relevant to the topic it illustrates. 

What are alt-text best practices?

Keyword stuffing is broadly discouraged by SEO experts, and alt-text optimisation is no exception. Good alt-text strikes a balance between using traffic boosting long-tail keywords that can be ranked, and actually describing the image in a concise, accurate manner. Only include a target keyword if it can be included naturally. 

If you have more than one image on your page, remember they don't all need to be strictly topic or keyword driven. Choose the image that is most representative, and assign that your topic keyword.

How much detail should you provide?

Details can be very important in painting a picture. Whenever an image displays specific details that are relevant to the post - such as location, associated people or products - these specifics should be written down.

If, on the other hand, the image has a more abstract or generic origin - such as a stock photo of a person using their mobile phone - it makes more sense to draw a connection between the alt-text and the overall topic of your blog or site page. 

If your image contains text - an offer, pull-quote or statistic, for example - the alt text should include this information.

Keep it brief. Alt-text should ideally be fewer than 125 characters.

What can you exclude?

There's no need to tell search engines or screen readers that your image is an image - this is already stated in the HTML source code. Therefore, alt-text should not include extraneous language such as '.png', 'image of..' etc.

If an image is structural or functional, and difficult to describe, fear not. You won’t damage your SEO by leaving a blank alt-text attribute for design images (icons, graphic elements, patterns, arrows). When a screen reader comes across a blank field, it will simply ignore the image.

Alt-text doesn’t have to describe every single visual characteristic of the image. Your reader doesn’t necessarily need to know the image has a purple tint applied, so you don't need to provide deep commentary. Great alt-text is need-to-know. The goal is to convey key elements: meaning, context and content.

Consider your reader and describe what your chosen image is, as well as why it’s relevant.

With a little practice the inclusion of descriptive, helpful alt-text in your image uploads will become second nature. It’s a small task that has the potential to make such a strong difference. Why not perform an alt-text audit on your site today to see where you can improve your website's accessibility, UX and organic traffic.