Doing Links Like Twitter, Hash-Bang #! Url'S

Doing links like Twitter, Hash-Bang #! URL's

"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.

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

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.

Why does Twitter use a hash and exclamation mark in URLs, and how do they rewrite search URLs?

To answer the second part then: It is redirecting you to /#!/search.

If you look at the response headers when going to http://twitter.com/britishdev (plug plug) you are returned a 302 (temporary redirect) with the Location header set as "Location: http://twitter.com/#!/britishdev"

Yes JavaScript is then pulling all your detail in on the destination page but regardless that is where you are redirected to.

Why do sites like twitter, gawker use #! instead of simple URL?

There are two parts to this:

Why a fragment identifier instead of a real page?

Because they are overusing Ajax. Instead of linking to a new page, they link to a non-existent or dynamically generated fragment of the current page and then use JavaScript to change the content.

Why start the fragment identifier with !

Because Google will map it onto a different URL so you can serve up a special alternative version just for them. This allows the content to be indexed by search engines.

For what is used and what technologies are related to /#!/ in some websites URL's

#! is called hashbang.

By reading Gawker Learns the Hard Way Why ‘Hash-Bang’ URLs are Evil and especially following the links for more technical-oriented information, you'll learn about one side of the story, the problematic one :)

SO: What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for? seems to be the most voted question on the subject around here.

Are there any javascript libraries for working with hashbang/shebang (#!) urls?

We've been working on a library that does URL route mapping: https://github.com/OpenGamma/RouteMap if you're still looking for one.

How to make hashtags,urls and usernames in a string like twitter using Jquery

Everywhere in your regex you're using hyphen in character class and it is unescaped. Remember that in a character class hyphen can be unescaped only when it s at 1st or last position.

1: So instead of:

/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.="]+/g

Use this:

/[A-Za-z]+:\/\/[\w-]+\.[\w:%&~?\/.="-]+/g

2: Instead of this:

/[@]+[A-Za-z0-9-_]+/g

Use this:

/@+[\w-]+/g

3: Instead of:

/[#]+[A-Za-z0-9-_]+/g

Use this:

/#+[\w-]+/g

What's this new `#!` in URL convention?

It was started by Google ( http://code.google.com/web/ajaxcrawling/ )

If you're running an AJAX application
with content that you'd like to appear
in search results, we have a new
process that, when implemented, can
help Google (and potentially other
search engines) crawl and index your
content. Historically, AJAX
applications have been difficult for
search engines to process because AJAX
content is produced dynamically by the
browser and thus not visible to
crawlers. While there are existing
methods for dealing with this problem,
they involve regular manual
maintenance to keep the content
up-to-date.

Look at this answer here:

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

The opinion on using this is split - Gawker had major issues after taking this up : http://www.webmonkey.com/2011/02/gawker-learns-the-hard-way-why-hash-bang-urls-are-evil/

---

Related Topics