SMX East 2008: AJAX, CSS and Web 2.0

A big part of Web 2.0 is bringing the richness of desktop applications onto the Web, to create both a richer user experience and a stable development platform. With technologies like Asynchronous JavaScript And XML (AJAX), Adobe Flash and Microsoft Silverlight, we’ve made a lot of progress. As far as the Web has come, these technologies are still far from mature in realizing the promise to give modern developers and users the best of both worlds.

In the final installment of our SMX East 2008 series of blog posts, I thought I’d make a slight departure from the topic of the session and talk about Web 2.0 technologies at a slightly higher level. But for those that missed the talk , I’ve included the slides below.

You often hear that to ensure your websites are search engine-friendly, you should avoid using technologies such as AJAX, Flash, and Silverlight. But that’s not exactly the case. You certainly can use these and other technologies, but you should consider how you’re using them to ensure that you can reap the functional benefits they offer while still making your site accessible to all users and search engines alike.

Certainly, there are tactical considerations when implementing these technologies. For example, don’t lock navigation behind JavaScript and don’t build a Flash application with a single URL for all pages of content. But there are also strategic considerations about how to use these technologies, if at all. What is the best way to employ them for maximum benefit?

Web Applications

Think of sites like turbotax.com, hotmail.com, salesforce.com, and picnik.com. These former desktop applications have all been made more convenient (and possibly more powerful) by a few rocket scientists who figured out how to implement them on the Web. The rich Internet application (RIA) technology they employ, however powerful, makes these Web applications a black box to search engines. However, that is okay because you probably don’t want your taxes or e-mail indexed! Search engine optimization (SEO) for these technologies is more about the content they wrap around rather than the actual Web application itself. Here’s some specifics:

Landing page: A simple HTML/CSS landing page is essential for these Web applications, as this is where you’ll want the search engines to steer all your branded query traffic. It should load super quickly and provide direct links to all of your other indexable content, such as your blog and help content.

Blog, sales content, and conversion tracking: Just because you’ve got the coolest Web application in the world doesn’t mean that it couldn’t benefit by some great content as well. As they say, content is king. In this spirit, having a blog and a set of high quality sales and informational content can help draw a lot of links and attention to your site. Just make sure you’re properly instrumenting your site and all the places you’re driving traffic from so that you can track your conversions and optimize these pages accordingly.

Help content: Don’t forget your help content. Users should be finding help on your site, not on third party sites that may be giving questionable guidance. Ensure your content is accessible to search engines, well linked, and included in a sitemap. (Link to it from specific articles in your blog too, when appropriate!)

Content Web Applications

I’m sure you’ve seen these sites (though probably not found them via search). These are sites that have a lot of content search engines would love to index and customers would love to find, but unfortunately they are locked behind a Web application that is impenetrable to search. Hidden in a veritable lock box. Examples include: Live Search Help Content, Adobe Max Conference, Arbor Snowboards, and Swatch. Many times these sites are sold as the best of both worlds, and at first glance that is what they look like. But the more you use them, the more you realize how impractical they are for both searchers and users.

Here’s a few strategies for how to optimize these types of sites:

Refactor content and functionality: Figure out which components of your website are content, and which are functionality. For an example of this, take a look at the Mix Conference website vs. Hulu’s website:

image image

In each of these screenshots, the RIA portion of the site is highlighted in red. Both of these sites present a gallery of videos for their customers to see. But in the Mix website on the left, they have packaged both the content and the functionality (such as navigation, commenting, viewing) into a single RIA. Contrast that to the Hulu implementation on the right, where they have built the navigation of the site out in HTML, and use the RIA components on each page for specific functionality, including video playback and related video recommendations. This method allows search engines to crawl and index all the content on the site, and also allows users to easily bookmark and share content they like.

Down-level experience: A down-level experience for RIA components should be provided whenever it is appropriate so the content is also accessible to search engines, Smartphone Web browsers (more than 100M!), and people with screen readers. For more information on developing a down-level browser experience, see this PowerPoint presentation from Jane and Robot.

Sitemap: You should also consider providing an XML sitemap of all your content for use by search engines, and also an HTML browse experience for your customers as well. For more information on sitemaps, see this post on the Live Search blog.

Content Website

Also known as just a normal website. Using RIAs can also be a great idea.However, you’ll want to ensure that you use all the same best practices as outlined above. Examples of this include Wikipedia, Digg, TechNet and MSDN. Best practices for optimizing these types of sites have been well covered in another post on the Live Search Webmaster blog.

At the end of the day, it doesn’t matter what technology stack you use to create your website. You just need to make sure that your implementation decisions reflect the goals of your website and you are getting the best ROI from search acquisition.

— Nathan Buggia, Live Search Webmaster Team