LinuxFest Northwest 2013

Bellingham, WA April 27th & 28th

Platinum Sponsors

AJAX + SEO is Possible with XSL

nolte's picture

Many believe it's impossible or prohibitively expensive to develop an AJAX web application that also performs well from the perspective of SEO or search engine crawlability. However, by using XSL (a templating language for XML), the HTTP Accept header, and API-driven development, you can now present an appropriately formatted document regardless of the technology being used to access the site. Additionally, applications developed in this manner perform well across many browsers (even lynx) and assistive technologies for the disabled.

You're about to dive into the de facto introduction to Progressive Enhancement for AJAX!

Typically, web applications use a server-side template language. The controller usually passes a bunch of variables to a view that is rendered into HTML and then served to the user. With API-driven development, you have the controller pass back the same data as an XML document straight out to the browser. The XML document has a special tag that tells the browser to grab a template and transform the data and the template into an HTML5 document. All modern browsers support XSL now. Plus, all the pages' template rendering occurs within the client--freeing your server from having to render those documents itself, caching commonly used templates semi-permanently in the browser cache.

Therefore, the traditional "view" of MVC is pushed out to the client. But, if the browser's HTTP Accept header doesn't indicate that it supports XSL, then the entire page will be rendered on the server side into HTML.

XSL, the XML Stylesheet Language, is supported in nearly every technology used for web development both within clients (natively or via JavaScript) and on the server (PHP, Java, C#, etc...). You can even render them with an Apache module. Therefore, the particular language and framework you use to serve up the XML is immaterial. How one goes about implementing this API in the language of your choice is an exercise left up to the listener, but I will spend some of this time talking about one of my implementations of just such an API in PHP. A demonstration of the technique should be enough to get you started and my slides will contain simple example code written in PHP.

For people simply interested in learning how XSL works or who are building non-AJAX web applications, the first section alone would be quite interesting. However, if you're a fairly advanced web developer familiar with jQuery or AJAX development in JavaScript, stay tuned. You'll begin to see how easy it is to turn a static web application into a dynamic, AJAX-driven application that degrades gracefully in the event that the browser doesn't support JavaScript, XMLHttpRequest, or XSL. During this part of the presentation, I will explain how the same XML responses, XSL templates, and a little JavaScript from the first section can be used to produce an improved AJAX version of the same application.

Once you've seen the fundamentals demonstrated in a normal browser and seen it subsequently picked apart with Firebug, we'll take the application for a quick spin in the text-only lynx browser to demonstrate just how a search engine would perceive that same application--if not to prove that it does, in fact, work.

Experience level: 

Intermediate

Speaker(s): 

nolte

Session Time Slot(s): 

Sunday, April 28, 2013 - 14:30 to 15:20

Track: 

Comments