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 http://mydomain.com/app/index.html.

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

http://mydomain.com/app/index.html#productlist/cat1name
http://mydomain.com/app/index.html#productdetail/product-name

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.

MyAppName.app.getHistory().add(new Ext.app.Action({
            'key': 'value'
}), true);

It will convert your url as follow.

http://mydomain.com/app/index.html#key/value

You have manually insert exclamation mark (!) here.

MyAppName.app.getHistory().add(new Ext.app.Action({
            '!key': 'value'
}), true);

Now your url looks like below.

http://mydomain.com/app/index.html#!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.

2 comments:

  1. This is only half the story. Google will not index your single page application even though you are using hash bangs. When Google attempts to index your site, it will not use the hash bang, it will translate it to a URL param (name is _escaped_fragment_) so that your server side language can then return plain HTML for indexing. Any hash (hash bang is just a hash) is client side only, the server will never see it which is why Google uses a URL param.

    Most spiders will not execute JavaScript which is why Google uses a URL param so that it can get plain HTML from the server to index.

    -Mitchell Simoens

    P.S. I don't like this comment box.

    ReplyDelete
    Replies
    1. Thanks for the further explanation. I don't know much about SEO, I wrote this post based on my discussion with SEO guy. I will change the comment box.

      Delete