LinuxFest Northwest 2015

Bellingham, WA April 25th & 26th

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, which often sacrifices 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 with assistive technologies for the disabled.

You're about to dive into the de facto introduction to Progressive Enhancement for AJAX, exactly how the W3C recommends you do it!

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.

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 XOMBO---my implementation of just such an API, 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 with JavaScript disabled to demonstrate just how easily a search engine would crawl that same application.

Slides: 

Experience level: 

Intermediate

Speaker(s): 

nolte

Session Time Slot(s): 

Time: 

2014-04-27 14:30-2014-04-27 15:20

Room: 

CC-235

Allowed Types: 

Session

Track: