So if you’re looking for how to add SEO value to your images by using ALT tags and TITLE tags then... Stop right there!
First off, I need to get this off my chest. The <IMG> element is the tag, ALT and TITLE are attributes of that tag. It’s common place to refer to “ALT tags” and I admit I do it myself but technically that’s incorrect, ALT and TITLE are just attributes.
Admittedly adding ALT attribute to you image tag will no doubt help your Search Engine Optimisation a little, in particular if used correctly it will help your images appear in Google Image searches, but that is not what it is for and should not be the sole reason for using them. I have so far found no evidence that TITLE tag has any SEO benefit.
It’s important to appropriately use descriptive information for your image alt attributes. In the same way that it’s better to have well written, grammatically correct and meaningful text aimed towards being read by a human being on your website rather than keyword stuffed babble aimed at a web crawler.
So let’s get back to basics....
What is an ALT tag*?
*OK, so I know it’s not technically a tag – but that’s what everyone is used to so I’ll carry on this way.
ALT is code speak for "Alternative Text", The ALT tag is attached to the an image tag and is there to provide a description of the image which is read aloud by screen readers for blind or visually impaired users.
It's also displayed as an 'alternative' to the image if for some reason the image file cannot be displayed; the user has 'display images' turned off in their browser, or the image file cannot be found.
Following the Web Content Accessibility Guidelines (WCAG) set out by The World Wide Web Consortium (W3C ) — "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."
What is a Title tag (or attribute)?
As specified by W3C the image TITLE attribute “offers advisory information about the element for which it is set”. When used in conjunction with the ALT tag it should complement the ALT tag not repeat it. In the same way search engines like Google are clever enough to penalise you for keyword stuffing your content, it is not best practice to simply copy and paste your alt tag content into your title tag, but this is exactly what so many people do.
Should I use both TITLE and ALT tag?
The ALT tag provides descriptive alternative text for when an image cannot be displayed; the TITLE tag is used for providing supplementary information about the element. It has been reported that Google focus on the alt tag text, so if you’re only going to use one – use the ALT tag.
Be brief but be descriptive, and you don’t need to include “image” or “picture” in the description (e.g. “this is a picture of ...”) because the browser already knows it’s an image from the IMG tag.
Depending on the browser you’re using the content in the TITLE tag is displayed in a little pop up tool tip. Personally I find it annoying as little tool tips flicker every time I move my mouse over the page. There’s no reason to put a TITLE tag on every image so try and reserve them for when the image is a link, but in which case it would be advisable to add the TITLE attribute to the anchor link rather than the IMG tag anyway.
An example of how to use Alt and Title attributes with your image tag
Using this picture of Elizabeth Tower (yes that’s the official name of the clock tower that houses the bell named ‘Big Ben’) kindly borrowed from Wikipedia, I will try and give an example of the best way to use TITLE and ALT attributes.
So let’s look at the code that makes that image display on the screen:
<a href="https://en.wikipedia.org/wiki/Big_ben" title="The Wikipedia page for Big Ben"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Big_Ben_Clear_Skies.JPG" alt="The clock tower that houses the bell named Big Ben"/></a>
You should notice the filename of the image itself is descriptive “Big_Ben_Clear_Skies.JPG” this is a HUGE thumbs up and will far outweigh any SEO value of the ALT attribute applied to the image.
The ALT attribute briefly describes what the image shows “The clock tower that houses the bell named Big Ben”.
And the TITLE attribute is applied to the link and explains where the link goes.
For more information check out W3C and WCAG
https://www.w3.org/WAI/standards-guidelines/wcag/
Image alt tags and title tags for SEO
If you've found this article informative, please take a look at my other articles.
Get in touch