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.
Tags: , ,

23 Responses to “ALT vs. TITLE Attributes For Images in HTML”

  • stratosg January 17, 2009 at 11:30 am

    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 ;)

  • Jen January 17, 2009 at 11:40 am

    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!

  • Ajith Edassery | DollarShower January 17, 2009 at 12:05 pm

    ‘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 :)

    • Velvet Blues January 17, 2009 at 7:34 pm

      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… :-)

  • Ben Pei January 17, 2009 at 8:25 pm

    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.

  • Kurt Avish January 18, 2009 at 10:49 am

    Adding the alt text for sure works. Its mostly good for google image traffics.

    • Velvet Blues January 18, 2009 at 1:36 pm

      You’d be surprised how much traffic people get for images. But it also helps the overall keyword optimization of the page.

      • Kurt Avish January 20, 2009 at 3:33 am

        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 :-)

        • Velvet Blues January 20, 2009 at 7:34 am

          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. :-)

  • Kim Woodbridge January 18, 2009 at 5:10 pm

    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 :-)

    • Velvet Blues January 18, 2009 at 11:36 pm

      I also rarely use titles, especially on WordPress-driven websites. But when I hand-code sites I usually do add alt and titles.

  • Nihar January 18, 2009 at 8:22 pm

    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

    • Velvet Blues January 18, 2009 at 10:22 pm

      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?

  • Ben Barden – Blog Tips January 19, 2009 at 9:26 pm

    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.

    • Velvet Blues January 20, 2009 at 1:38 pm

      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.

  • seb April 28, 2009 at 10:05 am

    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!

  • Monica June 24, 2009 at 10:25 am

    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?

  • dani April 13, 2010 at 2:14 am

    Actually, what is the purpose of title attributes in links for the SEO or PageRank? They are not indexable, right?

  • Mike February 15, 2012 at 6:43 am

    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.

Trackbacks

WordPress links week 4 – 2009 | WPStart.org – WordPress themes, plugins and news

Trackback URL:

Leave a Reply

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

Go Daddy Deal of the Week: Cheap .COM Domains! Offer expires soon!