Getting Backbutton to work in single page website and implementing "speaking" URLs

Question

I have a single page website and would like to achieve the following:

1. back button working as if it was a normal website

2. and instead of say,

www.mysite.com/index.php?p=#this-is-a-great-product

I'd like to have this url

www.mysite.com/this-is-a-great-product

while still having back button working properly.

Regarding 1.) I use the following code ive found which works great:

<!-- Getting BackButton to  work properly -->
<script type="text/javascript">
var times = 0;
function doclick() {
    times++;
}
function doclick() {
    times++;
    location.hash = times;
}
window.onhashchange = function() {     
    if (location.hash.length > 0) {        
        times = parseInt(location.hash.replace('#',''),10);     
    } else {
        times = 0;
    }
}
</script>

…but of course it just changes any anchors to /#1, then /#2 and so forth ro get the backbutton to work. But as I'm not a programmer I don't know how to change it… :(

Regarding 2.) i can add in htaccess this:

>RewriteEngine On
>RewriteRule ^([^/.]+)/?$ /index.php?page=$1

and this changes /index.php?p=products to /products.

So how do I change the above code (under 1.) so it doesn't change all anchors to #1, #2, etc. but instead references / uses the urls I achieved under 2, like

www.mysite.com/this-is-a-great-product

And (probably a very dumb question, but a very important one) -given I use only the new url links on my site- is there any danger that this still might result in duplicate content in any way?

Regarding this, should I (for that reason or any other) sefreferential my single page index.php to itself using rel canonical link=index.php?

Thanks so much in advance!

Answer 1

As mentioned, you will want to use the HTML5 History API. Please note, this API is relatively new and therefore browser support is a concern. At the time of writing, approximately 71% of global Internet users have support for it (see http://caniuse.com/#feat=history for browser support information). Therefore, you will want to ensure you have a fall-back solution for this. You will likely want to use the older #! solution that was popular before the HTML 5 History API was adopted.

If you use the history API to replace, for example, example.com/#!settings with example.com/settings and a user bookmarks that nicer URL, then when they go to visit it, their browser will make a request to the server for /settings (which doesn't actually exist in the web server's context). Therefore, you will need to make sure your web server has some redirection rules (i.e. RewriteEngine) such that it can take the pretty URLs and redirect them to the #! version (and then if the user's browser supports the history API it can replace that with the nice URL).

If you aren't very comfortable programming yourself, I'd recommend using a JavaScript library that does a lot of the work for you. I did some quick searching and discovered the following, though there might be better ones out there: https://github.com/browserstate/history.js