Smashing Magazine we smash you with the information that will make your life easier. really.

Tag Clouds Gallery: Examples And Good Practices

By Smashing Editorial, November 7th, 2007 in Design Showcase | 190 Comments | Forum

Compared to conventional navigation patterns tag clouds don’t necessarily offer a more convenient and intuitive navigation. However, used properly, they can provide visitors with an instant illustration of the main topics, giving a very specific and precise orientation of the site’s content. Since human beings tend to think in concepts and models, it’s easier to get an idea of presented content if the main concepts are given straight away — in digestible pieces, and prioritized by their weight. In fact, the main advantage of tag clouds lies in their ability to highlight the most important or/and popular subjects dynamically which is not the case in conventional navigation menus.

Tag clouds offer a quite interesting approach for site navigation; although the technique is sometimes considered to be an “alternative”, it shouldn’t replace the “common” navigation but support it giving users additional clues about the content of the site. Due to their “cloudy” form the design of tag clouds sets them apart from other design elements on a page. And although designers don’t really have that much choice in designing them, they still find their ways to break through the bounds of creativity and come up with some unusual approaches and solutions.

This article offers some selected examples of tag clouds, its shortcomings and also some suggestions for tagging data and links in a more profound and effective way.

Types of Tag Clouds

There is a variety of ways to implement tag clouds. Some methods are more popular than the other ones. Most clouds are primarily sorted alphabetically.

Tags are sorted alphabetically. The most important or frequent terms are highlighted via an appropriate font size.
Tags are sorted alphabetically. All terms have the same font size and weight. More important terms are highlighted with a font color or a background color.
Tags are sorted according to their importance or frequency. Both font-size and colors can be used to emphasize the importance of terms.
Tags aren’t sorted at all. Font-size, font-weight and colors in use.
Tags are sorted according to their similarity. Similar terms appear as neighbours next to each other. A variety of visual formatting can be applied.

Your Tags Are Not My Tags

At the first glance tagging might seem like a simple task: you have a data, you describe it, find appropriate keywords, add the labels, done. However, although the tagging itself is extremely powerful, it also has some shortcomings. The problem is that the natural language we use is ambiguous. While labeling data with tags we make use of our personal understanding of this data and these tags. However, keywords are usually not specific enough.

For instance, it’s not clear whether the tag “design” is related to graphic design, web design, software design or the design of hardware architecture. Most words have a number of different meanings which is why the quality of tag clouds quickly gets messy and useless once you label data with too many common tags.

These links are tagged with the word ‘design’ on Del.icio.us. Do you recognize what is what?

To keep a clean and hierarchical structure of tag clouds you need to follow some simple guidelines. Concepts can be described in a variety of ways, but to give the concept the weight it deserves, you need to group similar labels and choose a single tag instead.

Find the right balance.
If you work in team make sure you have a very precise and unambiguous understanding of how tags are given and how the hierarchy of tags is built. Do you want to be more abstract or more concrete? The more concrete tags you have, the larger your tag clouds become and the less topics are given a higher priority. Do you want to label a set of icons as “icon set”, “icon kit”, “icon” or something more abstract like “freebie”?
Keep your tags clean.
Make sure you’ve agreed upon the choice of singular/plural and lowercase/uppercase, avoid mistakes and general terms.

Tag Index Instead Of Tag Clouds

An interesting tendency we’ve been observing recently is the use of tag indexes instead of tag clouds. In some cases tag clouds might be not the best solution for precise content presentation. For instance, if visitors are looking for some specific topic they would prefer a search engine rather than “weighting” proportions of the tags. In such situations a “reference index” of tags comes in handy. In fact, it’s used more and more often — in indexes the tags are sorted alphabetically.

Screenshot Tagcloud

Font-size-weighted Tag Clouds

In many cases tag clouds are placed within a sidebar on the left or the right side of the page; therefore they usually don’t have much site area to fill. Consequently, enormous fonts are used sparingly.

Colorful Tag Clouds

Instead of large font sizes designers tend to use colors. The weight of the tags isn’t only determined by the font-size, but also by the color it has. The more contrast exists between the color of the tag and the background, the more active the tag is. “Passive” tags usually have colors more similar to the background color — they have to remain in the background.

Caution: the more colors are used, the more irritating tag clouds are. Visitors have to be able to gain an immediate understanding of how tag weights are distributed; a variety of colors doesn’t provide any helpful information. What do the used colors stand for? Is green more important than blue? In most cases 2-3 colors should be the maximal number of colors used in a tag cloud.

Form Of Tags in Clouds

Most designers tend to experiment with font-sizes and colors, but you can experiment with background of tags as well. The background has to support the tag it stands for. “Pseudo”-buttons are common.

Shops with Tagclouds

Apparently, online-shops seem to have discovered the usefulness of tag clouds. The design is, however, not always perfect.

Complete Tagpages

Since tag clouds tend to use large areas of layouts, sometimes they are moved to a single page. There they have much space and designers can risk experiments they wouldn’t risk in a sidebar. Such design solutions are quite rare.

Classics: Flickr and del.icio.us

Tags on news.com.

Advertisement with Tags. Sounds more like spam, actually.

Looking For More Ideas?

Tagclouds Photoset offers a number of tag clouds screenshots as a Flickr stream.
Understanding Tag Clouds explains the theory behind tag clouds, their use in practice and displays some examples.
Collection of tools / sites to create tag clouds

Published in Design Showcase, November 7th, 2007
Tags: generators, navigation, startpages, tagclouds, tags

1.

Kevin (November 7th, 2007, 1:07 am)

Like always, a nice post.
2.

Patrick Algrim (November 7th, 2007, 1:17 am)

Very nice, I have always liked tagclouds on some websites. But on others they just don’t work. I like your resource list though. I think we have similar sites! :)
3.

Coen Jacobs (November 7th, 2007, 1:21 am)

For my weblogs, the choice I made was to remove all of the Tag Clouds, since they don’t represent the visitors. A Tag Cloud only describes the tags with the most posted linked to it. I prefer a ‘Most popular posts widget’ or something similar! :)
4.

Carlos Leopoldo (November 7th, 2007, 1:41 am)

@Coen Jacobs I really like tag clouds it represents a most easy way to find something in the site.
5.

Burst Labs (November 7th, 2007, 1:43 am)

Our Link [www.burstlabs.com] is set to randomize the data on each visit, allowing our clients to (hopefully) discover new music by finding new relationships between different songs and instrumental tracks.
6.

Burst Labs (November 7th, 2007, 1:45 am)

That “link’” above should read :

“tag cloud for music discovery”
7.

Andrew Benton (November 7th, 2007, 2:09 am)

Very nice collection, great variety and some looked much better in the article than they do on the actual websites :P
8.

Blogger from Sibir (November 7th, 2007, 2:35 am)

Very thank you! Very-very nice. Now i know, how do my Tag Clouds.
9.

MMMeeja (November 7th, 2007, 3:54 am)

Another great article, the most relevant quote being “your tags are not my tags”.

I love my del.icio.us tag cloud, but it’s only really useful for me, because I have my own tagging practices. When many people get to tag similar items the results are necessarily fuzzy, which is great for searching but not so good represented as a tag cloud.

So, I’d argue that tag clouds are good for customised content but pointless for general navigation.
10.

Paul (November 7th, 2007, 4:16 am)

Tag clouds are ugly. Please stop using them. Thank you, and have a nice day.
11.

Agust Gudbjornsson (November 7th, 2007, 4:51 am)

Where is the “famous” Tag A Cloud :o)

Link [tagacloud.com]
12.

Billy Halsey (November 7th, 2007, 6:34 am)

Great roundup of tag clouds. Along the lines of adding backgrounds to tags, I’ve used the CSS :before and :after pseudo classes to style my WordPress tag cloud. Take a look at Link [paxoo.com] if you’d like to see it in use. Of course, not all browsers will support it, but my readership (per Google Analytics) uses browsers that do. I also wrote a WP plugin to break up those nonbreaking spaces in the tag cloud so that it will right-justify appropriately.
13.

Wallace (November 7th, 2007, 8:34 am)

nice roundup thanks.
14.

blogmunch (November 7th, 2007, 9:09 am)

There are some really nice tag clouds on show on this post. Great roundup as usual.

I believed a well design tag cloud (good color mix and font size ratio) can make a difference conveying information across. But nowadays, most tag clouds are ugly, like the del.icio.us cloud.
15.

Yogi (November 7th, 2007, 9:23 am)

Great tag clouds. Will be a good inspiration for me.
16.

Fabio Sasso (November 7th, 2007, 10:14 am)

Thanks a lot for showing my blog’s tag cloud here…. I really like your lists
17.

Vikas Sah (November 7th, 2007, 11:02 am)

Thanks for mentioning Link [www.technacular.com]
18.

violinista (November 7th, 2007, 4:59 pm)

Thanks a lot, very useful, as always.

Cheers
19.

Imran (November 7th, 2007, 5:48 pm)

Great ideas. I say that if tags clouds can be designed well, then they should be used liberally.

Wordpress recently released a version of their blogging software with better (native) support for tags. But sadly, there’s few easy ways to integrate them into the blog itself, barring the use of widgets.

It’d be great to see some Web 2.0 tagging generators that would allow me to more easily use Wordpress tags without the need for a widgetized site.
20.

Matt (November 7th, 2007, 6:11 pm)

This is brilliant, just in the process of looking into tag clouds for my blog!
21.

Rasmus Luckow-Nielsen (November 7th, 2007, 6:48 pm)

Hi, we have a tag cloud that’s a litte different.
It’s our main navigation of our Copenhagen cityguide, and the special thing is, that you can combine the tags by pressing on different words, e.g. “Italian + Cheap + City” and then retrieve the results (places where all the tags has been applied).
I haven’t seen this approach anywhere else on the internet?

See for yourself on Link [mitkbh.dk] (it’s in Danish and means “My Copenhagen”)
22.

Ben (November 7th, 2007, 8:15 pm)

@ Rasmus Luckow-Nielsen

This looks great, but you could do with a way of clearing all your selections in one go, without having to click them all off again individually
23.

dressup (November 7th, 2007, 9:30 pm)

This tools will be usefull for my works.I wish you explain How I can use this tools and whish one is best ?
24.

Alex Wilson (November 7th, 2007, 10:00 pm)

I wrote up a tag cloud for my art photography gallery — but only for the initial page. I found the alphabetical and font size method was the most “intuitive”. Once you use the cloud to get started, it uses tags under the covers. It’s an experiment…
Link [alexwilsonphoto.com]
(some photos NSFW)
25.

Rasmus Luckow-Nielsen (November 7th, 2007, 10:01 pm)

@Ben, yeah, but I’m not sure it really is necessary, as the results will decrease very rapidly if you press more than 2-3 tags.
And actually, I just remember this feature IS actually there. Press the link “nulstil” (reset) in the top of the results, and then the selections will be reset.

/rasmus
26.

roger (November 7th, 2007, 10:18 pm)

This one is pretty cool when you mouse over it (on the right column): Link [www.quizoom.com]
27.

Noah Everett (November 7th, 2007, 11:38 pm)

Great article. My blog uses a cloud tag as well Link [www.findmotive.com] and I’ve found that I get a good amount of hits from search engines to the tag search pages. Another good reason to use them.
28.

Marco (November 7th, 2007, 11:44 pm)

Here, another example of tag cloud Link [koolontheweb.com]
29.

vangardx (November 8th, 2007, 12:29 am)

hello there, what a nice combination of tag cloud you have here..i think tag cloud is suitable at archive page not at the sidebar..
30.

John Bokma (November 8th, 2007, 1:26 am)

I wrote a Perl program that generates a tag cloud from the access log of a webserver: Link [johnbokma.com].
31.

Paul Jensen (November 8th, 2007, 1:41 am)

A little shameless pluggin, but relevant. Check out the interactive tag cloud we use for user’s search queries:

Link [www.tickex.com]
32.

Daniel (November 8th, 2007, 2:38 am)

Wow .. .great list … i like it a lot
33.

Glen (November 8th, 2007, 4:45 am)

You should take a look at the following two tag cloud variations:

–Link [zzzoot.blogspot.com] clouds are variations of tag clouds used in search refinement.
–HTML pull-downs and scrolling lists can also be mad tag-cloud-like. See “Link [zzzoot.blogspot.com]“.
34.

Christoph Thelen (November 8th, 2007, 4:58 am)

Hi, great article!
At my University of Applied Sciences we are running our own eLearning and eCollaboration platform, where many of the universitie’s courses are organized. Among other Web 2.0 features (Mashups, …) we’ve also created a unique style of tag cloud for quickly accessing the courses. We call it a three dimensional tag cloud. On first look, it is like a ‘common’ tag cloud where the course’s names have different font sizes representing the course size. The second dimension is the tag color. It denotes the course activity compared to all other courses. Black means a course is almost ‘dead’ whereas red means that that course is so ‘hot’, that you wish you could join right away and take part. Now, the third dimension is something special. It is a tooltip with extra information what a particular course is all about. Students new to the portal can quickly skim through all courses to get an overview and start their eLearning experience right away.
Take a look at our tag cloud at Link [estudy.mni.fh-giessen.de]
Regards, Christoph
35.

Jermayn Parker (November 8th, 2007, 10:19 am)

tags are over rated!
very rarely are they used to good effect
36.

João (November 8th, 2007, 5:47 pm)

Good post, but you forgot to mention two other possible and usefull use of tag clouds: in “landing” pages (search results, for instance) and in 404 error pages.
37.

ravi karandeekar (November 9th, 2007, 10:37 am)

“The best example are probably Technorati’s tag clouds which have a number of repetitions, sometimes have spam and basically consist of mainstream and irrelevant terms.” some what true. but technorati tagcloud helps my readers to find out more blogs on the topic so i find them useful even when they are not updated.
38.

Richard Rutter (November 9th, 2007, 7:20 pm)

Another fine - and different - example of a tag cloud is the Link [commentisfree.guardian.co.uk] for the Guardian’s Link [commentisfree.guardian.co.uk] collective blog.
39.

DuMe (November 10th, 2007, 12:35 am)

th o is snot bad too :http://www.lyndsey.fr
40.

Carola (November 10th, 2007, 1:04 am)

I wanted to put tag clouds in one of the sites I designed. However, the SEO consultant said Google doesn’t like them ’cause there is too much abuse of them, thus considered as spam. What do you think ?
41.

Bruce Chapman (November 12th, 2007, 2:40 pm)

@Carola, my irreverent answer would be to find a new web consultant! Seriously though, I’ve built sites with tag clouds and tagging systems, and as far as Google goes, a lot of the search traffic comes directly into the tag search pages. This is because a tag is generally a single keyword hyperlink, and as such Google appears to rate these highly. I’ve not experienced any problems as far as Google is concerned. Perhaps sites do get blacklisted, but it may be due to other reasons and not tag clouds. If you follow Google’s advice of making your webpage full of useful content for users, then you’ll be OK. Tag clouds, IMO, in the correct setting, are a good way of letting users summarise the site and drill down into content quickly and logically.
42.

trond (November 12th, 2007, 3:27 pm)

Interesting post with valid points.

@Coen Jacobs
“remove all of the Tag Clouds, since they don’t represent the visitors.”

Wouldn’t the same logics lead you to remove any navigation and classification scheme (like categories)?

In my opinion, tags are most def. more powerful on a single blog than on a site living off of aggregated content, like Technorati. Technorati might as well have smeared all the words of the English language across the screen instead of using tags, as they represent millions (?) of users’ individual vocabularies.
43.

Tom (November 14th, 2007, 11:01 pm)

There are some really nice tag clouds on show on this post. Great roundup as usual.
44.

Forrest (November 15th, 2007, 4:07 am)

What a great post! I’ve been wanting to implement a tag cloud - the ugly red-headed step child of blogging? - and this gives me so much more to think about than simply how to implement it in PHP. Especially the singular/plural tags … I naturally try to keep this clean, but I think I’ve just been inspired to go back and do an “audit” of sorts.
45.

Christian (November 15th, 2007, 6:34 pm)

Sorry for the criticism, but i don’t like so long articles because it takes me to much time to click trough all you examples.
46.

ilyaZ (November 27th, 2007, 10:14 pm)

Nice..nice magazine..i like it so much..
47.

meshed (November 30th, 2007, 6:31 am)

I recommend also Link [www.meshed.de] as a page with tag cloud on/as startpage.
48.

Ticketwood (December 6th, 2007, 9:14 pm)

What a great post! I’ve been wanting to implement a tag cloud
49.

Concerned (January 24th, 2008, 4:17 am)

While the points you make about tagclouds needing to be styled are good, it is clear you have no understanding of well-formed html or accessibility.

To say that technorati has the best tag cloud is laughable. While it may be usable, it is in no way accessible. Look at the source of one of thier pages and you’ll see a huge mess of nested em’s.

If you budding developers would like some proper information on how to create a well-formed tag cloud - may I direct you Link [24ways.org].
50.

Mb. (February 18th, 2008, 9:45 am)

Interesting collection. Tag clouds are a pretty difficult design challenge if you ask me: how to make the data useful and “at a glance” meaningful, without dragging the whole page into a chaotic soup? Haven’t seen anyone who’s managed to solve this completely so far. Maybe the whole web 2.0 thing is meant to be chaotic?

A while back I had an idea that I haven’t seen anyone use yet. Unfortunately I’m not technically skilled enough to build it myself. Bar chart tags: Link [mattbalara.com].
51.

Sam Valiquette (February 22nd, 2008, 6:06 pm)

Hey, Great Post!

Everyone should take a look at Link [virb.com] tag cloud!
52.

Farah (April 12th, 2008, 5:38 pm)

hi. nice post, really great ideas there. I am doing up and intranet image bank for my company and would like to use the tag cloud feature as the search keywords feature. however, I wish there was a way to make the look neater, more like the tag index, in columns like that but still reading the keywords of the site like a tagcloud, displaying only keywords which appears with a certain percentage. Is there a way to make the tag cloud look neater say in columns?
53.

Alfred Samuel Webalfee (April 18th, 2008, 12:27 am)

its a very nice post and it covers most of the tag clouds that are revolving in the web. in all these tag clouds which one is the best according to your experience
54.

Frola Beldy (April 24th, 2008, 2:54 pm)

one more interesting example of tag clouding: Link [www.createcloud.com]
55.

Simon Carter (May 1st, 2008, 8:49 pm)

Useful and detailed — but what would you say are good examples of “mainstream” use of tag clouds?
56.

MoJo (May 4th, 2008, 9:39 am)

thanks for the news
57.

Dirk Maßat (May 7th, 2008, 8:44 am)

a lot of the search traffic comes directly into the tag search pages. This is because a tag is generally a single keyword hyperlink, and as such Google appears to rate these highly. I’ve not experienced any problems as far as Google is concerned. Perhaps sites do get blacklisted, but it may be due to other reasons and not tag clouds. My Page: Link [www.onlineshop-artikelverzeichnis.de]
58.

Carlos (May 11th, 2008, 8:53 pm)

Another cool tag is from the folks of Link [www.couponcodesmall.com]
59.

Diane (May 15th, 2008, 7:19 am)

what do you think about the use of tag clouds on sites geared toward an older audience - people who arent as internet savvy? do you think they get it?
60.

seabasstin (July 14th, 2008, 4:52 pm)

yes I partially agree, they are very very annoying. and actually not very useful
but I don’t think they are ugly, in fact its their main failing.
not ugly enough.
ah ah ha.
61.

ksmooth (July 24th, 2008, 6:31 am)

Hello,
Does anyone know of any quick and easy resources for creating tag clouds. The application that I am l looking to apply tag cloud to is an internal company site to categorize documents within a group. I am soo new to tag clouds but based on my understanding we would need to centralize these documents and either tag them ourselves or get a crawler to tag them.

Any suggestions?
62.

Volkan (August 9th, 2008, 5:33 am)

Thanks. Great tag clouds
63.

kamela (September 22nd, 2008, 1:20 am)

hey
you have forgotten the clouds of
Link [www.webdesignerwall.com]
that is a really cloud
see it!
64.

Mark Wiewel (October 11th, 2008, 3:45 am)

Hey all,

if you would like to develop a tag cloud on your own: I created this tutorial about
Link [www.mark-wiewel.de]
It displays the search phrases of internet search engines, which lead users to your own website.

Have fun!
65.

Alanya (October 11th, 2008, 12:33 pm)

thanks for the news
Link [www.alanya.biz]
66.

Suzarah (November 14th, 2008, 11:01 am)

I am having a battle to create a tag on Ning.com - most creators of tags seem not to be compatible with this system. Any advise?
67.

Monika (November 27th, 2008, 10:40 pm)

Thanks for all infosThey are very interesstet.Look at Regenbekleidung:www.lekimo.de
68.

Monika Harpering (November 27th, 2008, 10:43 pm)

Very great news, thank you
Link [www.lekimo.de]
69.

coutant (December 10th, 2008, 2:02 am)

Great, font-size-weighted tag clouds are my favorite ones.
In addition you may consider my Link [flex.scoutant.org] tagcloud, a flash-based 3D-animated font-size-weithed tag cloud. A scriptlet that can be included in any Html page, that will generate a 3D tagcloud sourcing your delicious tags.
70.

Guillaume (January 13th, 2009, 4:44 pm)

Very usefull info, thanks for sharing. You have put together so many examples that it makes this page a really usefull ressource for a designer!
71.

Juliana (January 18th, 2009, 9:06 am)

Congratulations on this article. It was really interesting.
72.

EzPrintSolutions (January 20th, 2009, 6:09 am)

I agree with some of the other comments, that tag clouds look pretty dorky on websites. They seem more like ‘keyword’ weighting tactic instead of helping any human to actually navigate anything.
73.

Robert (January 27th, 2009, 5:01 am)

I think, tag clouds are just a waste of space. The non-highlighted tags’ only purpose is to provide white-space for the highlighted tags. Tag clouds have a very bad scanability and do not provide much information. Sure, you can show alot of tags in small space, but you’d have a better effect using a vertical list. That’s why I use tag lists with sorting:
Link [www.what-we-need.com]
Link [www.what-we-need.com]
74.

Malte Hansen (March 12th, 2009, 5:19 am)

Id love to see a collection of some of those flash tag clouds around the web.
Some of them are really astonishing.
75.

Dopefeple (March 13th, 2009, 4:23 am)

cheap tickets to la Link [www.creatis.insa-lyon.fr] Links Usualy see .find discount airline tickets .discount airline travel Link [wiki.michisu.net] Realy nice tickets from lima in the attached india flight booking too Link [www.nomic.net] open airline ticket above airline field support analyst jobs atlanta .so so cheap flights from manchester inside This was or someone flights to spain Here trip planner driving directions .sometime cheap flights to amsterdam without Best in the attached flight of the conchords torrent .
76.

Carol (March 15th, 2009, 1:01 pm)

Thanks for sharing. I think tag clouds are great (if not too overcrowded) and often the first place my eyes go when at a site. After looking at several tag cloud algorithms my self, here are 2 methods for deriving keywords (tags) when examing a site externally.

Link [www.aspapp.com]
77.

Susanne (March 22nd, 2009, 12:33 am)

Thanks al lot, your article helps me so much, i have learned a lot , now i am planning to create a tag cloud fro my site. I hope it will work :-)
78.

jsoor (March 24th, 2009, 8:32 am)

hello,

I would like to ask IA architects and UX engineers here what they think of differentiating tag categories by color. Some explanation : I would like to give visitors the possibility to tag an item with the ability to specify the tag’s category (for example : caracteristics, geography,…). In all I shall have some 3 to 6 categories (this is not decided yet). Do you think it would be a good idea to diffentiate the tag categories by color in the cloud and then the tag popularity by font size.

What do you think ?

jsoor
79.

Simone (March 26th, 2009, 3:56 pm)

Thanks for sharing, helpful informations, i want a tag cloud for my web-site…. :-)
80.

dendi (June 19th, 2009, 12:55 pm)

Check these tags… simple and clean design: Link [www.brevebox.com]
81.

adi (June 20th, 2009, 4:42 am)

how can i add a tag cloud on may own website? it is a tv online site, and..what words shoud i enter in the coud ?
82.

Frank (June 23rd, 2009, 4:30 am)

We’ve just relaunched our Link [www.tag-cloud.de] - it now uses word similarity checks, logarithmic cloud scaling, output as a flash tag cloud with xml and json api, as html cloud and as html source.

You can define maximal words in a cloud, font base size, maximum font size, minimum word length minimum word count and a few other things. You can even use the xml api to automatically update your cloud on your page regularly.