It goes without saying that a website with no images would be a pretty boring place to be. When you break up long swathes of text with graphics to accompany the words, it helps to keep your reader’s attention. Diagrams, graphs, and infographics can often illustrate a point better than text.
However, there’s much more than meets the eye with images online. Images that are well optimised with descriptive filenames and alt text can provide valuable Search Engine Optimisation (SEO) opportunities. Alt tags also offer highly valuable accessibility functions too, so let’s investigate.
What is Alt Text?
Alt text, short for “alternative text” is a short, descriptive caption that can be embedded within the code behind every image on a webpage. An image’s alt text isn’t generally visible when everything is working well, but if the image fails to load for whatever reason, the alt text will display in the image’s place.
In terms of contents, think of alt text much like a caption under a photograph in a newspaper; it states what or who is in the image and/or what’s happening. Likewise, an image’s alt text briefly describes the image’s contents or states its function.
Including alt text isn’t mandatory but it’s generally considered good practice for most graphics online, especially if the image is being used to illustrate something practical. Alt text can technically be as long as you like but it’s advised to keep it below 125 characters – we’ll explore why shortly.
You may have also seen alt text referred to as “alt descriptions” or “alt tags”.
Why Do I Need to Use Alt Text?
The practical use of alt text is two-fold: namely accessibility and SEO.
People with visual impairments often use screen reading software to help them use their devices and navigate the web. This software uses synthesised speech to read aloud the textual content of windows and web pages; keyboard shortcuts are generally used to navigate. When someone using a screen reader visits a website, the software reads out all of the page’s textual content. Screen readers rely on alt text to provide a description of the image to relay to the user – this makes alt text absolutely essential for those with visual impairments.
However, optimising your images with informative alt text also provides significant SEO benefits. The functions that search engines use to gather information about a webpage (known as “web crawlers”) aren’t currently able to process images visually. Therefore, in order to establish the relevance of an image within a page, or to rank it within image-only search functions, search algorithms look at the contextual data provided in the alt text and image filename.
First Things’ First: Provide a Relevant Filename
Before we proceed, we need to look at the filenames of the images before they’re uploaded. This step isn’t important from an accessibility standpoint but nowadays it’s highly advisable for search optimisation. In fact, the team at OLCO have carried out our own tests regarding the impact of filenames on search performance. Back in 2017, we found that image filenames didn’t appear to influence search rankings much at all. However, we repeated the tests in 2018 and found that image filenames now appear to have a positive influence on search rankings.
Before you upload your images, always make sure they have a brief, descriptive name with the words separated by dashes (-); this helps search algorithms pick out the different words being used in the name. Name each image something appropriate to its contents, such as border-terrier-puppy.jpg, networking-meeting-walsall.png, or volunteering-opportunities.jpg.
Including keywords within your image filenames is now widely considered to be good SEO practice, as long as you do so sparingly and without duplicating filenames. If you’re focusing on the key phrase “accountants wolverhampton”, that doesn’t mean that all of your image file names should include “accountants-wolverhampton”. When in doubt, simply provide a description of what’s in the image, such as “accounts-team.jpg” or “wolverhampton-office.jpg”.
5 Simple Steps to Alt Text Optimisation
1. Use Plain Language
Remember that the main point of alt text is to aid in comprehension of the image – whether that’s from an SEO or accessibility standpoint. Use clear, direct language to provide a simple and accurate summation of the image. Don’t get carried away trying to fit too much information in – you only have 125 characters to get your point across!
2. Avoid Keyword Stuffing
Never feel tempted to fill your alt tags full of keywords. Keyword “stuffing” is very much frowned upon in search optimisation and alt text is no exception here. Use keywords just as sparingly as you would in your other on-page text; at the time of writing, SEO experts Yoast advise that keyword densities should be somewhere between 0.5 and 3%, so include your alt text when you calculate your whole page’s keyword density. SEOBook’s free Keyword Density Analyser can easily help you identify the keyword densities within your own texts.
3. Be Specific!
Always aim to pack as much contextual value into the alt text as possible. First and foremost, approach your alt tags by describing what’s in the image for users with visual impairments. Provide a specific description of what’s being shown, then apply any target keywords if appropriate.
4. Keep Alt Text Below 125 Characters
Technically alt descriptions can be as long as you like, but screen reading software will generally stop reading alt text after 125 characters. Keeping to this character count is a good rule of thumb regardless – it helps to keep things brief, punchy, and specific. Remember that alt text doesn’t need to take the form of fully formed sentences as long as it makes sense.
5. Transcribe Any Text Shown Within the Image
If an image contains text, always transcribe what’s being said in your alt text – this is for the benefit of both search algorithms and those using screen reading software. If the quote is short, you can always include a descriptive element too, such as “A colourful street art wall mural in Digbeth, Birmingham, UK that reads “Forward”.”
However, there are some instances where alt text is generally not required. Alt text can be left blank for small details like blank spacer images, bullet points, or other, small graphics that are just for appearances.
Alt Text Examples
Let’s take a look at some general good and bad examples of alt text.
Poor alt text: people at work young entrepreneurs meeting office marketing design agency management
This alt text is just a string of keywords and doesn’t present a clear picture of what’s going on in the image.
Better alt text: A meeting between young marketing entrepreneurs in a modern office.
This more accurately describes what’s going on in the image for the benefit of search crawlers and those with visual impairments.
Poor alt text: A picture of seagulls and pigeons in London.
Stating it’s “a picture of…” is redundant. This alt text wastes the opportunity to talk about the view in the background, especially if your content is related to London landmarks or tourism.
Better alt text: Seagulls and pigeons on a wall in London with Elizabeth Tower and the Houses of Parliament in the background.
This is a more specific description; longer-form text provides more opportunity to mention more context-specific keywords.
Poor alt text: A screen with a blue and yellow graph.
This description doesn’t add any substantial contextual value.
Better alt text: A computer screen showing a financial graph which illustrates numerous peaks and troughs.
This provides a more accurate, contextually appropriate description whilst also giving an indication of the data visualisation involved.
All in all, alt tags provide two highly valuable functions for your audience – an enhanced user experience for your website’s visually impaired visitors and an added opportunity to enhance your site’s on-page SEO.
Do you know if the images on your site have alt text? What on-page SEO have you carried out on your website? How well-prepared is your website for accessibility tools like screen readers? Please leave us a comment below!