ALT attributes, Title attributes and File Names are your friends.
They are the most important features when you as a photographer want to do Image Search Optimisation (ISO) for your webpages or site.
You want future clients to not only find your site for your chosen keywords, but also have your photos found when someone searches looking to buy images.
But let me start by saying, that I think we should always try to make a site search engine ready and always keep the end user in mind, not the search engines or webcrawlers that crawl your site. And before you go checking my code, just remember: Do as I say, not as I do! Okay, on with the tutorial.
The Alternative text
A short rundown of each
ALT tag – Should be a short alternative description of the image.
Title tag – Specifies extra information about image. Shows up when user hovers over the image.
Filename – Instead of _BPL_2453.JPG write a descriptive filename like: Old-guy-holding-gun.jpg.
There are three reason for the use of ALT tags/attributes (alternative text tag).
Helping people with disabilities
The real reason for the use of ALT tags is to allow text based browsers used by people who are partial or totally blind, or people suffering from dyslexia to have the ALT tags read to them via textreader browsers.
This is still used to this day and they rely on accurate descriptions of pictures in order to make full sense of the web page they are one. So don't forget them.
The ALT tag is not shown in normal browser except when the image doesn't load. The browser only shows the Title tag.
Pageload
There are still people surfing the web using dial-ups at 14.4-28.8k (that's 0.014 Megabit).
So for people to avoid having to wait for ever for a page to load, many turn showing images off and read the ALT tags to decide if they want to load the image or not.
Helping webcrawlers read our pages
And last but not least: search engines' webcrawlers can't read images. They rely heavily on the ALT tag to tell them what the image is about and what's going on in the photo. They also read the text surrounding the images, so this is equally important.
Okay, so this is what the code looks like
To the left of it you will find the image's source – the path to the image on the web -, in the middle is the ALT tag image description and to the right is the Title tag.
How to use the ALT tag
Remember users with disabilities have the ALT text read out loud, so make sure the sentence is descriptive and makes sense and isn't stuffed with keywords.
Although there is no actual limit on how many words you can write to the ALT tag, putting too many words and especially repeating keywords in the ALT tag will sound the Black Hat SEO sirens at Google et al and you could be punished.
Keep it around five to ten words maximum.
My own medicine
A short descriptive ten word maximum ALT tag for the images to the right could be:
Old man holds lit cigarette in one hand while holding holstered pistol in the other.
I know this can bring all kinds of images to mind, but it's better than having read aloud image. The image caption and surrounding content is where you want to elaborate on what more is going on in the photo.
Only use ALT tags for images you want to be descriptive about. For images like background images, spacers, twirling globes etc. use alt=”” and preferably save them as .gif whenever possible.
NOTE: Note that for those who like their sites to be XHTML-compliant, this will break that – XHTML requires that ALL images have ALT tags. Having any images without ALT tags may also break compliance with usability standards.
You can also use the image to link to related articles. To do so use this code:
How to use ALT tags, Title Tags and Filenames in images
ALT tag
– ALT tags are read by text browsers.
– Not shown in browser except when image doesn't load.
– Only use ALT Tags to tag important images on your web pages.
– Five to ten word maximum.
– Do not stuff ALT tags with unrelated or repetitive keywords (looks like spam).
– For Unimportant imagery like backgrounds, spacer gifs, etc use alt=””.
– ALT tags should be short sentences. Not a staccato list of comma separated keywords.
– ALT tags weigh heavier in search engines than Title tags.
Title tags
– Use Title tags to give the image a more descriptive title.
– Title tag is shown when you hover over the image.
– 128 characters maximum, but you might want to keep it shorter.
– Don't over-stuff with keywords.
Filenames
– It is advised to use hyphens (-) instead of underscores (_). And it's easier to write them!
– Be descriptive.
– Remove “stop-word” (a, to, from, he, his, her etc.)
– No longer than 32 characters.
The Title attribute
Google reads the title tag so it equally important that you are descriptive and you can write more text. 128 characters to be precise. Title tags are shown when you hover over the image with the mouse' cursor.
The File Name
Use short and descriptive names.
The jury is still out on whether to use hyphens (-) or underscore (_). Google is reported to treat underscored words as one word, so to play it safe you might want to stick to hyphens which are treated as a word separator.
Filesize and folderstructure
I've read that filesize and the name of the imagefolder are important. Filesize could definitely have importance because webcrawlers like fast pageloads, but do you really want to show badly jpg'ed images to your viewers or future clients. No!
Besides the images on this site are huge and they show up in Google's image search. A workaround might be some kind of javascript or CSS hack, but that's maybe overdoing it.
You should also be aware of the fact that using Photoshop Imageready to export or save images for the web will strip all metadata from the image leaving it orphaned and without any contact details or copyright information.
Regarding folderstructure (img src:"images/india/animals/tigers/Royal-Bengal-tiger.jpg")
I do not think that it has any effect. As long as you don't block webcrawlers via your robots.txt file you'll be fine. Most automated cms like wordpress upload images to folders based on month, so you'll have the hassle of creating specific folders.
Other things to take into consideration
– Pagetitle of the webpage
– Supply smaller thumbnails approx. 150×150 px. Good for socialmedia like Digg and facebook who often scan the page for small images to put along side your link.