Disclaimer: this is written from a developer’s point-of-view. I don’t claim to be a SEO expert but I think the points made are valid nonetheless. Also, although I do have a text-browser installed I will admit to being remiss in using it as a tool to test websites.
I recently saw what I thought was an abuse of the image “alt tag”, borderlining on spam, by a SEO company who were working on a client’s site that I look after. I think “alt tags” are often misused, often for so-called SEO benefits. Here I outline the purpose of the “alt tag”, how it’s often misused, how it should be used and why “alt tags” are not for SEO.
There is no such thing as an “alt tag”
The term “alt tag” is a misnomer which is why, up until now, I have put the term in quotation marks.
In case you didn’t know with HTML, the language that is use to define content on the web, content is wrapped in tags that give its contents certain meanings. In web development this is known as “semantic markup”. Although you don’t see this as a website visitor an image is expressed in HTML like this:
<img src="photo.jpg" alt="" />
The img part is the tag but the src and alt are attributes of the img tag. Therefore “alt attribute” is correct and “alt tag” isn’t. It may seem like a pedantic point to make but it actually lies at the heart of “alt tag” misuse. HTML is all about semantics and understanding the semantic meaning of tags and their attributes allow you to use them correctly. Anyone who is involved in producing website content — not just developers — should be aware of semantic markup.
Calling it an “alt tag” is harmless and has no direct impact on the misuse of the alt attribute. I am raising it to illustrate the point that when it comes to HTML, meaning is everything.
The semantic meaning of the alt attribute
The alt attribute is short for “alternate text for an image”. Why would you need an alternative? The two main reasons are if the image fails to load due to an error and if the visitor is using a text-only browser. They may use the latter because they have limited computing resources and bandwidth but it is usually because they are blind or visually impaired.
To understand one of the main uses of the alt attribute it’s worth knowing how a site looks in a text-only browser.
Lynx, the text-only browser I use, uses one colour for the main body text, one for links and then another for images. That’s pretty much it. Some users of text-only browsers do read the text, others have the browser read it out loud to them. The text used for an image is the text used in the alt attribute. If the alt attribute is omitted text-only browsers often use the file name as a default for the alt attribute. If you specify an alt attribute but leave it empty then the text-only browser will ignore it. And if you set a value for the alt attribute this will show as an alternative to the image.
As you read through the rest of this article you will need to bear this in mind as it’s difficult to fully understand alt attribute misuse without it.
So, the semantic meaning of the alt attribute is it’s to be displayed in absence of the image as an alternative. If anything is added to the alt attribute it must add relevant sensical information to the rest of the content.
Misuse no. 1: no alt attribute
Not to be confused with an empty alt attribute, all images must have an alt attribute. As mentioned in the previous section, if left out some browsers default to the file name of the attribute is missing. Take this example:
We are a family-run company with over a decade of experience offering web design… [Image: team-2018-01-01.jpg] Based in Leeds…
Misuse no. 2: tautological alt attribute
Browsers, be they text-only or a standard desktop browser, separate text in the image from the main body text. So, if you set an alt attribute to “Image of a computer screen”, it becomes tautological. Some text-only browsers will render it like this:
We are a family-run company with over a decade of experience offering web design… [Image: Image of our team] Based in Leeds…
Misuse no. 3: alt attributes for decorative images
Images that are for decoration-only should have a blank image attribute. As to what constitutes a decorative image is somewhat subjective but as I will cover later on if your content is written correctly almost all your images should be decorative in that an alt attribute has nothing to add to the text-only user.
Misuse no. 4: any alt attribute is better than an empty alt attribute
The attribute of the SEO company that I referred to in the introduction is a common one amongst marketing companies: no alt attributes should be left blank. If you’ve understood the semantic meaning of the alt attribute you should now know this is wrong. You essentially end up with random words and phrases littered around otherwise useful content.
Misuse no. 5: alt attributes for keywords and SEO
Some believe that adding keywords and phrases you are trying to opitmise for as alt attributes helps your SEO so they will add text, sometimes completely arbitrarily, to an image. To a text-only browser you end up with something like this:
We are a family-run company with over a decade of experience offering web design… [Image: web design company in Leeds] Based in Leeds…
Alt attributes and SEO
The use of the alt attributes sometimes borders on a black hat technique
When seen through the eyes of a text-only browser you start to see how common uses of the alt attribute aren’t in line with the alt attribute’s intended use.
But what about missing out on all the apparent SEO benefits? What about appearing in Google Images results?
The likes of Google strive to give the best user experience as possible and also place great importance on accessibility. Looking at the overall picture it makes sense to use alt attribute properly. As with many other areas of SEO any “evidence” that adding key phrases to alt attributes is often anecdotal. Because alt text is not visible to the majority of users Google are naturally not going to place much importance on it anyway.
Secondly, it is disingenuous to say that the alt attribute is the bedrock of Google Images. Reverse image searching shows that it is very sophisticated when it comes to image matching and to be able to index an image based on the page it’s on, the site it’s on and so on would be well within its capabilities.
But what about that big name website that does use the alt attribute in ways I’ve alleged are a misuse? That doesn’t really prove anything. Some companies use SEO techniques in case they have a slight benefit, not because they do.
According to Webopedia, part of Black hat SEO can be defined as “techniques and tactics that focus only on search engines and not a human audience”. With that in mind, the use of the alt attributes sometimes borders on a black hat technique. Long term, doing whatever is best for the user and accessibility — which semantic markup helps to do — will always be good for SEO.
How to use the alt attribute
The Massachusetts Institute of Technology, the famed research university, give a summary I agree with:
ALT tags are often misused, mostly people overuse them. It's better to leave the ALT tag blank (ALT="") then to enter a text description that's not useful or is redundant.
The fact of the matter is for the vast majority of images an empty alt attribute should be used. If a page would benefit from an image having an alt attribute it oftentimes indicates a problem with the rest of the content.
For example, if you are writing a review of a band who played Wembley Stadium and you have an image of Wembley Stadium what could you possibly add in as an alt attribute that shouldn’t be mentioned in the article?
Install a text-only browser and you will soon start to see that many uses of alt tags are semantically wrong. If in doubt, leave the alt attribute empty!
So, what is a legitimate use of the alt attribute? There aren’t many. A good one is if your logo is a link to the home page then a simple “Home” alt attribute would make sense in a text-only browser.
Misinformation about the alt attribute is quite common because it’s often propagated by people who don’t write HTML. Some tools even try to suggest alt tags and rate your alt attribute usage and this gets people into the wrong mindset.
Because of this, the majority of articles on alt attribute usage are wrong. Just to show I’m not the only person who holds this opinion I have included links to similar articles below:
Tim Bennett is a Leeds-based web designer from Yorkshire. He has a First Class Honours degree in Computing from
Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.