What s the shebang hashbang in Facebook and new Twitter URLs for

Question

I ve just noticed that the long  convoluted Facebook URLs that we re used to now look like this   http   www facebook com example profile   pages Another-Page 123456789012345  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   http   twitter com    BoltClock  Does    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

User · Accepted Answer

This technique is now deprecated   This used to tell Google how to index the page   https   developers google com webmasters ajax-crawling   This technique has mostly been supplanted by the ability to use the JavaScript History API that was introduced alongside HTML5  For a URL like 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

User · Answer

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   Article about this is here

User · Answer

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 Early computers and the Turing test  https   en wikipedia org wiki Alan Turing identifies the page and Early computers and the Turing test is the anchor  The reason that Facebook and other Javascript-driven applications  like my own Wood  amp  Stones  use anchors is that they want to make pages bookmarkable  as suggested by a comment on that answer  or support the back button without reloading the entire page from the server   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   raganwald com    to a different URL or without specifying an anchor  the browser will load the entire page from the URL  Try this in Firebug or Safari s Javascript console  Load http   minimal-github gilesb com raganwald  Now in the Javascript console  type     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     Still no refresh  Use the back button to see that these URLs are in the browser history  The browser notices that we are on the same page but just changing the anchor  so it doesn t reload  Thanks to this behaviour  we can have a single Javascript application that appears to the browser to be on one  page  but to have many bookmarkable sections that respect the back button  The application must change the anchor when a user enters different  states   and likewise if a user uses the back button or a bookmark or a link to load the application with an anchor included  the application must restore the appropriate state   So there you have it  Anchors provide Javascript programmers with a mechanism for making bookmarkable  indexable  and back-button-friendly applications  This technique has a name  It is a Single Page Interface   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   p p s  Given all of that  the  bang  or exclamation mark is a further hint to Google s web crawler that the exact same page can be loaded from the server at a slightly different URL   See Ajax Crawling  Another technique is to make each link point to a server-accessible URL and then use unobtrusive Javascript to change it into an SPI with an anchor   Here s the key link again  The Single Page Interface Manifesto

User · Answer

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    Example     on Chrome  Click F12 or Rihgt Mouse and Inspect element     then take id  answer-10831233  and add to url like following   https   stackoverflow com questions 3009380 whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for answer-10831233  and you will get a link that jumps to that element on the page  What  39 s the shebang hashbang      in Facebook and new Twitter URLs for   By using   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

User · Answer

I would be very careful if you are considering adopting this hashbang convention      Once you hashbang  you can   t go back  This is probably the stickiest issue  Ben   s post put forward the point that when pushState is more widely adopted then we can leave hashbangs behind and return to traditional URLs  Well  fact is  you can   t  Earlier I stated that URLs are forever  they get indexed and archived and generally kept around  To add to that  cool URLs don   t change  We don   t want to disconnect ourselves from all the valuable links to our content  If you   ve implemented hashbang URLs at any point then want to change them without breaking links the only way you can do it is by running some JavaScript on the root document of your domain  Forever  It   s in no way temporary  you are stuck with it    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

User · Answer

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

User · Answer

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  The character   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    combination is very interesting for SEO  is only supported by Google  as far I know   with some JavaScript tricks you can build SPI web sites SEO compatible for any web crawler  Yahoo  Bing       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    The hard problem is to generate any  or selected   AJAX page state  as plain HTML for SEO  in ItsNat is very easy and automatic  the same site is in the same time SPI or page based for SEO  or when JavaScript is disabled for accessibility   With other web frameworks you can ever follow the double site approach  one site is SPI based and another page based for SEO  for instance Twitter uses this  double site  technique

[facebook] What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?

Examples related to facebook

Examples related to url

Examples related to twitter

Examples related to fragment-identifier

Examples related to hashbang