I would like to develop a website with fully ajax navigation, but this means that users cannot share, bookmark, or go straight to certain content.
I noticed a few websites (Gmail, Thesixtyone, Youtube) are using hash tags to create custom urls for different page configurations. What is this technique called, and how can I implement this?
Loon into JQuery address. http://www.asual.com/jquery/address/
This does exactly what you're talking about. However, since you asked what the # means in custom URLs, I assume you're fairly new at this. JQuery address will look intimidating at first, but it's really quite easy. You should use JQuery for all your ajax handling too.
# is an anchor tag. if you do this <a name="list">This is an anchor tag</a> then add #list to the url, the page will jump to the a tag where name = list.
I've used hash bang approach for a fully ajax driven application with SEO. From my experience I would say it's very reliable approach for both web browser and smart phone browsers.
Here are my approach. For code simplicity I will use Jquery / Zepto code
When you need to load a different ajax page just change the URL hash using javascript.
window.location.hash = '#!page1';
Then a hash change event will fire from the javascript
$(window).on('hashchange',loadPage);
Handle that event with loadPage function
var loadPage = function(e){
pageId = window.location.hash;
_gaq.push(['_trackPageview', '/'+pageId]); //For google analytics virtual page push
if(pageId == '#!page1'){
$.get('ajax/page1.php', function(response) {
$('#main').html(response);
});
}else if(pageId == '#!page2'){
$.get('ajax/page2.php', function(response) {
$('#main').html(response);
});
}
}
By this way you can load a page by typing URL and by using link as well.
Now the SEO Part. Google and other major search engine has developed an way to crawl an ajax based website. If you use #! in your url google will replace the #! portion with '?_escaped_fragment_' and will ask you for content. for example
www.yoursite.com/#!page1 will be converted to www.yoursite.com/?_escaped_fragment_=page1
All you need to do is catch that _escaped_fragment_ as a GET parameter. If you use php the code will be like
if (isset($_GET['_escaped_fragment_'])) {
$fragment = $_GET['_escaped_fragment_'];
if($fragment == 'page1')
echo include 'ajax/page1.php'; // or use readfile method
else if($fragment == 'page2')
echo include 'ajax/page2.php'; // or use readfile method
}
You can also set html page title and description for each page individually by catching the _escaped_fragment_
On a separate note, you can share url in social media using #! as well. It will be parsed as a regular link with the help of _escaped_fragment_
I hope that approach will help you to cover all issues.
If you have a div content where you ajax update, here is an example using jquery address library http://www.asual.com/jquery/address/.
<body>
<div id="content">
Your ajax content...
</div>
</body>
Include the jquery address library and then
$(document).ready(function () {
$('a').address();
$.address.externalChange(function (e) {
if (e.value != '/') {
$('#content').load(e.value);
}
});
});
If you want to exclude some href of history navigation
$('a[href!="#"]').address();
