If there’s ever a set of fundamental technical guidelines to get SEOs up in arms, it is the use of alt and title attributes on images and links. Some say they’re essential, others say they’re a nice to have, still others are split down the middle depending on the type of website and the purpose of the image or link in question.
Of course until Google and Bing both issue a set of one hundred percent, no-holds-barred guidelines about how to use these two attributes, we’re reduced to what we can measure in terms of visibility effects and good old-fashioned experience. Here’s how I recommend handling alts and titles for images, links and any combination of the two.
Probably the most straightforward. An alt attribute is meant to be an alternative information source for those people who have chosen to disable images in their browsers and those user agents that are simply unable to “see” the images (including search robots and screen readers for the blind). It should describe what the image is about in context so that the user understands what they would be seeing if they could see the image.
The in context part is what often trips people up here. Just describing the image is not often enough. Let’s take an example from a famous accountancy firm, shown below.
In this instance the basic accessibility rule would mean you gave the image on the right an alt attribute like “offshore wind farm.” However while this is technically accurate, it doesn’t quite explain properly what the image is designed to illustrate, which is the article on renewable energy tenders that it is attached to. A better alt could be something like “Offshore Wind Farm Example Of Renewable Energy Tender.” You could even just hyphenate something like “Offshore Wind Farm – Renewable Energy Tenders.” There’s no one answer, but the really important thing is to cover both angles – describing the image as if to someone who can’t see it, but also giving the context of what it is there to illustrate.
<img src="http://www.example.com/images/wind-farm.jpg" alt="Offshore Wind Farm - Renewable Energy Tenders Example" />
Of course in reality you won’t be able to get this spot on for every image – especially on large enterprise or catalogue sites, the need to autogenerate alt attributes, rather than leaving them empty, will make tailoring them this way impractical – but it is important to try to get high quality alts onto the site as often as possible!
The SEO weight of an image alt is high. It is (still) one of the primary methods that search engines use to “see” images on the page. Creating a good, descriptive alt attribute that still supports the topical query targeting for a piece of page content is a very worthwhile skill and worth cultivating.
An image title (the attribute name rather speaks for itself here) is designed to provide additional information. Good title attributes follow the same rules as for any other content title; relevant, short, catchy, and concise. When used on images, titles often show as popup “tooltip” style text in browsers – but don’t be tempted to use them this way by filling them with terms like “click here” or “read more!”
Officially a title “offers advisory information about the element for which it is set” which is a rather fancy way of rephrasing the above. Especially on big sites, image titles are often autopopulated to be identical to the alts, which isn’t technically correct, but I’ve never seen it do any harm either.
<img src="http://www.example.com/images/catalogue/navy-blue-parka.jpg" alt="ALLSAINTS LIMITED Loop shell parka coat" title="ALLSAINTS LIMITED Loop shell parka coat" />
The SEO weight of image titles is debatable. I generally deem them a “nice to have” but certainly not a deal-breaker in the same way an image alt would be.
You can have title attributes on hyperlinks, too (actually, you can put titles on any HTML element if you really want to, as they’re global attributes, but generally they’re mainly used on links and images).
Whether or not you should have a title on a link depends on the link itself. If it is obvious from both the link anchor (that’s the text the link is on) and its surrounding copy/context where the link will lead, then a link title will actually reduce usability by being one more thing users have to look at. So in cases like that, leave it off.
Find out more about our <a href="http://www.example.com/menus/lunchtime">lunchtime menus</a> and see if you would like to try our new seafood range of pizzas.
On the other hand if it is not clear where the link is going, a title is pretty essential for accessibility. This could be because of poor anchor text – “click here” and “read more” are common offenders! Alternatively it could just be a bit ambiguous where the link goes. For example, a link on an author’s name at the bottom of a blog post could lead to more posts by the author or it could go to the author’s biography, but there would be no way to know which unless you clicked on it. That’s where a link title comes in.
Always delighted by digital challenges, <a href="http://www.example.com/bios/matt-delaforce" title="Author Biography for Matt Delaforce">Matt Delaforce</a> can be found outside work in the local pub or cycling between distant cities.
Always delighted by digital challenges, <a href="http://www.example.com/posts-author/matt-delaforce" title="More Posts By Matt Delaforce">Matt Delaforce</a> can be found outside work in the local pub or cycling between distant cities.
The SEO weight of a link title is debatable, but I’ve seen good results from including them on internal links where the anchor text is poor so generally consider them a nice to have.
Combining Images & Links
Of course a lot of sites do this – from basic buttons to big, impressive clickable visuals. The principle of including a title on the link here still holds (think of any image like a “read more” anchor that needs more definition), and of course you still need an image alt, but I’d recommend against including a title on the image as well – it is redundant since the link will enclose the image.
The reality of this situation is of course that if handling a large catalogue site, the chances are you’ll be autogenerating the majority of your titles and alts regardless of how their parent tags are combined. That’s unlikely to cause any significant issues, but ideally you’ll be able to tailor the title to the link and the alt to the image.
<a href="http://en.wikipedia.org/wiki/Big_ben" title="The Wikipedia page for Big Ben"> <img src="http://upload.wikimedia.org/wikipedia/commons/b/b5/Big_Ben_Clear_Skies.JPG" alt="The clock tower that houses the bell named Big Ben"/></a>
At the end of the day as long as you remember to include appropriate alts on your images you’re unlikely to be missing out on any big opportunities as far as onsite optimisation goes. But remember SEO is often a game of nuances, so why not take advantage of every possible opportunity you have on your website to get a little extra edge? That’s exactly where getting the right titles on your links and images can come in.