Internet Marketing Services

<area> tag is not yet deprecated, but also it’s not very used nowadays. Probably, in the ’90s it made sense to make use of it, since CSS or Flash was not there. As per 2010, it is more common to use Flash (which is a still a mistake by the way, because search engines are struggling with such files) or a combination of search engine friendly JavaScript and CSS, to create image maps that are search engine friendly. Today’s article is about AREA and MAP tags.

If you think about it, maps inside images can make sense. Did you see any  apparel website that display a model image and you can mouse over and click on the hat, the pants or any other cloth in that image and get to the clicked product description page? Or,  look at the sample below, where at mouse over the blue plus sign you get the details on the product:

Map Area On The Blue Plus Sign

Map Area at Mouse Over

Definition and Usage

The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas). The area element is always nested inside a MAP tag.

Note: The usemap attribute in the <img> tag is associated with the map element’s name attribute, and creates a relationship between the image and the map.

For more information on optional and standard attributes of <area> tag please visit the HTML <area> tag page (http://www.w3schools.com/tags/tag_area.asp).

Example:

<img src =”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap =”#planetmap” />

<map name=”planetmap”>

<area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun” />

<area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury” />

<area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus” />

</map>

What designers should know about the usage of <area> tag for SEO

• needless to say, you should alter the look and feel of this tag with CSS and preferably use a combination of JavaScript and CSS to create nice, visually tool tips area maps
• if you have to choose how to implement area maps, choose in this order: plain HTML and CSS, friendly JavaScripts with CSS and lastly, Flash
• every area tag should have an alt attribute, so put it there even if empty (alt=”"). Better, you can add something into the alt text, a reminder your  programmer and/seo colleague, i.e. alt=”SEO/IT please insert descriptive keywords for this image”

What SEO professionals should know about the <area> tag

• Every <img> tag and <area> tag for an image map should contain an alt attribute that describes the image in 150 characters or fewer. The alt text cannot start with the word “copyright” or with the copyright symbol [© or (c)]. – source
• Place relevant text near the beginning of the alt attribute to enable search engines to better correlate the keywords with the image. Consider using keywords that are descriptive of and relevant to the image. Shorter alt attribute text can improve the relevance ranking of a page. - source
• Once the pages that contain this tag are up into the development environment or live, double check that all <area> and <img> tags have an alt tag. This is important for image results optimization. If for some reasons (you’re not a spammer aren’t you? :) ) you have map area that doesn’t need an alt text (i.e. a spacer image, or a rounded corner) leave the alt text empty (alt=”")
• to provide text alternatives that serve the same purpose as the selectable regions of an image map

What programmers should know about the implementation of the <area> tag

• try to avoid flash implementation of area maps. If absolutely necessary, use external XML or text files. XML offers search engines a structured and semantic format for indexing site content – read more here
• integrating <area> tag with a search engine friendly version of JavaScript and CSS will allow for more flexibility to the copywriter (he can add extra description for the map area in a tool tip area – for reference see expanded area on the first image of this post
• if it comes to implementation costs, you can opt in for flash, as long as it’s only an image, and not an entire site to be built based on flash

What copywriters should know about the <area> tag

• consider using keywords that are descriptive and relevant to the image. Excessive alt attribute text may cause search engines to flag the page for review to make sure it doesn’t use deceptive techniques to artificially increase its ranking. - source
• don’t go over 150 characters as you can get into penalties
• the alternate text for the area tag is not visible in browsers, unless users will mouse over the tag for longer than 2 seconds
• if you have a particular AdWords ad that worked well in terms of PPC and since ads are usually lower than 25 chars for the title, it may help with the CTR on the image also

Are you a web designer, copywriter, programmer or search engine optimizer and have a suggestion about this tag and how can be used for better rankings in search engines? Please leave a comment or contact the author for suggestions.

Pitstop Media offers ROI focused SEO services. If you need a SEO company to help you rank #1 please contact us for a free, no obligation quote. We’ve helped companies rank first on Google in short periods of time, for highly competitive terms.