Web Design and Development
ALT vs. TITLE Attributes For Images in HTML
The alt and title attributes, when used with images, are often the source of many questions because they seem redundant. But even more important, many wonder how the use of these attributes affect visitors and search engines?
The Alt Attribute
Description: Text contained within the alt attribute is used to specify alternative information that should be shown if an image is inaccessible.
So this text is typically shown to visitors if an image is missing, or cannot be downloaded to to a sluggish web server or slow internet connection. It is also shown to people who have disabled images in their browsers. If you have not specified alt text, a missing image is displayed as a blank box or an empty icon depending on browser. Additionally, alt text is typically shown when users hover over an image when using Internet Explorer.
Also, perhaps more important, Google acknowledged that Googlebot uses alt text to determine what an image is about:
As the Googlebot does not see the images directly, we generally concentrate on the information provided in the "alt" attribute.
So for search engine optimization, using the alt attribute is very important.
And finally, according to W3C (the World Wide Web Consortium) the use of alt attributes with images is required for valid HTML.
The Title Attribute
Description: Text contained within the title attribute is used to display additional information.
The title attribute is primarily important for users. For example, when you hover over an image with title text, the data contained within the title attribute pops up. And with Internet Explorer (IE), which has been known to favor alt text, the title text now takes precedence in IE versions 7+.
But with regard to search engine optimization, it is unclear as to how search engines use title text.
Summary
- Always specify alt text. It’s good for search engines and visitors when images cannot be displayed.
- Title is optional. But it is a good idea to use it to specify the additional information that pops up when users hover over an image.
23 Responses to “ALT vs. TITLE Attributes For Images in HTML”
Trackbacks
WordPress links week 4 – 2009 | WPStart.org – WordPress themes, plugins and news
Trackback URL:
Leave a Reply
- Categories
- CMS Plugins
- Code Samples
- Domain Names
- Industry News
- Internet Marketing
- Miscellaneous
- Professional Web Development
- Search Engine Optimization
- Tutorials
- Web Browsers
- Web Design
- Web Hosting
- Website Improvement Tips
- Website Performance
- WordPress Themes
- Subscribe by Email or RSS
- Want to be notified of new entries? Just enter your email address below. Our feed is delivered by FeedBurner.
- Recommended Hosting Company
- We prefer HostGator. Click here to save 20% on hosting.
Want us to work on your project?
Contact us today for a quote. Click here to submit details regarding your project.
If you are making a general inquiry, send an email to info@velvetblues.com
nice sum up of the two thingies. i remember a smalltalk a few days back on twitter on this. next time i’ll have a link to point out
You’ll have to send me the link. Perhaps I missed something.
I have been paying more attention to images recently and have noticed on most peoples sites and blog that they name the image after the title or main keywords in the post.
Your explaination made me understand why it is important to do that and how it helps in searches. Thanks!
Yes, many people see images tags as another place to stuff keywords.
‘alt’ is the keyword stuffing opportunity as well
Probably it can have a double impact when image itself is within an anchor. Anchor text and img alt can then contain keywords. My theory 
Indeed. And, links can use title attributes as well. I’ve seen some people go so far as to stuff keywords in all four locations: anchor text, image alt text, image title text, link title text… They’ve got SEO down to a science.
And apparently, you know all about this. …your theory.
I don’t know about the double impact, but by having such a high concentration of keywords in that location, I don’t think that Google will have any problem ascertaining the subject… 
I see high importance in having ALT for your images because like you said, google don’t see the images, they look at the ALT. People often overlook this simple step when it comes to on page SEO.
Yes, it is a simple step and it does a whole lot for optimization.
Adding the alt text for sure works. Its mostly good for google image traffics.
You’d be surprised how much traffic people get for images. But it also helps the overall keyword optimization of the page.
I wont hide this. But about 30% of my google traffic is from google image. However weird as it is… i only get traffic from google image when I am sleeping lol. I mean when its night here
Wow, 30%! That is quite surprising. When it is night there, it is daytime in the Americas… So, we might be sending you that traffic.
I try to use alt for images but never use title. I actually didn’t know what it was for so thanks for the write-up
I also rarely use titles, especially on WordPress-driven websites. But when I hand-code sites I usually do add alt and titles.
Nice tutorial for those who have the confusiont between the both. I always use both alt and title and I also get some search visits from images.google.com
About 1.5% of my visits from Google come from the ‘image’ search. Do you get a lot more visits from images.google.com? What’s your relative percentage?
Nice summary, but I believe this is incorrect:
“Additionally, alt text is typically shown when users hover over an image.”
This only happens in Internet Explorer. IE wrongly uses the alt attribute as title text. This may have changed in IE7/8 but it was certainly incorrect in IE6.
Yes, you are right. That was a slip. If you look under ‘Title’, I explained it more accurately. ‘ALT’ is used by default in IE. And the ‘TITLE’ is used by other browsers. But now in IE 7/8, the TITLE attribute overrides ALT. Thanks for catching that.
nice explanation! Now I understand the difference between each tag.
I always copy/paste my alt text tag in my title tag…Do you know if this has a side effect?
Tks!
I’m finding that in IE 8 I can get the title but in compatibility mode it still shows my alt tag information rather than title information. Also when I go to a different computer title does not override alt in IE 7 systems.
IE 6 of course shows alt information. Am I correct that if I want to display a specific bit of information I have to actually duplicate in alt and title?
Actually, what is the purpose of title attributes in links for the SEO or PageRank? They are not indexable, right?
I’ve been searching around for a definitive case study or experiment done on any SEO benefits of the title tag versus alt text. I cannot find anything. Does anyone know of an experiment done comparing these two anywhere? Thanks.