I've just noticed that the long, convoluted Facebook URLs that we're used to now look like this:
As far as I can recall, earlier this year it was just a normal URL-fragment-like string (starting with
#), without the exclamation mark. But now it's a shebang or hashbang (
#!), which I've previously only seen in shell scripts and Perl scripts.
The new Twitter URLs now also feature the
#! symbols. A Twitter profile URL, for example, now looks like this:
#! now play some special role in URLs, like for a certain Ajax framework or something since the new Facebook and Twitter interfaces are now largely Ajaxified? Would using this in my URLs benefit my Web application in any way?
This technique is now deprecated.
This used to tell Google how to index the page.
www.example.com/ajax.html#!key=value, Google will check the URL
www.example.com/ajax.html?_escaped_fragment_=key=value to fetch a non-AJAX version of the contents.
The octothorpe/number-sign/hashmark has a special significance in an URL, it normally identifies the name of a section of a document. The precise term is that the text following the hash is the anchor portion of an URL. If you use Wikipedia, you will see that most pages have a table of contents and you can jump to sections within the document with an anchor, such as:
https://en.wikipedia.org/wiki/Alan_Turing identifies the page and
In order to support bookmarking and the back button, you need to change the URL. However, if you change the page portion (with something like
window.location = 'http://minimal-github.gilesb.com/raganwald';
You will see the page refresh from the server. Now type:
window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';
Aha! No page refresh! Type:
window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';
p.s. There is a fourth benefit to this technique: Loading page content through AJAX and then injecting it into the current DOM can be much faster than loading a new page. In addition to the speed increase, further tricks like loading certain portions in the background can be performed under the programmer's control.
Here's the key link again: The Single Page Interface Manifesto
I always assumed the
! just indicated that the hash fragment that followed corresponded to a URL, with
! taking the place of the site root or domain. It could be anything, in theory, but it seems the Google AJAX Crawling API likes it this way.
The hash, of course, just indicates that no real page reload is occurring, so yes, it’s for AJAX purposes. Edit: Raganwald does a lovely job explaining this in more detail.
First of all: I'm the author of the The Single Page Interface Manifesto cited by raganwald
As raganwald has explained very well, the most important aspect of the Single Page Interface (SPI) approach used in FaceBook and Twitter is the use of hash
# in URLs
! is added only for Google purposes, this notation is a Google "standard" for crawling web sites intensive on AJAX (in the extreme Single Page Interface web sites). When Google's crawler finds an URL with
#! it knows that an alternative conventional URL exists providing the same page "state" but in this case on load time.
In spite of
The SPI Manifesto and demos do not use Google's format of
! in hashes, this notation could be easily added and SPI crawling could be even easier (UPDATE: now ! notation is used and remains compatible with other search engines).
Take a look to this tutorial, is an example of a simple ItsNat SPI site but you can pick some ideas for other frameworks, this example is SEO compatible for any web crawler.
I would be very careful if you are considering adopting this hashbang convention.
You really want to use pushState instead of hashbangs, because making your URLs ugly and possibly broken -- forever -- is a colossal and permanent downside to hashbangs.
To have a good follow-up about all this, Twitter - one of the pioneers of hashbang URL's and single-page-interface - admitted that the hashbang system was slow in the long run and that they have actually started reversing the decision and returning to old-school links.
Answers above describe well why and how it is used on twitter and facebook, what I missed is explanation what
# does by default...
On a 'normal' (not a single page application) you can do anchoring with
hash to any element that has id by placing that elements id in url after hash
(on Chrome) Click F12 or Rihgt Mouse and
id="answer-10831233" and add to url like following
and you will get a link that jumps to that element on the page
# in a way described in the answers above you are introducing conflicting behaviour... although I wouldn't loose sleep over it... since Angular it became somewhat of a standard....