The Only World-Standard SEO Software

Sizzle Up Your Webpages: 7 Ways to Draw a Heat Map for Your Site

| Posted in category Website Usability

In general, a"heat map" is designed to give graphical representation to statistical data. It has different values displayed as colors on a scale from red to blue, red being the largest value (hot), blue being the smallest one (cold). Although, another color scheme may be used to represent values.

In SEO, heat maps are charts that pinpoint popular areas on your webpage. These can be:

  • Click maps that indicate what parts of your webpage users click the most;
  • Eye-tracking charts that show what items on your page grab visitors' attention within the first seconds of viewing.

To create an eye-tracking chart, one needs expensive specialized equipment and immense human resources, thus, most webmasters use click density maps to identify popular areas on their websites.

All in all, heat maps help you locate hot spots on a webpage to stick an affiliate link, put up a banner or break your special offer. Also, click maps are normally quite precise and may provide valuable insight, for example - what particular word in your anchor text people normally click on, what part of your body text or image people mistake for a link, etc. In this post, we will dwell on some general rules that apply to heat maps and how you can create a heat map for your own website.

1. The Google AdSense heat map

This is a classical example of a heat map that indicates traditional sweet spots on an average webpage:

It’s been used by Google to prompt users where it’s best to place their AdSense ads. The general rule of thumb that applies here is:

  • Visitors pay more attention to the area above the fold than the area below it (though it’s pretty obvious 😉
  • An ad gets more clicks if placed near navigation buttons or some prime content
  • Also, a good place to stick an ad is immediately after an article, since very often people scroll down to see how long the article is or what comes next.

2. The F-pattern theory

An eye-tracking study conducted by Jacob Nielsen revealed the prevailing reading pattern that most people follow during the first seconds of looking through a webpage. The pattern, when represented in graphics, resembles the letter "F", therefore the theory has been called the F-pattern theory.

The experiment involved 232 users who were asked to look through thousands of webpages. The findings indicate that, at first, users normally read across the upper part of the page (the top bar of the letter F), then they move a bit down and read across the area that’s slightly shorter than the first stretch they looked across (the middle bar of the letter F). And, finally, they scan the left side of the page in a downward movement (the leg of the letter F).

3. The "golden triangle"

The "golden triangle" is an SEO term that applies to the most prominent area in SERPs. It has been discovered that the triangle-shaped upper left part of the average search results page attracts the most attention and receives the biggest number of clicks.

This kind of explains why paid ads do not always work. A friend of mine owns a transport company, and, about a year ago, they decided to go techie and promote their website online. At first they put up a pay-per-click (PPC) ad on their target search engine. It did attract visitors, but not as many as they would like to get. Besides, they had to pay for every single click their ad received.

So, my friend decided to change the strategy and strive for higher positions in SERPs. After a while they reached position 3 in their target search engine and started getting floods of traffic. How is this possible? One of the possible answers is: their paid ad had been sitting in the wrong place! Search engines post paid ads in different locations. Some place them within the golden triangle area, some in the much "cooler" area in the upper right corner of the page. So, it’s good to consider this, while purchasing a PPC ad.

4. Crazy Egg click maps

Crazy Egg is click-tracking SEO software that helps locate areas on a webpage that get clicked on the most. Besides, it provides a wide range of other analytical data. The program also tells you:

  • The screen width your visitors have
  • The operating system installed on their computers
  • The browser they are using
  • The search terms they used to land on your page
  • Top 15 referrers

Besides, you can export data and generate reports, which is really awesome.

5. Click Density heat maps

Click Density is more than regular click-mapping equipment - it’s a full usability toolkit. In addition to tracking what parts of your webpage get the most clicks, the tool also shows what screen width, OS, and browser your visitors have. Additional features:

  • Supports multiple URLs
  • The "follow targets" feature that allows you to continue tracking clicks to particular items even if you relocate content on your webpage
  • Provides fully customizable reports

6. Feng-GUI heat maps

Feng-GUI software is based on the knowledge of typical human attention attractors and prevalent viewing behavior. Your webpage is analyzed according to a certain algorithm, which reveals popular areas in your layout. Feng-GUI heat maps indicate what places on your page are most likely to grab visitor’s attention.

feng gui heat mapBesides, Feng-GUI software also generates a scan path report that shows where users are likely to look first, second, third, etc.

7. The Corunet definitive heat map

How does click-tracking software actually work? An HTML code gets embedded into the code of your webpage, which allows you to track clicks. There are certain online resources for technically savvy webmasters that provide code and guidelines on how to enable click-tracking on your website. For example, one of such do-it-yourself heat map solutions is offered by Corunet, a Spanish web consulting agency. In case you think it could be just the right idea for your website - here is the link .

Ok, these were the 7 ways to draw a heat map for your website.  As you see, you can consult those maps while deciding where to better place a link, a banner, a special offer or your most important information. Some heat maps also tell you what items on your website people will look at first, second, third and so on.

If you’ve used click-tracking software or know other ways to make use of heat maps - share you experiences!

back to SEO blog