Stop Wasting Your ALT Attributes and Make them Work for You
When providing SEO advice on the topic of website design, we often warn against placing important content into images. This is because search engines can’t read images like a person can. To them, an image with text is just an image. They really have no idea what the image is or if, in fact, it says anything at all. So when optimizing sites, anytime we are dealing with keyword optimized content, we want to make sure it’s standard HTML text. This includes headers, benefit lits, and even normal body copy.
While the search engines can’t read actual images, they can read what we say about the image. This information can be gleaned a few different ways:
When trying to optimize images for image search, all of these can provide important indicators the search engines use to produce the best set of image results. In terms of traditional optimization and website usability, the ALT attribute plays an important role.
The ALT attribute should by no means be considered a substitute for regular text. ALT text doesn’t get weighted as heavily as body text so relying on it as a replacement for body text is like entering a Prius into the Indy 500. It doesn’t have a chance.
Ok, so that was a bit of an exaggeration, but you get my point. There are effective uses of the Image ALT attribute when it comes to SEO and usability. Let’s start by looking at an image tag with the ALT attribute:
<img src="images/image.jpg" alt="This is the ALT attribute" />
Almost universally, you should be using ALT text to describe each of your images. I say “almost” because if you are still using clear images for formatting, styling, or spacing (you shouldn’t be!) then those images don’t need any description. As a side note, if you want your HTML to validate properly then every image needs an ALT attribute, even if it’s left empty:
<img src="images/spacer.gif" alt="" />
In some cases, the ALT text can act as a replacement for the text in an image, such as a company name, tagline or some kind of special promotion, and in other cases the ALT text should actually describe the image. In either case, if the image contains text, then you will almost always want to put it in the ALT attribute as well.
For example, the logo in my company site is really nothing more than just the words “Pole Position Marketing” with my tagline.
I could go a couple of different ways with the the construction of the ALT attribute, depending on the context of how it’s used. Here, since I’m using the image as an example, it’s not important for me to use much more than a basic description:
alt="Pole Position Marketing logo and tagline"
But on my own website, since this isn’t jut an image in the body copy, but one of my key site indicators, I produce a much more complete description:
alt="Pole Position Marketing: Velocitize Your Website Marketing"
Now, if I wanted to be even more descriptive, and more accurate, I’d write my alt tag this way:
alt="Pole Position Marketing logo: Velocitize Your Website Marketing"
Again, I let the context be the guide for what I write in my ALT text. If the reader, with images turned off, won’t know that the image is a logo then I’d add that to the description. But since this image appears repeatedly at the top of the page, in the typical place that logos and/or other site indicators go, then I really don’t need the additional description.
Let’s look at another example. Here is an screenshot of an image-heavy home page:
Now, when we look at this same page with the images turned off you can see how that by not using any image ALT attributes the site becomes unnavigable.
The only place you can see any ALT text is in the logo, which reads “Super 8 Taos”. The rest of the site is just a big jumble of images, some of them links and some not.
[Note: you can mouse over any of the images on this page to check out my ALT text usage for each.]
As you can see above, ALT text becomes even more important when navigating a site with images turned off when the navigation is all image based. Let’s add some ALT text to these images and see what we get:
The header and navigation are pretty obvious. Here we simply added the same words that are in the image. Again, since this is obviously navigation we really don’t need to describe the images, so much as just reiterate what they say. This allows the visitor to know where each link will take them, just as if images were turned on.
You can see that I didn’t bother adding ALT text to any images that didn’t serve a function beyond eye-candy. There really is no reason to attempt to describe them in any way, so in these cases I would just add an empty ALT attribute, as shown above, just so the code will validate.
In the center area I got a bit creative with my ALT text. Even for less image-heavy websites, this is a great example of how to use ALT attributes for images that attempt to convey meaning without words.
We could attempt to describe the pictures perfectly by saying something like, Picture of our room, picture of the bay, picture of downhill skier. While those are accurate descriptions they don’t convey the intended meaning that you get when you actually see the image. So in this case we’ll use the ALT attribute to try and get some of that intended meaning across:
alt="All of our rooms are comfortable and spacious with living room seating and ceiling fans."
alt="You can reserve a suite featuring breathtaking ocean views."
alt="We are only minutes from some of the worlds best ski resorts."
With images like this you can get a bit more or less flowery, depending on your needs. It also makes it easier to work keywords into the ALT text without looking junky. Instead of just throwing a keyword in every image, describe the image a bit and work the keyword in naturally. Just like you would with body text.
It’s easy when SEOing a website to just throw a quick word or two into your alt images, but that’s a mistake. Even in your navigation the ALT text can be used to expand on a links meaning when there is not enough image space to do so.
For example if the image reads “About Us” the ALT attribute can say “Learn more about our company.” If the image reads “Accommodations” the ALT text can read “Deluxe accommodations.” If your image reads “FAQs” then the ALT text can spell it out with “Frequently asked Questions.”
When dealing with navigation you want to be careful about how many words you use. Too much and you lose the ability to be effective, especially with quick scans. Always check what your page looks like with images turned off, ensuring that your ALT tags flow well with the rest of the site design. On my site I edited my ALT attributes specifically to provide better usability with images turned off. Here is what my site’s top navigation looks like with images:
The drop downs are all absolutely positioned so if I had made any of these ALT descriptions longer then the drop downs would have been been misaligned. By editing my ALT text properly, we keep proper alignment.
Just to provide one more example of good ALT attribute usage, I’ve added ALT text to the Better Business Bureau logo on our site. Instead of just saying “BBB Accredited Business” I added a more lengthy description that reads:
alt="We are a Better Business Bureau accredited business. Click here to check our BBB rating."
This text much more valuable to the reader that has images turned off.
I should also note that Internet Explorer will display the ALT attribute when you mouseover an image. FireFox, on the other hand will only display text that is in the image’s title attribute. If you are adding great descriptive text in your ALT attribute as I have shown here then it’s probably a good idea to also place that text in a title as well.
Stoney deGeyter is the President of Pole Position Marketing, a leading search engine optimization and marketing firm helping businesses grow since 1998. Stoney is a frequent speaker at website marketing conferences and has published hundreds of helpful SEO, SEM and small business articles.
If you’d like Stoney deGeyter to speak at your conference, seminar, workshop or provide in-house training to your team, contact him via his site or by phone at 866-685-3374.
Stoney pioneered the concept of Destination Search Engine Marketing which is the driving philosophy of how Pole Position Marketing helps clients expand their online presence and grow their businesses. Stoney is Associate Editor at Search Engine Guide and has written several SEO and SEM e-books including E-Marketing Performance; The Best Damn Web Marketing Checklist, Period!; Keyword Research and Selection, Destination Search Engine Marketing, and more.
Stoney has five wonderful children and spends his free time reviewing restaurants and other things to do in Canton, Ohio.
Good piece, interesting the use of the words around the image I saw some other articles on this a while back which pointed that this was more important than the actually alt tag. I did have a site once though get over 2000 uniques a day just from an image which came up well in google images whether or not this assisted business or not is hard to say but it is just a numbers game sooner or later it works for you.
ahh I see, just read through the whole thing and didn’t really know what the alt tag did on an image. Cheers for the informative post..will use it wisely.
Very interesting, I suppose consistency is very important and you probably can over do it as well.
Great post. Very informative. Great tip on disabling images in a browser to view all the alt tags for images. Simple way of finding out which ones needs updating.
Nice thorough article – specially the alt=”” – I just started doing this recently and MUST apply it to my own site! I’m going to circulate this to my small business clients who work on their own sites because it really says it all!
Great information, Stoney.
I have used this idea to update my alt tags with information that is more informative and more compelling (I hope).
For example, I use an image button to link to our order form. I am in the process of changing the alt tag to read, “Order Native American jewelry with the confidence of our satisfaction guarantee.”
Theoretically, this should help both with keyword optimization and conversions. We’ll see….
A well-intentioned article, with bits of good advice, but on the whole, I’m afraid, very misleading.
An alt attribute is not an “image descriptor”. Not ever. It is, as the name indicates, an ALTernative for an image when the image itself cannot be seen. This immediately indicates that Internet Explorer’s behavior of showing alt text when hovering over the image is actually a bug – all other browsers get it right.
ALT text should be able to replace the image in its context when the image itself is not shown. Another way of thinking about this is that the alt text should replace not the image, but the function of the image on the page. This will benefit humans, and also search engines. (I’ll get to description, read this first.)
So how do you use ALT?
Not only is this strategy best for search engines, it’s also and primarily best for humans, especially those who cannot see images at all, or have them turned off out of necessity. Turn off images in your browser, and read aloud. If your alt text doesn’t sound natural in that context, your alt text needs rewriting. Or use a text browser like lynx which not only gives you a good idea what a search engine will see, but also what someone with a a screen reader might hear, when visiting your site.
Many images do indeed benefit from actual description (content) or clarification (for instance image links). That’s not the task of the ALT attribute but of the TITLE attribute. Graphical browsers usually give access to this in the form of a tooltip when you hover over the image, or as text in the status bar, or both. Even Internet Explorer gets this right: when there is a title attribute, it will show that as a “tooltip” instead of the alt text. Text-only browsers like lynx and screenreaders (programs that read text for visually impaired people or feed it to a braille device) have options for whether or not to make the title text available. And search engines read it, too.
So, for function you use ALT text, for description you use TITLE text. And you can use both to complement each other!
Take your BBB badge. The correct way to handle that is to have only the text as it appears in the image in the alt text (alt=”BBB accredited business”) and use the title attribute for your call to action (title=”We are a Better Business Bureau accredited business. Check our BBB rating.” – avoid the superfluous “click here” – anyone can see or hear that it’s a link and people know they can “click” links, even if they cannot use a mouse).
For image links, the title attribute is an excellent way to tell the visitor (and the search engine!) what to expect at the other end of that link.
In summary (and I’m sure you’ll find that even Google agrees with that): write for humans, not for search engines. You’ll benefit not only by giving more relevant text to the search engines, but also by making your site more accessible to those with various impairments or browsing the web from their mobile phone.
Put this above your bed (or stick it on your desk lamp):
ALT is function, TITLE is description. Use both!
Resources:
What a fantastic and comprehensive guide, very helpful and usable.
Thanks Stoney,
JR
Great guide – I have a cartoon blog and was wondering how to get the tooltip thing coming up when I mouseover each comic.. thanks for the useful tips!
Thanks also Marjolein – very clear description of what’s what with regard to alt text and title text!
In internet explorer the tool tip shows what’s in the alt tag. In Firefox it shows what’s in the image title.
Wouldn’t duplicating text in an image tag’s ALT and TITLE attributes be regarded as duplication to the search engines, therefore having a negative effect?
Great thanks. How can I turn my images off to check my tags? Thanks
bikes for sale
thanks i got it
Firefox
In Windows, from the Tools menu, select Options… .
On a Macintosh, from the Firefox menu, select Preferences… .
At the top of the window, click Content.
Uncheck Load Images or Load images automatically.
Click OK.
Internet Explorer
In Internet Explorer 5.x and later for Windows:
From the Tools menu, select Internet Options… .
In the window that appears, select the Advanced tab.
Scroll down the list to “Multimedia”, and uncheck Show Pictures.
Click OK.
Safari
From the Safari menu, select Preferences… .
At the top of the window that appears, click Appearance.
Uncheck Display images when the page opens.
Mountain Bike Classifieds
Actually, for accessibility it is recommended to NOT place empty ALT descriptors. Screenreaders do sometimes (Often? Always?) read something like “no description” on an empty ALT, and trhat can get annoying really fast when there are many decorative images.
The absolutely best way is to place decorative images through CSS background property, and get them out of the flow altogether.
Read by small business people, our newsletter delivers a digest of articles from the top search engine marketing experts. You will learn about:
Our newsletter is the perfect way to stay up to date with all of the latest trends, events and techniques in using search engines to grow your business and make more sales. Subscribe here. Your email address will NOT be given to third parties.
FreeFind Site Search Engine – FreeFind adds a “search this site” feature to your website, making your site easier to use. FreeFind also gives you reports showing what your visitors are searching for, enabling you to improve your site. FreeFind’s advanced site search engine and automatic site map technology can be added to your website for free.
Buy UPC Codes
Get your products listed online!
Search marketing information for small business owners.
Fetching the best small business news.
A friendly place to share small business ideas and knowledge.
Small business support through education, resources and community
The directory of the best small business sites and tools.
Copyright © 1998 – 2018 Search Engine Guide All Rights Reserved. Privacy
Research & References of Stop Wasting Your ALT Attributes and Make them Work for You|A&C Accounting And Tax Services
Source
