Overcoming shebang (#!) without Javascript

By Big Spaceship

Websites are more frequently using shebang (#!) as a method for switching pages using AJAX. Google has a whole spec for how to use this method but also allow your site to be indexable via crawlers. This article is going to argue, why do we need that at all?

A website application structure should just exist as normal whether AJAX is calling it or it’s being called directly. All URLs like: “example.com/about”, “example.com/jobs”, “example.com/contact”, etc should be individually accessible without AJAX. This allows for a regular site map, easily crawlable, and accessible by users that have Javascript disabled.

Quick history on the shebang

If you already know about shebangs and their purpose, you can gloss over this section.

You may notice more popular websites like Facebook, Google, and Twitter are inserting these things in their URLs that looks like: http://twitter.com/#!/bigspaceship. Typically when the URL in the address bar changes, the entire page then reloads itself. However, when you add a “#” to it, the page does not reload. This is because the pound sign was used for jumping to different anchor elements on the page without refreshing. People often now use it to change content on the page without loading the entire site over again. This method uses AJAX to load only the new content.

Using the “#” alone will do the job, but Google has suggested using a shebang ”#!” instead. They say it becomes “AJAX crawlable” in this way and offer an elaborate system to which you can read data after the shebang. It’s their standard for combating the troubles posed by using this method. This can be read in full here.

The problem here is that using a shebang in your URL requires Javascript. If you disable it, have code errors, or it doesn’t execute in time, your website will be inaccessible by not only users but by search engines as well. Another problem is that the server (PHP, ASP, etc) cannot read what comes after the “#” sign. It is never sent, so what if you need it? So let’s hear another solution besides the one mentioned before.

Initial HTML Code

When adding links to your HTML, try using URLs without any shebangs; the same way you would if there was no Javascript alternative. If content is going to be fetched and displayed using AJAX, then the ability to do so should be applied using Javascript. This way, if Javascript is disabled or encounters an error, the site will still be functional.

Adding the AJAX

So if all of our links are just standard, how does the AJAX come in to play? On the page load, you would loop through all your anchor elements and assign a click handler to intercept the URL switch. You can get the ”href” attribute inside your handler, insert a “#!/” between your domain and the request URI, and set the window.location to that new URL.

This article will not go into detail about listening for url change events, so if you need information on how to do this, try swfaddress or read about deep-linking in Javascript.

Don’t rewrite PHP

Some people are afraid that they’ll have to serve up two different sets of content if they use this sort of method, but you don’t. AJAX requests come with a server header of “HTTP_X_REQUESTED_WITH”. You can check for this and, instead of serving up a template, you serve up JSON encoded data.

It’s standard practice to set all of your data to an array or object, then pass that off to a view and let that populate itself. This method makes it really easy to check the $_SERVER['HTTP_X_REQUESTED_WITH'] value to toggle between die(json_encode($data)); and $template->render(‘myTemplate.html’, $data);

Quick example

Here’s a really quick example to demonstrate. You can copy and paste this directly into any editor and it should work. You’ll notice that all the URLs are absolute and have no shebangs in them at all. The javascript loops through, dynamically inserts one on click, then gives you a pop-up showing what the new URL would be. If you were using this in practice, you could change the site URL using window.location.

< !DOCTYPE html> Home About Jobs Contact
Some interesting reads

I don’t know how long some of these URLs will exist, but if you can read them, they’re pretty interesting:

What’s the shebang in Facebook/Twitter for (stackoverflow)

Single Page Interface Manifesto

What's Next?

Frictionless Sharing 2.0

A Lesson in Turning Inward to Solve…