Question

I’m designing a permalink system and I just noticed that Twitter and Hipmunk both prefix their permalinks with #!. I was wondering why this is, and if the exclamation point in particular is there for a reason. Wouldn’t #/ work just as well, since they’re no doubt using a framework that lets them redirect queries to certain templates with a regex URL parser?

http://www.hipmunk.com/#!BOS.SEA,Dec15.Jan02

http://twitter.com/#!/dozba

My only guess is it’s because browsers use # to link to an anchor element. Is this why the exclamation point is appended?

Answer 1

This is done to make an “AJAX” page crawlable [by google] for indexing — It does not affect the other well-defined semantics of the fragment identifier at all!

See Making AJAX Applications Crawlable: Getting Started

Briefly, the solution works as follows: the crawler finds a pretty AJAX URL (that is, a URL containing a #! hash fragment). It then requests the content for this URL from your server in a slightly modified form. Your web server returns the content in the form of an HTML snapshot, which is then processed by the crawler. The search results will show the original URL.

I am sure other search-engines are also following this lead/protocol.

Happy coding.

---

Also, It is actually perfectly valid, at least per HTML5, to have an element with an ID of “!foo” so the
reasoning in the post is invalid. See the article “The id attribute just got more classy”:

HTML5 gets rid of the additional restrictions on the id attribute. The only requirements left — apart from being unique in the document — are that the value must contain at least one character (can’t be empty), and that it can’t contain any space characters.