ALT images

[divicohen]

Hello,
Should I input Alt text? would it help rankings? I have placed some images with text and some without... should I bother adding alt text to the rest of them?
Thanks
<link drop removed by mod>

[ImageIsland]

Yes, its generally a good idea to put relevant text in alt attributes for all images, as well as title attributes for links and object elements. For images that are not relevant, spacers, or small in size, you should go ahead and use empty alt tags, as well, as those are ignored. The reasons for using alts and titles is not crirtical to search results, as much as for other factors. These include the following:

1. People with accessibility issues (the blind) need to know what the images are, as they may use a different aural reader when viewing your site.
2. People who for whatever reason, do not support or display images in their user agent, will be able to know what the image was.
3. Google - Google has stated that your site should be readable by Linx browser. Lynx is a basic text reader and does not support image displays. However, it works much like a parser or engine in that it strips away images and objects and looks at the alt text and titles to get more information about the image in your site. This allows not only Lynx readers and user and alternative engines to read your site, but Google's search spiders to also indiex "extra" information about the site and its images.
4. There are more alternative browsers and WAP enabled services, like handhelds and PDA's that may not support images past a certain size, or at all. In those cases, they may honor the image text, which again, could be used to carry important marketing information about your site in thousands of handheld dives and viewers.
5. As the Web evolves, we will be moving away from the image tag and IE's support for alt. It will be replaced and is with title tags. It means that almost any tag will be able to contain imagery, which means, it will be doubly important to get in the habit of placing titles on tags.6. Google now indexes images in its image search feature. That means the name of the image and its alt or title text come ionto play, if someone happens to find your site that way.

Last item...as far as direct search results in standard SEO techniques, I dont think alt text makes much difference, other than whats listed above. But the fact that Google asks you check your site in Lynx in its documentation tells me they do parse all text and that does mean alt text.

Hope that helps! Maybe some other experts on WebPro can add to that.

Mitchell

[divicohen]

Thank you... you got me to notice that I totally forgot about alt for the links I only thought about the large images...
Thanks again!

[intelinside]

In addition to the ALT tags, you can also use TITLE tags with your URL to further help your SEO cause.

[encikbeliau]

can we put keyword to the ALT tags ?

example , my blog entry is about auto parts , then i use ALT tags like this ' toyota camry 2009 auto parts '

[divicohen]

I think that YES, you can use your keywords... what "innominds" meant was don't spam it with 100 keywords as a alt text...

[azeemi]

ALt tag text or keywords in alt tag related to images are the best solution to increase your images search. Search engines and bot understand images with alt tag keywords.

[Janna122003]

Hello,
Should I input Alt text? would it help rankings? I have placed some images with text and some without... should I bother adding alt text to the rest of them?
Thanks


If your site has an image it would be better to put alt attribute on images. But make sure that the keywords is also related with the images.

[mayankxx]

Thankx dear ,
Last time I have no idea for this but I know that .
Thankx

[explorador]

Use alt on images, also use the title attribute. Yes, it helps both for accessibility and for SEO

[Webnauts]

Many webmasters and inexperienced or unethical SEOs abuse the use of this attribute, trying to stuff it with keywords, hoping to achieve a certain keyword density, which is not as relevant for rankings now as it once was. Do you use the Alt Attributes with care?

I wrote an article about images optimization for users (including people with disabilities) and search engines:

Alt Attribute & Image Search Engine Optimization - SEO Workers (http://www.seoworkers.com/seo-articles-tutorials/alt-attribute.html)

There you will find out everything you need to know on that topic.

Good luck.

[shruchi nagar]

Hi Dear,

Using alt tag for image we usually use because Crawler of search engine could not recognize the images to read or to make read by crawler we need to give image alt tag. You can put relevant text to image alt text we will be treated as relevant website by Search engine and if our site will be relevant the it make effects the page rank.

[NCBD]

i dont know how much this helps anymore other than when the image is not there...

[phcarmaster]

Alt texts are good for visitors and on-page SEO. If you have them in your image once the image failed to load at least your visitor will know what image is that. On SEO, you can put meaningful keywords here that will help you rank faster.

[innominds]

Alt tags can be very useful for optimizing the images. If I'm not wrong, Google Images is sorted by alt and other parameters.

[loosapphire]

I have ever read an article by a Google engineer, he said what you should do is create an ALT [text] that is relevant to the picture, so it gives the user a good experience, including the visually impaired. The ALT text is indexed, but it is down graded in the algorithm.

In order words, we don't have to focus on ALT cause relevancy and ranking are determined by over 100 different factors. ALT text was just one piece of that pie, a sliver at that.

Hope this helps.

[Jenie0109]

spiders can crawl images. So if you want web spiders to crawl them, ALT tag is a ++ points

[ericajoieake]

Hello,
Should I input Alt text? would it help rankings? I have placed some images with text and some without... should I bother adding alt text to the rest of them?
Thanks
( Divine Moving and Storage NYC Movers Servicing New York City NY Brooklyn Manhattan NYC Moving Company (http://www.divinemoving.com) )


yes it can improve your rankings using those attribute, but alt is for anchor text and title is for images.

[mit]

giving alt text to the images in not a bad idea but alt text should be relevant with image. And Alt really helps when its hyperlinked with the relevant web page.

[marketraisecorp]

Alt texts are well and good if used in a proper way,else it will have a adverse effect on your rankings.The text should be chosen such that it is relevant to the image,else it going to be a spam.If an image provides no content at all or no information ,then we can specify it as alt="" .

[mannequin-lady]

Hello,
Should I input Alt text? would it help rankings? I have placed some images with text and some without... should I bother adding alt text to the rest of them?
Thanks
( Divine Moving and Storage NYC Movers Servicing New York City NY Brooklyn Manhattan NYC Moving Company (http://www.divinemoving.com) )

I'm sorry if this is off topic but I had to reply. Besides, I'm going to post my own comment in a separate post.

I'm homesick. I lived in Brooklyn all my life (and Queens and Long Island, etc). I'm so glad to "see" someone from New York! I love where I live now due to the weather and actual parking spots, but nothing beats the culture, the free activities and the unique mix of people and languages like NY. It took six years to see one Asian family move here. You'd think I lived in the outer regions of earth. :)

I'm going to post about alt text in images now.

[mannequin-lady]

Yes, its generally a good idea to put relevant text in alt attributes for all images, as well as title attributes for links and object elements. ... The reasons for using alts and titles is not crirtical to search results, as much as for other factors. These include the following:


Hi, Mitchell,

Thank you for this advice and for pointing out that alt text helps people with sight disabilities need this. I printed out what you wrote.

Steph

[mannequin-lady]

I wrote an article about images optimization for users (including people with disabilities) and search engines:

Alt Attribute & Image Search Engine Optimization - SEO Workers (http://www.seoworkers.com/seo-articles-tutorials/alt-attribute.html)

There you will find out everything you need to know on that topic.

Webnauts, I saw your article and printed it out. Thank you for all this information.

What prompted me to search for information on alt text is that I just read in a book printed in 2008 that says alt text for images should be very short.

Previously, I had read that they should be as descriptive as the text on the page for that image and/or actually describing the image.

Without having read your article yet, is there a quick answer to this?

Thank you,

Steph

[mannequin-lady]

I decided to provide an example:


For a page of images of fairies and baby fairies which of the below should I be using?

alt="fairies and baby fairy art prints"

or

alt="fairies art" (this one disappoints even me when I mouse over the image or see it before the image loads). IOW, I don't like very short alt tags. They don't seem helpful at all.

[weegillis]

Short answer? Read the article.

ALT text should be the best description in the shortest form. TITLE text can elaborate slightly more, but stick to the very point of the image. Use screen text to best describe your image and the spiders will see THAT, and choose it over either alt or title. Page content still receives the most weight.

"fairies art" is not very descriptive, and is likely too short to have much meaning. In this case, "fairies and baby fairy art prints" is a fuller description, and, providing it actually describes the picture, is adequate. Your title attribute might read, "Baby fairy art print, catalog number 2314."

If you are going to wrap the image in a link, be sure not to repeat the title text in the anchor tag. I may be wrong in suggesting this, but what I do is move the title attribute from the img tag, to the a tag, and try to make it relate to both the target and the image. John has other suggestions in his article.

[mannequin-lady]

Short answer? Read the article.

Hi, weegillis,

I read Webnauts (John's) article and have to read it a few more times.



ALT text should be the best description in the shortest form. TITLE text can elaborate slightly more, but stick to the very point of the image. Use screen text to best describe your image and the spiders will see THAT, and choose it over either alt or title. Page content still receives the most weight.

My understanding of terminology regarding images and text is that ALT text describes the specific image so that a description will appear whether or not the image does. The title, to me, is what the name of the image is, which will go above or below the image. I do not understand "Screen Text". I hope it's explained in the article I printed out.




"fairies art" is not very descriptive, and is likely too short to have much meaning. In this case, "fairies and baby fairy art prints" is a fuller description, and, providing it actually describes the picture, is adequate.

The book I recently read said to keep alt text very short, which seemed questionable to me. I never saw an alt tag that short before.


Your title attribute might read, "Baby fairy art print, catalog number 2314.".

Again, I don't understand the terminology. I'm going to "take a trip to wikipedia". :)

If what you mean by the title attribute is an image and what the customer will see on the page, such as: "baby fairy looking at reflection in a pond. Item 1234. $7.95 each", then I understand it. Otherwise, I don't.



If you are going to wrap the image in a link, be sure not to repeat the title text in the anchor tag. I may be wrong in suggesting this, but what I do is move the title attribute from the img tag, to the a tag, and try to make it relate to both the target and the image. John has other suggestions in his article.

I'm sorry if I'm missing some vital information here and will just leave and go read the article again, because now I'm lost. :confused:

If it isn't too much trouble, can you please include a specific example explaining your last paragraph? (Only if you want to.)

Thank you for your time!

Steph

[weegillis]

My apologies...


<img src="" alt="" width="" height="" title="" />


OR



<a href="" title=""><img src="" alt="" width="" height="" /></a>

[xuchunfeng1984]

you should use alt tag for your image. i think google spot cant read image very well.
so you should better use text which friendly to google.

[mannequin-lady]

<img src="" alt="" width="" height="" title="" />


OR



<a href="" title=""><img src="" alt="" width="" height="" /></a>


Thank you. Below is typical of the code I use for my products, so in other words, you're suggesting that I add the title tag to it. Correct?

So if I had a page of images, let me use this as an example even though this page (http://www.alldressforms.com/all-dressforms-halfscale-dressforms.html)only has one product:

Original code:

<img border="0" ALT="half scale miniature dress form 1:2 scale 1/2 halfscale" src="family-life-sized-dress-forms/halfscaledressform.jpg" align="left" width="147" height="350">

Editing the same code but adding the title to it, would be this?

<img border="0" ALT="half scale miniature dress form 1:2 scale 1/2 halfscale" src="family-life-sized-dress-forms/halfscaledressform.jpg" align="left" width="147" height="350" title="half scale dress form">

I wanted to see what the title tag would do and I don't see any difference on the page (http://www.alldressforms.com/all-dressforms-halfscale-dressforms.html). The second forward facing large dress form photo (in other words it is underneath the original image and html as I had it) is the one where I entered the above code with the title.

Am I missing something?

Thank you, weegillis,

Steph

[weegillis]

I wanted to see what the title tag would do and I don't see any difference... The second forward facing large dress form photo (in other words it is underneath the original image and html as I had it) is the one where I entered the above code with the title.
Depending which browser you are using you will see either the title attribute text on mouse over (Opera, Firefox, Safari, IE 8) or the alt attribute text in IE5, 5.5 ,6 and 7. You will need to verify this informaiton since I no longer have any older machines running earlier browsers.

You will want to examine the W3C specifications, as well as read up on WEBAIM (Web Accessibility in Motion, home of Cynthia Says) who's information contains clear guidelines for these attributes.

In the meantime, here is some experimental code to run in all your browsers, just to see for yourself what is happening in each one.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>ALT versus TITLE in IMG tags, with and without wrapping A tag</title>
<style type="text/css">
body {font-size: 100%;}
h2 {font: bold 80% Verdana,Geneva,sans-serif;}
#content li {font: normal 70% Arial,Helvetica,sans-serif;}
img {vertical-align: middle; display: inline;}
</style>

</head>
<body>
<h1><em>alt</em> and <em>title</em> attributes in IMG and A tags</h1>
<div id="content">
<h2>Stand alone image</h2>
<ol>
<li><img src="#" alt="ALT - image by itself with alt attribute" width="100" height="80"></li>
<li><img src="#" alt="" title="TITLE - image by itself with title attribute and null alt attribute" width="100" height="80"></li>
<li><img src="#" alt="ALT - image by itself with alt and title attributes" title="TITLE - image by itself with alt and title attributes" width="100" height="80"></li>
</ol>
<h2>Stand alone anchor</h2>
<ol>
<li><a href="#">Anchor with no title attribute</a><li>
<li><a href="#" title="TITLE - may be TITLE in HEAD of target page">Anchor with title attribute</a><li>
</ol>
<h2>Anchor wrapping an image</h2>
<ol>
<li><a href="#"><img src="#" alt="ALT - text only" width="100" height="80"></a> ALT - text only</li>
<li><a href="#"><img src="#" alt="" title="ALT is null, TITLE - text only" width="100" height="80"></a> ALT is null, TITLE - text only</li>
<li><a href="#" title="TITLE - on anchor ALT on IMG is null"><img src="#" alt="" width="100" height="80"></a> TITLE - on anchor ALT on IMG is null</li>
<li><a href="#" title="TITLE - on anchor ALT only on IMG tag"><img src="#" alt="ALT - text only" width="100" height="80"></a> TITLE - on anchor ALT only on IMG tag</li>
<li><a href="#" title="TITLE - on anchor ALT on IMG is null TITLE on IMG is text"><img src="#" alt="" title="TITLE - on IMG tag" width="100" height="80"></a> TITLE - on anchor ALT on IMG is null TITLE on IMG is text ("TITLE on IMG tag")</li>
<li><a href="#" title="TITLE - on anchor ALT on IMG is text TITLE on IMG is text"><img src="#" alt="ALT - on IMG tag" title="TITLE - on IMG tag" width="100" height="80"></a> TITLE - on anchor ALT on IMG is text ("ALT on IMG tag") TITLE on IMG is text ("TITLE on IMG tag")</li>
</ol>
</div>
</body>
</html>

[regmac]

you should use alt tag for your image. i think google spot cant read image very well.
so you should better use text which friendly to google.

Alt text on images can help build impressions for your pages. If the images are useful and was tag with appropriate and specific alt text, it can have the top place on the list of images available and can serve as the source of your site's traffic.

[mannequin-lady]

Thank you for the code to play with. That was a lot of work for you. Sorry. Also, I saved that website - WebAIM: Web Accessibility In Mind (http://www.webaim.org/)

Steph

[weegillis]

You're welcome. If you ran the test, you probably noticed that TITLE on IMG will override TITLE on A, so if you want your user to see the tool tip for the ANCHOR, don't use a TITLE attribute in the IMG tag.

Also, unlike alt="", which is a minimum, for things like skin graphics with no user information, title="" is a no-no. It makes no sense to have an empty TITLE attribute. Better to not have it at all. (I got caught in this error once, until someone pointed that out. You can avoid it, since now you know.)

[mannequin-lady]

... you probably noticed that TITLE on IMG will override TITLE on A, so if you want your user to see the tool tip for the ANCHOR, don't use a TITLE attribute in the IMG tag.

This is still confusing to me. (You can give up. I don't blame you!)


Also, unlike alt="", which is a minimum, for things like skin graphics with no user information, title="" is a no-no. It makes no sense to have an empty TITLE attribute. Better to not have it at all. (I got caught in this error once, until someone pointed that out. You can avoid it, since now you know.)

Do you mean the "TITLE - on anchor ALT on IMG is null"? (Sorry). :confused: (Just give up on me with this. I think that's best for you.)

I created the page (http://www.alldressforms.com/alt_versus_title_in_img_tags.html) just with the html you provided and am just mousing over the tiny "non-image" icons in both browsers.

FireFox 3.0.11 and IE 7.0.5730.13 gave me almost the same results except for the very first example.

Stand alone image number one shows the ALT text in IE but didn't show it in FF. That right there indicates I'd better do something fast with my images!

Thank you very much for trying! If and when I can straighten this out with just one of my images, I'll post it.

Steph

[weegillis]

If you run Cynthia Says, or any other accessibility tester, it will fail your page if any IMG tags do not have an alt attribute. While it is proper that every image have a relevant description, skin graphics and window dressing images have no user information and add no value to the page except visual effect. Since every IMG requires an ALT attribute to pass muster, we simply create an empty attribute (a NULL string) as in alt="".

As you may have noticed on the example page above (revised version upcoming), the ALT text appears within the image placeholder for all browsers, and in the mouse over tool tip of IE only.

Every user agent sees the text in alt and title attribute so it's really important that it makes sense for meaningful images, and says nothing for meaningless ones.

Empty values prevent meaningless text from getting into the fray. If it's just a picture of a sunset in the header for effect, alt="sunset over Old Woman Bay" would be meaningless on a page about dress forms. alt="" will satisfy the attribute requirement for this image, and it can be ignored. Now this image can be used in the header of any page without skewing the page's meaning or relevance.

Tool tips are supposed to be simple, but IE went and included alternate text, which was not supposed to be the case, and things got confusing. Everyone else got it right: title attribute text in the tool tip. Not confusing at all. (Needs verification.)

However, to make things right, IE 8 did make it so that title attribute text, if present, will display in the tool tip, and not alt attribute text (may not be the case in IE 7 or earlier). For every other browser, tool tip text, if you want it to appear on mouse over, must be in a title attribute. None of the other browsers display alt attribute text on mouse over, as far as I know.

A tool tip may be to inform, or it may be a call to action. Most browsers support this feature in roughly the same manner for images and anchors, but are 'spotty' in support of other elements in general. Since they are not intended to introduce new content to a page, they often repeat what is already in the page. I don't think they were ever created with SEO in mind, either, but the marketplace drove up their value for that purpose, didn't it?

Alternate text is not optional, as we well know. Tool tip text is. You can leave out the title attribute and still have valid (accessible) code. But what if we want information in the alt text value and no tool tip in IE? Here comes the dicey part, include an empty title attribute. Then you may alternate text away to your heart's content.

[mannequin-lady]

If you run Cynthia Says, or any other accessibility tester, it will fail your page if any IMG tags do not have an alt attribute.

I misunderstood this the first time and thought that Cynthia Says (http://www.webaim.org/resources/cynthiasays/)was for me to verify after I updated my image tags.


While it is proper that every image have a relevant description, skin graphics and window dressing images have no user information and add no value to the page except visual effect. Since every IMG requires an ALT attribute to pass muster, we simply create an empty attribute (a NULL string) as in alt="".

In my case, I don't use any images that are not product images to sell. I don't use any window dressings, so I think I can "get out of" doing this one!


As you may have noticed on the example page above (revised version upcoming), the ALT text appears within the image placeholder for all browsers, and in the mouse over tool tip of IE only.

Yes, I noticed it in IE 7 and FF 3. I installed and then removed IE 8 because it was causing the browser pages to, either, not load at all, or take a long time to load. I checked my firewall settings, etc and then reverted back to IE 7.


Every user agent sees the text in alt and title attribute so it's really important that it makes sense for meaningful images, and says nothing for meaningless ones.

That makes a lot of sense to me.


Empty values prevent meaningless text from getting into the fray. If it's just a picture of a sunset in the header for effect, alt="sunset over Old Woman Bay" would be meaningless on a page about dress forms. alt="" will satisfy the attribute requirement for this image, and it can be ignored. Now this image can be used in the header of any page without skewing the page's meaning or relevance.

This will be very helpful for people who use window dressings, etc. Thank you for explaining it.


Tool tips are supposed to be simple, but IE went and included alternate text, which was not supposed to be the case, and things got confusing. Everyone else got it right: title attribute text in the tool tip. Not confusing at all. (Needs verification.) .

I mainly viewed my site in IE for a long time while viewing awstats and watching the browsers being used to navigate my site. It used to be 95% but now it's much lower and FF is catching up ... fast! Nice!


However, to make things right, IE 8 did make it so that title attribute text, if present, will display in the tool tip, and not alt attribute text (may not be the case in IE 7 or earlier). For every other browser, tool tip text, if you want it to appear on mouse over, must be in a title attribute. None of the other browsers display alt attribute text on mouse over, as far as I know.

Looks like I'll have to install IE 8 again. I'll do it on the PC that I don't use for website updating.



A tool tip may be to inform, or it may be a call to action. Most browsers support this feature in roughly the same manner for images and anchors, but are 'spotty' in support of other elements in general. Since they are not intended to introduce new content to a page, they often repeat what is already in the page. I don't think they were ever created with SEO in mind, either, but the marketplace drove up their value for that purpose, didn't it?

I think I need an updated example. I'm getting there, but I don't expect you to spend your life teaching me these things, although I know that others are reading this post and, hopefully, will apply what they've learned from your lessons.


Alternate text is not optional, as we well know. Tool tip text is. You can leave out the title attribute and still have valid (accessible) code. But what if we want information in the alt text value and no tool tip in IE? Here comes the dicey part, include an empty title attribute. Then you may alternate text away to your heart's content.

The bottom line, in my instance, sounds like I continue using ALT text for all my images but add a tool tip that says, something like, "buy this now" or a reason why they should buy it.

I took this code from your example and believe it's what I'm supposed to use:

<a href="#" title="TITLE - on anchor ALT on IMG is text TITLE on IMG is text"><img src="#" alt="ALT - on IMG tag" title="TITLE - on IMG tag" width="100" height="80"></a> TITLE - on anchor ALT on IMG is text ("ALT on IMG tag") TITLE on IMG is text ("TITLE on IMG tag")

Am I correct?

Thanks so much!
Steph

[mannequin-lady]

The ALT= attribute text just acts like text on the rest of the page. You can use it to describe an image and help that image's relevance, and you can use it to increase targeted keyword frequency in page copy, and you can use it as anchor text to pass value to another page, and you can use it to increase the variety of text on your page.


Hi, Jamie,

That's a very nice summation. I have been doing this on my sites for a long time, but there are some questions about accessibility and I want to get it straightened out, once and for all.

Welcome to WPW! :)

Steph

[weegillis]

As promised, here is the revised browser test page:

Thread: http://www.webproworld.com/webmaster-resources-discussion-forum/86049-alt-title-attributes-img-tags.html#post444953

[mannequin-lady]

As promised, here is the revised browser test page:

Thread: http://www.webproworld.com/webmaster-resources-discussion-forum/86049-alt-title-attributes-img-tags.html#post444953

Thank you!!!