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.
Copyright © 1998 - 2017 K. Clough, Inc. All Rights Reserved. Privacy