News

Why Readable URLs Matter

Written by UI-Staff

Rabbit Trail

It has been said that a picture is worth a thousand words. While impressive in their value for describing ideas, images aren't the most valuable asset into today's info-driven culture – that honor belongs to the URL. The URL can be worth millions of possible words, images, and content from around the world.

As online content creators, we often go to great lengths to make sure that our experiences are consistent across a variety of different characteristics including but certainly not limited to typography, image composition, and color balance. However, we typically forget one of the most important aspects of our websites and applications – the URL.

Take for instance the following example of two urls that essentially link to the same content. Which URL is more understandable to the human reader?

http://www.newegg.com/Product/Product.aspx?Item=N82E16889252083
or
http://www.comparison.com.au/televisions/Sony/BRAVIA-KDL32EX400

It's pretty obvious that link #2 has something to do with a Sony Television, but link #1 looks much less interesting.

From a usability perspective, option #2 is clearly more desirable to human beings, but it's also way easier to read by machines as well. Meaningful urls provide us powerful tools when we architect online experiences including instant approximation and improved search engine recognition. I'll address what I mean by these definitions later in this post, but I first want to discuss a common misperception I've heard from several highly-proficient web users, which is 'URLs are no longer important because of the power of today's search engines.'

First of all, it is true that people rely less on URL's today than they did 10 years ago, but as we'll see later, the same cannot be said about machines. Search Engines like Google and Bing have all but eradicated the need for humans to memorize website URLs. Even early browser concepts like the "bookmark" are quickly becoming obsolete in a world where people become more and more reliant upon search engines to show them what they've searched for in the past, what they have now, and in some cases, what they may want in the future.

The URL is every bit as important as it was 10 years ago, perhaps more, and here's why.

Improved Search Engine Recognition

Websites look very different to machines than they do to humans, and while we've learned how to make computers do some pretty neat things, we still haven't figured out how to make computers read our minds. Search engines need text content (in most cases) in order to determine whether a page is relevant to our search phrase. One important piece of text content often forgotten is the URLs we share with the outside world.

URL's matter a great deal to search engines, although it's difficult because of algorithm secrecy to say exactly how much. We know from personal experience that friendly urls like /televisions/sony/n8e3123[…] will rank more highly than urls like /Product/Product.aspx?Item=n8e3123 for the term "television." We also know from Google's own website that it prefers links like the former as opposed to the latter.

In short, well structured URLs are good for humans and search engines.

Note: To learn more about URL Structure and how they can help the ranking of your content, make sure you read the Basics of Search Engine Friendly Design and Development – Chapter 4 that we created with search experts SEOmoz.

Instant Approximation

As exemplified in my first example, the second Sony Television URL allowed us to instantaneously approximate what might happen when I click on the url. Even had I not told you where these URLs would take you, you could reasonably guess that the second link is somehow related to a Sony television. This deduction takes your brain milliseconds, but can have a fundamental impact on whether or not you click the link.

Note: On a related note, URL shorteners are the exact opposite of a well designed link (and that's not a bad thing). Services that utilize URL shorteners place greater value on a URL's ability to be shared easily in medium where character counts are important (through blog posts, Twitter, etc). See my previous post for an explanation on how URL Shorteners work.

Instant approximation also has some less well-known minor technical benefits which can help ease the maitenance of your website. For instance, good URLs are often agnostic to the framework or programming language. This is often called "future-proofing" and it's an important way to guard against problems you don't know you have (yet).

Future-proof URLs

Imagine the url http://mysite.com/search.php?search-term=gloves+hats. From this URL, we know that the system requires a search.php file in order to make a search.

Let's say that two years from now, we decide to use the ASP.NET technology, instead of PHP, to render website content. In this case we will need to set up our web server to automatically redirect search.php calls to the new search page. Had we used a url like http://mysite.com/search?terms=gloves+hats, no URL change is necessary when we switch the underlying technology.

One less thing to change in a website overhaul can easily translate into thousands of dollars in savings later on, so it's important to think of these decisions when adding new content to a website or re-architecting an existing website.

Easy to change representation

One big shift in the structure of web applications that has happened over the past 10 years is the ubiquity of web service API's. These API's allow people to easily grab content stored on one website and display it elsewhere. To accomplish this, an intermediary text format, like XML or JSON, is used. It's not important to know what these are, but it is important to know that these formats make it much easier to share information with other sources.

Let's say for example you have a url like "http://www.mysite.com/natemiller/favorites/restaurants.html" (the .html extension is included for clarity, but we could have omitted it and this example would still be valid). When I click on this url, I expect to see all of my favorite restaurants in HTML – which my web browser knows how to display. But let's say I want to share this information with another website called www.myfavoriterestaurants.com. This website only needs a fraction of the information stored in the HTML page. For example, myfavoriterestaurants.com doesn't need buttons, graphics, or any other design elements which are present in the HTML version used by my browser. Instead, myfavoriterestaurants.com understands another format, XML, which it can use to display my list of favorite restaurants on myfavoriterestaurants.com.

How will myfavoriterestaurants.com retrieve my list of favorite restaurants? Ideally, we'd like myfavoriterestaurants.com to retrieve this information from my website – mysite.com. Since I'm using friendly URLs to describe my site's content, the url http://www.mysite.com/natemiller/favorites/restaurants.xml is the logical place to retrieve this content form my website. Notice that the only part of the url that has changed is the .xml portion – everything else is the same.

The chief advantage to this approach is that we can have an unlimited number of representations (.xml, .json, .mp3, even ones that don't exist yet like .itv) all with the same URL structure. This helps make our website more predictable and better equipped for change in the long term.

Note: a lot of what I've written here is fundamental to the concept of Representational State Transfer or simply REST. If you want to become a URL guru, or simply learn more about the advantages of resource-driven applications, I highly recommend this book: RESTful Web Services.

Conclusion

There are thousands of components that go into designing a great website, but in your process of designing the next big thing, don't forget the URLs that string it all together. A well-crafted URL can help make your content easier to find, easier to manage, and easier to extend and the web (and your website) continues to change. By paying attention to the structure of your URLs and making these strings of text easier to understand by humans, you can also help make your content easier to understand by machines.