Friday, May 23, 2014

Make Sencha Touch Site With Routes SEO Friendly

Recently in one of our project which was a sencha touch app we faced an issue with SEO. As far as I know a site should have all the unique URLs for better SEO. With unique url Google crawler can crawl your URLs more efficiently. Now this could be the issue with Sencha Touch app as we know. We open sencha touch app with our domain URL and then we don't have any URL changes. All our views are loaded locally. So our url will stay like

Now this is not good for SEO as your URL is not changing so google can not index your site. Now this is not good if you are selling your products on your site as normally people search with product name and they can not find your site urls in Google. So what to do? To resolve this issue sencha has introduced routes and history support. So what it does is it changes your URL as and when you navigate through sencha app. Something like

So now you have all the unique urls on your site so those urls can be indexed by Google and can be displayed in search result. But wait we have another problem here. Google ignores all the content of the url after hash tag. So after using routes we are back to the same problem again.  Still our sencha touch app is not SEO friendly. So what to do now. Google suggest to use Hash Bangs(#!) instead of Hash tag (#) So if use this our routes will not work as it works only on has tag so what to do? We have to modify our sencha touch routes logic to work with Hash Bangs (#!) For that if you are manually adding history as follow, you have to override add history function.{
            'key': 'value'
}), true);

It will convert your url as follow.

You have manually insert exclamation mark (!) here.{
            '!key': 'value'
}), true);

Now your url looks like below.!key/value

So it's a Hash Bangs and now this URL can be indexed by Google. But that will break your routes logic as now your key would be !key. To make it working you have to change your root definition and add you have to prefix it with . See the example below.

routes: {
            '! productlist/: text': 'goToProductList',
            '! productdetail/:text' : 'goToProductDetail'

That's it and your routes will work as usual. So with this trick a developer is happy, a customer is happy and a SEO guy is happy.