Sensible Open Source

SEO : Image Tips

« H E email
posted 10 February 2007, Saturday

Properly Using the HTML IMG and its associated elements can increase your website, blog or third party listings in terms of search engine placement. 

The IMG tag  <IMG src="Product001.gif" width="125" height="265>  Should always include the ALT parameter and take advantage of the TITLE element to offer additional descriptions and keywords.

For Example

The IMG with ALT and Title elements

 

<IMG src="Product001.gif" width="125" height="265
ALT="Crystal Lead Decanter"
TITLE="This is shown when a mouse hover occurs when an image is hyperlinked">    

 

The ALT tag can be employed to hold keywords which search engines use to associate the image and a short descripition.  Additionally adding the TITLE element provides a secondary description and provides label for a mouse hover when the image employs a hyperlink.  Both elements are consumed and put into context for relevance by most search engines.  Using these elements for your site image is another relevancy boost for your site.

Below we Have Ms Dewey about to chug a beer.  Now the LEFT image has no ALT or TITLE TAG, and this is a missed opportunity for a search engine to consume this image and associate, properly the intended descriptions.  It is far better to use the ALT and TITLE tags to implement your site's intention.
 
As the only reference a search has to an image is the name of the file, in the case below "mdbeer.png", in many other cases its DSC###.jpg which simply provides no distinction. 
 
In the RIGHT image we have the same image with an ALT tag set to "MS DEWEY CHUGS A BEER" additionaly the Title describes the intention of the image "Ms Dewey Prepares To Chug a Beer".  As you can see, the Keywords are MS DEWEY and BUDWEISER and the image description is "Ms Dewey Chugs a BEER" and "Ms Dewey Prepares To Chug a Beer", the latter is the label of a hover.
 
This additional descriptions helps your site relevance as well as the image.  So. upon an image search, in this case, looking for Ms Dewey, Beer Chug you have an additional avenue of harvest.
 
SEO, Beer, MS DEWEY CHUGS A BEER
 NO ALT or TITLE TAG

ALT="MS DEWEY, Budweiser, Ms Dewey Chugs a BEER"

TITLE="Ms Dewey Prepares To Chug a Beer" 

In any proper SEARCH ENGINE when doing a typical WEB search this phrase will produce a result based on "MS DEWEY CHUGS A BEER" and "Ms DeweyPrepares To Chug a Beer".  With no further additional work, an IMAGE search applie  relevancy to the same phrase associating the ALT and TITLE tages descriptions.  This is a better practice of the IMG tag. 

Furthermore, ifa browser shuts off images the ALT attribute as it offers information about the image.  When hovering over an image that has a TITLE attribute link (as above) the description is displayed to the end user.  This display can be used in many creative ways displaying prices, discounts, instructions.  Be mindful, this description should only be a few words but it should be pertinent to the image, product or main idead of the page and what it is trying to communicate. 

NOTE: The TITLE hover description is only displayed when the image is wrapped with a link.

In Short Here are the tips to use ALT and TITLE:

  1. You can add an ALT element in any IMG tag
  2. Insure the tag is brief, to the point and describes the image 
  3. Use Keyword phrases that you may use in the page the image resides, title of  the pag, meta-tag of the page
  4. Limit your Keywords per ALT tag to 1 to 3 words
  5. Description of the image.  Do not just put keywords Example Below:
    1. (do not) ALT="Keyword1 Keyword2"
    2. (CORRECT) ALT="Keyword1 Keyword2 Decription of item   
  6. You can add the TITLE element to any IMG tag
  7. Insure the TITLE's description is meaningful and describes something useful to the user when the a hyperlink is deployed
  8. The Title element can have a differentdescription than the ALT element for a more pertitent detail

 

tags:      

links: digg this    del.icio.us    technorati    reddit


comments