Michelle wrote in the comments on the Alt Images post:
Very informative post, Kirsty. One question: is there a place to learn how to create alt tags? The article is clear about what they are, but not how to make them. For those of us who are coding-challenged (or coding-averse, more accurately!), this would be vitally valuable information! Thanks.
No problem, Michelle, I’ll have a go at explaining it.
I’ll use this image as an example:
Kirsty Hall – art, photograph of Broken Cup Handle With Shadows
It’s actually pretty simple and you don’t need to be scared of it. OK, if you look at the code on your linked image, you’ll see something like this:
initial code here=”tt-flickr” href=”big long string of code”> img class=”tt-flickr” src=”a different bit long string of code”
width=”500″ height=”305″ alt=”Broken Handle 01″ /> closing code here
Please note, I’ve replaced the actual code with the helpful words ‘big long string of code’ and ‘initial code’ and ‘closing code’, so that we can see the code instead of just getting the picture again (working out which bits to change took me quite a while, since I’m pretty code impaired myself!) The code may also be in a slightly different order depending on how you’ve linked the photo. However, the only bit you’re interested in is the bit that says, alt=”whatever” /> and that will always appear somewhere towards the end.
In this case it originally said alt=”Broken Handle 01″ />, which was just the title of the image in Flickr. Now Broken Handle 01 isn’t very informative, it doesn’t give you my name or much about the image, so I changed it to: alt=”Kirsty Hall – Photograph of Broken Cup Handle With Shadows” />
Basically, whatever you put inside the two sets of quote marks between the = sign and the /> code will be what Google and the other search engines read as the alternative text for the photo.
If any of you are more technically minded than me and are smacking yourself on the forehead and yelling ‘dammit, that’s completely wrong’, then please do get in touch and I’ll change it but I’m 99% sure that this is right.
Making that text searchable and relevant is how your work winds up in Google Images so, you should be adding your name and keywords that are appropriate to that particular work, i.e. ‘oil painting’, ‘landscape’, ‘sculpture made from pins’, etc. Apparently using keywords in alt tags can boost your general Google results too, although I’m not too sure how (magic Google dust sprinkled by the Google fairies maybe?)
Don’t restrict yourself to using alt text just as a promotional technique though. You should also make sure that your text is clear and descriptive to make your site or blog more accessible to disabled internet users. Text browsers can’t detect images but can detect alt tags and will translate them into spoken text for visually impaired web users. People in countries with poor web access may also have their browsers set to text only and they’ll see little written blocks of text instead of your images. Bear this in mind when you’re writing your tags. This article has more details on the level of helpful descriptiveness you should be aiming at.
It’s a shame that Flickr seems to turn the photo title into the alt text since I can’t quite bring myself to label all my Flickr photos with my name (I think it would look way too pushy, weird and tacky). Manually changing the alt text when I post images over here seems to be the only solution right now but I will do a bit of research over on Flickr to see if there’s some wonderful way to add hidden alt text to the images without putting it in the titles.
However, if you’re uploading images directly into your WordPress site, rather than linking from Flickr, then you can set your alt text very easily. Simply go to the section where you upload images and type the description you want in the box that says ‘Title’. I imagine that other blogging software probably has similar options but fortunately changing the code isn’t too complicated – just make sure you don’t accidentally erase those all important little quote marks.
I hope this makes things a little clearer, Michelle. Oh, and if it makes you feel any better about the subject, I’ve just this minute realised that I have 235 envelope images to change over at The Diary Project. Someone shoot me now!
EDIT: on the advice of Gyrus, I’ve changed the term ‘alt tag’ to ‘alt text’ as the later is apparently less confusing and more accurate.
Gyrus also points out the following:
Sometimes you might not get the alt text come up when you hover the mouse over an image (it doesn’t come up on Firefox, for instance). Properly, the alt attribute value is “alternative” text, i.e. to use if you can’t see the image (either it’s a text browser, images are turned off, or it’s a speech browser reading the text out). That little “tooltip” that pops up, if it’s there at all, is technically supposed to come from a “title” attribute on the img tag. The title is optional, though. Just thought I’d mention this in case anyone gets confused on Firefox with the alt text not popping up when you mouse over it.
Get more help
If you’d like more information about building your online presence, check out the free resources section.
I am also available for online consulting if you need one-on-one help.
Tweet Michelle wrote in the comments on the Alt Images post: Very informative post, Kirsty. One question: is there a place to learn how to create alt tags? The article...
