Doing links like Twitter, Hash-Bang #! URL’s [duplicate]

“Hash-Bang” navigation, as it’s sometimes called, …

http://example.com/path/to/#!/some-ajax-state

…is a temporary solution for a temporary problem that is quickly becoming a non-issue thanks to modern browser standards. In all likelihood, Twitter will phase it out, as Facebook is already doing.

It is the combination of several concepts…

In the past, a link served two purposes: It loaded a new document and/or scrolled down to an embedded anchor as indicated with the hash (#).

http://example.com/script.php#fourth-paragraph

Anything in a URL after the hash was not requested from the server, but was searched for in the page by the browser. This all still works just fine.

With the adoption of AJAX, new content could be loaded into the current (already loaded) page. With this dynamic loading, several problems arose: 1) there was no unique URL for bookmarking or linking to this new content, 2) search would never see it.

Some smart people solved the first problem by using the hash as a sort of “state” reference to be included in links & bookmarks. After the document loads, the browser reads the hash and runs the AJAX requests, displaying the page plus its dynamic AJAX changes.

http://example.com/script.php#some-ajax-state

This solved the AJAX problem, but the search engine problem still existed. Search engines don’t load pages and execute Javascript like a browser.

Google to the rescue. Google proposed a scheme where any URL with a hash-bang (#!) in lieu of just a hash (#) would suggest to the search bot that there was an alternate URL for indexing, which involved an “_escaped_fragment_” variable, among other things. Read about it here: Ajax Crawling: Getting Started.

Today, with the adoption of Javascript’s pushstate in most major browsers, all of this is becoming obsolete. With pushstate, as content is dynamically loaded or changed, the current page URL can be altered without causing a page load. When desired, this provides a real working URL for bookmarks & history. Links can then be made as they always were, without hashes & hash-bangs.

As of today, if you load Facebook in an older browser, you’ll see the hash-bangs, but a current browser will demonstrate the use of pushstate.

Leave a Comment