We love designing and developing websites, but what really drives us is solving problems and cultivating strong relationships with our clients
Experiments in URL design.
By : shabda
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
Comments
@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
Daniel: Same as sushi. It is needed, if you are building a Ajax Appp, which loads these urls without page load.
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.
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.
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.
Al I agree, thats why I have said
http://twitter.com/#!/shabda is a perfect URL.
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.)
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
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.
Thanks for this nice wrap-up. I have a question: Why do you suggest using unique urls? Is that bad for what reason?
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
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.
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:-)
Reactions
Good, Bad & UGLY URLs -> http://agiliq.com/blog/2010/12/experiments-in-url-design/
Experiments in URL design. http://agiliq.com/blog/2010/12/experiments-in-url-design/
shabda: Experiments in URL design. http://agiliq.com/blog/2010/12/experiments-in-url-design/: http://bit.ly/gf5cy5
- Test Driven Development in Python
- Deploying Django apps on Heroku
- Developing android applications from command line
- Deploy Django App in 5 Easy Steps
- Project Management Tools for Start-Ups
- Generating a pdf from an image using PIL and django
- Dynamically attaching SITE_ID to Django Caching
- Screencast: How to deploy Django on Heroku
- Deploying Django apps on Heroku
- How to use pep8.py to write better Django code
- rails
- django
- linkroundup
- django opinion
- opinion
- business
- API
- appengine
- python
- satire
- startup
- Uncategorized
- marketing
- personal
- rambling
- search
- interviews
- seo-interviews
- 5startupideas
- ideas
- seo
- tips
- forms
- paypal
- utilities
- datetime
- web2.0
- Amazon
- algorithms
- presentations
- products
- pinax
- satchmo
- ecommerce
- microsoft
- yahoo
- book
- tutorial
- models
- aggreagtion
- meta
- India
- apps
- about
- CSS
- Design
- wordpress
- test slug
- vim
- urls
- reviews
- javascript
- xmpp
- emacs
- Typography
- Grid Theory
- Color Theory
- iphone
- android
- titanium
- mobile applications
- CSS3
- Browser Compatibility
- mobile
- jobs
- lamson
- django setup
- files
- upload
- jsTree
- hierarchical view
- web page
- Treeview
- coffeescript
- request
- response
- South
- django south
- django migration
- --fake
- screencasts
- django caching
- SITE_ID prefix
- review
- code hosting
- comparison
- unfuddle
- fogbugz
- assembla
- github
- project management
- ticketing system
- gunicorn
- deploy
- nginx
- ubuntu
- vps
- android terminal
- terminal
- programming
- TDD
- Test Driven
- Development
- May 2012
- April 2012
- March 2012
- February 2012
- January 2012
- December 2011
- October 2011
- September 2011
- July 2011
- June 2011
- April 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- June 2010
- April 2010
- March 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- April 2009
- March 2009
- February 2009
- November 2008
- October 2008
- June 2008
- May 2008
- April 2008
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?