shabda
4th Dec., 2010
16
Comments
4
Reactions

Experiments in URL design.
By : Shabda Raaj

Keeping url structure sane plays a major role in user experience, by making it easy to go to specific pages and navigate the site. Some real world urls and how they could have been better follow.

The Bad Urls:

  • http://news.ycombinator.com/item?id=1967820
  • http://area51.phpbb.com/phpBB/viewforum.php?f=99
  • http://msdn.microsoft.com/en-us/aa336522.aspx

The Good

  • Easy to develop for. The id referred is the Primary key

The Bad

  • Hard for users to select the correct page from a url bar dropdown
  • Bad for SEO

Neutral:

  • Easy to guess next and previous pages.

The fairly good Urls.

  • http://www.reddit.com/r/django/comments/efh2v/djangoeasymaps_app_that_makes_it_easy_to_display/
  • http://stackoverflow.com/questions/4352854/jquery-handle-keypress-for-list

The Good

  • Includes title in the url which makes it easy to select in browser dropdown and history.
  • Good for SEO.

The Bad

  • Includes redundant info in Urls, which make it unnecessarily long.
  • Urls are not unique. http://stackoverflow.com/questions/4352854/anything will work.

What I would like

  • http://stackoverflow.com/jquery-handle-keypress-for-list
  • http://www.reddit.com/djangoeasymaps_app_that_makes_it_easy_to_display/

The almost good urls.

  • http://www.linkedin.com/in/shabda/
  • http://www.reddit.com/r/india
  • http://www.reddit.com/user/shabda/

The Good

  • Short
  • Includes only important info in the url.

Cons

  • Quite good, but still includes some unneeded info.

What I would like

  • http://www.linkedin.com/shabda/
  • http://www.reddit.com/india
  • http://www.reddit.com/u/shabda/

The prefect urls.

  • https://github.com/Spacelog
  • https://github.com/facebook/tornado
  • http://twitter.com/#!/shabda
  • http://twitter.com/#!/shabda/kiddos
  • http://techcrunch.com/2010/12/03/angry-birds-android-1-million-advertising/
  • https://mail.google.com/a/agiliq.com/#starred/12c84752671e87c3
  • http://code.google.com/appengine/docs/whatisgoogleappengine.html

The Good

  • No unneeded info is included in the urls.
  • Each part of the url can be removed to get the logical page for it. Eg. 0 1, 2, 3[http://code.google.com/]

Suggestion

Make urls case insensitive

  • http://news.ycombinator.com/item?id=1967820
  • http://area51.phpbb.com/phpBB/viewforum.php?f=99

Work.

  • http://news.ycombinator.com/Item?id=1967820
  • http://area51.phpbb.com/phpBB/Viewforum.php?f=99

Do not work. (We changed capitalization.)

While

All of these work.

  • http://twitter.com/#!/shabda
  • http://twitter.com/#!/Shabda
  • https://github.com/Facebook/tornado
  • https://github.com/facebook/tornado

Related Posts

Can we help you build amazing apps? Contact us today.

Topics : opinion web2.0 apps urls

Comments

Daniel Samuels 4th Dec., 2010

I don't really see how Twitter's URL scheme of http://twitter.com/#!/shabda is a 'good' URL. The scheme they had before, without the #! was much better, is #! not unneeded info?

commmenttor
Sushi 4th Dec., 2010

@Daniel: The #! or as it is called shebang is necessary in twitter's case to get their pages indexed by Google.

Here's more: http://stackoverflow.com/questions/3009380/whats-the-shebang-in-facebook-and-new-twitter-urls-for

commmenttor
Shabda 4th Dec., 2010

Daniel: Same as sushi. It is needed, if you are building a Ajax Appp, which loads these urls without page load.

commmenttor
Andrew Dalke 4th Dec., 2010

Having "http://stackoverflow.com/jquery-handle-keypress-for-list" instead of "http://stackoverflow.com/questions/4352854/jquery-handle-keypress-for-list" would not work because the title can be edited. The back-end only requires "http://stackoverflow.com/questions/4352854". Everything beyond that point is ignored. The remainder of the URL is there to make it easier for humans to have a clue what the page is about before going there.

commmenttor
Al Scott 4th Dec., 2010

it is an unfortunate shortcoming in Javascript that you cannot populate the address bar with a full URL without initiating a page reload, unless you make use of anchor hashes, which is why on sites that make extensive use of AJAX like facebook and twitter you see hashes in all the url strings.

It's the only way to provide deeplinking on an AJAX driven site.

commmenttor
shabda 4th Dec., 2010

Andrew:

How WordPress handles is it. If my old url was:

http://stackoverflow.com/questions/4352854/jquery-handle-keypress-for-list

And I edit title, so slug is,

http://stackoverflow.com/questions/4352854/jquery-dojo-handle-keypress-for-list

WordPress will set a HTTP 301 from Old to New. I believe this would be the correct behavior.

commmenttor
shabda 4th Dec., 2010

Al I agree, thats why I have said

http://twitter.com/#!/shabda is a perfect URL.

commmenttor
Andrew Dalke 4th Dec., 2010

shabda: you wrote that you would like "http://stackoverflow.com/jquery-handle-keypress-for-list". I'm trying to point out that that doesn't work so well. If the name changes then yes, you'll need a permanent redirect from the old URL to the new, and that is possible. The server would have to keep track of all previous title changes and know how to redirect. But then, what happens if I asked "X" then changed it to "Y" and later on you ask "X" then change it to "Z". If someone goes to an old bookmark for "X", do they mean to see Y or Z?

That's why your proposed better solution does not work. While what SO does not only works, it's less work for the back-end at the cost of a few extra digits in the URL.

(There's also some technical details of namespace collision, like what happens if I ask a question "users"? Will it mean that http://so/users" goes to my question instead of the list of users? This can be handled technically.)

commmenttor
Debjit 4th Dec., 2010

Since you mentioned about those new Twitter URLs which allow easy ajax indexing by Google, I thought you might like to take a look at this: http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

commmenttor
Jj 5th Dec., 2010

If browsers other than Chrome supported window.history.pushState there wouldn't be the need for the #! trick for urls.

A downside I see from the github case of perfect urls (github.com/Spacelog) is that you loose control of your namespace. It becomes hard to know which reserved words you have and which not, github.com/about github.com/login etc. I would have used a namespace github.com/users/Spacelog but it makes it longer :S.

commmenttor
Sameer Panchangam 5th Dec., 2010

What's with the #! on twitter?

commmenttor
Mert Nuhoglu 28th Jan., 2011

Thanks for this nice wrap-up. I have a question: Why do you suggest using unique urls? Is that bad for what reason?

commmenttor
Thejaswi Puthraya 14th March, 2011

For all those wondering about the #! in the URL, it is placed to help search engine bots crawl AJAX content.

Check http://code.google.com/web/ajaxcrawling/docs/getting-started.html

commmenttor
rosetta stone 31st March, 2011

Our website offers the Cheap Rosetta Stone on sale,such as these very popular kinds: Rosetta Stone Spanish,Rosetta Stone German,Rosetta Stone Italian and so on,besides,there are many friendly customers who left useful Rosetta Stone Reviews,which maybe the good guide for you!
All the Rosetta Stone are 100% satisfaction guaranteed,and free shipping.We guarantee its quality,and all money will be refund if the goods are not satisfied.
welcome to make a purchase.

commmenttor
Monica.v 9th Jan., 2012

Hi shabda, i like your post and also want to share some more things as in case of seo friendly url writing. We have to always use relevant url according to our business and have to use dash instead of slash and we can use maximum 5 to 6 words in inner page url. Hope these few tips would be beneficial to all of us:-)

commmenttor

Reactions

newseffect9 5th Dec., 2010

Experiments in url design - http://bit.ly/eIUJ1f - [Hacker News FH]

commmenttor
Post a comment Name :

Email :

Your site url:

Comment :

© Agiliq, 2009-2012