What is an ALT Tag?
The term 'ALT' is just a abbreviation for 'Alternative', an alternative item to the one that is supposed to be shown, in this case, an image. The term TAG is just used to refer to the name (ALT) of the block of HTML code. It's superfluous really, but it makes the term clearer, so we use it.
The 'ALT Tag' is a small piece of simple code that is added to the HTML code of an image on a web page. It looks like this:-
<img alt=”google search results image for ujoomla” src=”https://ujoomla.com/images/search.jpg” />
The 'ALT Tag' is in bold italics.
What is it for?
There are two main reasons why the 'ALT Tag' is used on today's websites. (It is important to note at this point that things have changed a lot over the years, and web browsers and the HTML they process have also changed. What might have been correct 5 or 10 years ago (IE 7 and older) is not necessarily correct now.)
1. The 'ALT Tags' primary role is to provide an alternative when an image cannot be displayed for some reason on a web page. If the original image is missing then the 'ALT Tag' will show thus giving the viewer an idea of what was supposed to be there instead of that big white space he now sees. This is also important because many people with impaired vision use some kind of 'screen reader' to interpret what a web page is all about. If the image is missing and the 'ALT Tags' are not complete, the screen reader will just skip over that part of the web page, thus denying your visitor the information that should have been there.
2. A key reason for using 'ALT Tags' properly is to aid Google in knowing what your image is all about. Believe it or not, Google has a real hard time deciding if that photo of a cute kitten on your web page is really a kitten at all. Google needs to be told. It's as simple as that.
Why is it important?
So, we now know what 'ALT Tags are and why we should use them, but why are they so important?
To get a better idea let's look at the previous two ideas again.
1. More often than not, today's internet and websites are pretty reliable, but what if your information cannot be read or understood? It's a waste of time right? By using 'ALT Tags' you ensure that your visitor has the best experience possible while browsing your site. If they have impaired vision, their screen reader reads the 'ALT Tag'. If the image does not display for some reason, there is a text label (ALT Tag) instead. Google is rewarding more and more towards websites that put their visitors first. And that is so important for your SEO and website ranking.
2. We said that Google doesn't know what your photo is all about, and that's correct. But why is it important that Google knows about your photo? Well, apart from linking it to your content and thus making the page user friendly, which Google will reward you for. It allows the photos on your website to rank in Google's image searches, and that is a HUGE SEO BOOST for your website. How many times do you search for images on Google and then visit the site they came from? Many, I am sure.
When writing your 'ALT Tags' you must always consider a couple of things. Firstly, make them relevant to the image and the topic. It's no good describing a photo of a kitten as a kitchen knife! Don't just use one or two words to describe your photo, make it descriptive, 'photo of a cute kitten wearing shades' is much better than just 'photo of a kitten'. There is no hard and fast rule about the maximum length of an 'ALT Tag' but, there is evidence that shows search engines ellipsis (…) 'ALT Tags' at 16 words. So as with all things it's best to optimize for best results.
The second point is to use your keyword for the article in the 'ALT Tag'. This is also a SEO boost that many web developers miss out on. Lets say our article is about a new kind of cat food, called Cat Chow. Wouldn't it make sense to include the the keyword 'Cat Chow' in the tag? So, now we could have 'photo of a cute kitten wearing shades enjoying a meal of CAT CHOW'.
A point worth remembering here is, don't over use the keyword in your 'ALT Tags'. Keyword 'stuffing' as it's called is frowned upon by search engines, once or twice is fine, but don't over do it, use it just once to make it relevant.
Are empty 'ALT Tags' okay?
<img alt=”” src=”https://ujoomla.com/images/search.jpg” />
Simply put, yes they are. However, if you do use empty or null 'ALT Tags' your website will suffer from a SEO perspective, remember search engines like 'ALT Tags'. The positive thing about empty tags is that screen readers will just ignore them.
If you do use empty tags try to use them only from a design perspective rather than a content perspective, content is king after all. For example, use them for background images or for images that are used as spacers.
Screen readers sometimes get confused when reading text to the visually impaired. For this reason it is best to avoid using acronyms at all. But if they must be used, place a space between the letters.
For instance, <alt="I T S at P S U" > (would be read by a screen reader as "I-T-S at P-S-U"),
whereas <alt="ITS at PSU" > (would be read as "It’s at Sue"). Therefore confusing your website visitor.
Don't confuse the 'ALT Tag' with the 'Title Tag', it's very different, we will talk about the title tag in another article.
In conclusion then, always, always, always use 'ALT Tags' make them relevant to both your topic and the image. Make them descriptive, but not too long and use the 'ALT Tag' as an opportunity to use your page keyword one more time.