Marionette apps and SEO for pushstate/progressive enhancement

[Nilesh Kale]

Hello

I've developed a Marionette app loosely based on the app structure given in David Sulc in his excellent eBook.
My app uses pushState instead of # url's. On server, I'm using Lithium PHP framework and it can be easily used to respond to any complete URL with pushstate with basic html content + javascripts/templates.

Now that my app is meeting most of the functional requirements, I though about SEO for single page apps (rather late!) and stumbled upon Derick's post from Sep 2011 about progressive enhancement approach that can be used by apps to ensure that search engine crawlers can index the pages.

The approach of progressive enhancement in short 'reverse maps' the existing html content to view's el by passing the element to view at creation and creates the views.

Question(s):

1. What is the easiest method to implement such progressive enhancement in existing marionette app with complicated nested layouts?
2. Any interesting insight that other developers might want to share when it comes to SEO for marionette SPA's.
3. Feature Request: Can Marionettejs community look at options to implement the support for progressive enhancement/SEO friendly behavior so that attaching views to rendered html becomes easier?

Example: The server renders the html results into a defined element and is then picked up by marionettejs and views are automatically created based on the html mark up provided in the page? A very simplistic way could be passing options to views and view then attempts to create the models from the html while referencing the template for this view.

 var myView = new MyCollectionView({ buildView: true, fromElem: '#fromServer'});

Thanks
Nilesh Kale

[Roberto Guerra]

You can save yourself some headache and just use prerender.io

[Hyojung Kwon]

I also searched this issue several days and my conclusion is to get help from headless browser such as phantomjs or zombie rather than progressive enhancement approach.

If you add bellow meta tag into your head section in html file google crawler will send request with ugly url again.

<meta name="fragment" content="!">

For example, if your original url is "http://example.com/posts", google crawler is going to navigate to "http://example.com/?_escaped_fragment_=/posts" 

Once your server received request with this ugly url, headless browser comes into play.

phantomjs or zombie navigate to original url (http://example.com/posts) and get contents of that page and return it to the google crawler.

You can check my idea in my sample code (https://github.com/RayKwon/seo_sample_zombie) 

Even though it is written in node.js and ember.js with hashbang not pushState, but you still can get idea from it.

Hope this helps.

--
You received this message because you are subscribed to the Google Groups "Backbone.Marionette" group.
To unsubscribe from this group and stop receiving emails from it, send an email to backbone-marion...@googlegroups.com.
To post to this group, send email to backbone-...@googlegroups.com.
Visit this group at http://groups.google.com/group/backbone-marionette.
To view this discussion on the web visit https://groups.google.com/d/msgid/backbone-marionette/25a5fae8-06a1-4efe-97e8-faf63caf60b0%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--
Hyojung Kwon

(Cell) 82-10-2676-1072

[Nilesh Kale]

Hi

Thanks for the git link. I'll check the headless approach out and see how it goes.

Regards
Nilesh Kale

To view this discussion on the web visit https://groups.google.com/d/msgid/backbone-marionette/CAAObNNGvXG1XYJ4QUxNYbKqx1%3DrkQhLS7QwtveNYL%2BFwCb-a6g%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

[Bret Askeland]

Nilesh - I would be interested to see how you did this and if its working?  Do you have your code on github?

To unsubscribe from this group and stop receiving emails from it, send an email to backbone-marionette+unsub...@googlegroups.com.

To post to this group, send email to backbone-...@googlegroups.com.
Visit this group at http://groups.google.com/group/backbone-marionette.
To view this discussion on the web visit https://groups.google.com/d/msgid/backbone-marionette/25a5fae8-06a1-4efe-97e8-faf63caf60b0%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--
Hyojung Kwon

(Cell) 82-10-2676-1072

--
You received this message because you are subscribed to the Google Groups "Backbone.Marionette" group.

To unsubscribe from this group and stop receiving emails from it, send an email to backbone-marionette+unsub...@googlegroups.com.