ALT images

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

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

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.

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