Deep linking javascript powered websites

Question

I have a website which has two versions, an all singing all dancing javascript powered application which is served when you request the root url

/

As you navigate around the lovely website the content updates, as does the url, thanks to html5 push state or good old correctly formatted #! urls. However if you don't have javascript enabled you can still use all functionality of the site as each piece of content also exists under it's own url. This is great for 3 reasons

• non javascript users can still use the site
• SEO - web crawlers can index the site easily
• everything is shareable on social networks

The third reason is very important to me as every piece of content must be individually shareable on the site. And because each piece of content has it's own url it is easy to deep link to that url, and each piece of content can have it's own specific open graph data.

However the issue I hit is the following. You are a normal person and have javascript enabled and you are browsing and image gallery on the site and decide to share the picture of a lovely cat you have found. Using javascript the url has been updated to

/gallery/lovely-cat

You share this url and your friend clicks on it. When they click on the link the server sends you the non javascript / web crawler version of the site, and the experience is no where near as nice as the javascript version you would have been served if you directly went to the root of the site and navigated there.

Do anyone have a nice solution / alternative setup to solve this problems? I have several hacks which work, however I am not that happy with them. They include :

• javascript redirect to the root of the site on every page and store a cookie / add a #! to the url so on page render the javascript router will show the correct content. ( does google punish automatic javascript redirects? )
• render the no javascript page, and add some javascript which redirects the user to the root, similar to above, whenever the user clicks on a link

I don't particularly like either of these solutions, but can't think of a better solution. Rendering the entire javascript app for each page doesn't appear to be a solution to me, as you would end up with bad looking urls such as /gallery/lovely-cat/gallery/another-lovely-cat as you start navigating through the site.

My solution must support old browsers which do not implement push state

Answer 1

Make the "non javascript / web crawler version of the site" the same as the JavaScript version. Just build HTML on the server instead of DOM on the client.

Rendering the entire javascript app for each page doesn't appear to be a solution to me,

That is the robust approach

as you would end up with bad looking urls such as /gallery/lovely-cat/gallery/another-lovely-cat

Only if you linked (and pushStateed) to gallery/another-lovely-cat instead of /gallery/another-lovely-cat. (Note the / at the front).

Answer 2

Try out this plugin it might solve your 3rd reason, along with two reasons.

http://www.asual.com/jquery/address/