Improving Flash SEO through progressive improvements and jQuery

I’ve recently finished a book on SEO, titled Building Findable Websites by AArron Walter. A lot has changed since I learned about SEO techniques. One section really got me thinking though, named Findable Flash. Ever since I’ve programmed in AS, SEO has never been a big priority for me. I was pretty much fine with the fact Flash was non-indexable by search engines (or very difficult for search engines to index), and that the power of Flash would make up for it (at least that’s what I thought). But recently I’ve seen a shift in thinking among clients. They almost all demand SEO friendly sites. That’s why this section really got me thinking.

Below is an experiment, based on that section in which, we layer Flash on top javascript, css, and the html (the database is an optional component, but that’s not really what this is about). This technique is called “Progressive Enhancement”. It’s nothing new, but the way it’s been presented to me I thought I could improve the way it would work.

NOTE: It’s not necessarily the approach I would take if I were developing a new site, but I like the concept. See the CONCLUSION at the bottom of the page for what I would do for a new site!

Overview:

Essentially what happens is we start with an html(data layer) page, add the css (view layer) to make the design look good to make a fully functional beautiful website that doesn’t require any javascript. This is the base. It conforms to web standards and people can view it without Flash or javascript.

Now for people who have javascript and Flash, we add a new layer. This layer is the WOW layer, it makes the website pop. How it works is to take all the html code and put it inside the Flash using jQuery and FlashVars.

What I’ve done to try is improve how the data gets into flash as FlashVars. In the html file, we add a class named ‘data’. From there, we call jQuery to get all the data classes and create a key/value object to pass into Flash. It’s important to note that this is just a simple proof-of-concept. It’s far from a polished piece and there are limitations to it.

Enough talk, let’s look at the code

What you need:

All the files you’ll need are here.

You can see a simple demo for the finished piece here.
And see what it looks like with Flash and javascript here.

How to do it:

So the first part should be easy. You either have an existing site or create a new one.
Let’s start walking through the code. What you need to do is to add the ‘data’ class to each element you want to pass into the swf. So below are some excerpts from the sample code where I’ve added the ‘data’ class to some links and the ‘sidebar’ div.

<div id="nav">
   <ul>
         <li class="nav-item data" id="link1"><a href="index.php">Link 1</a></li>
         <li class="nav-item data" id="link2"><a href="contact.php">Link 2</a></li>
   </ul>
</div>

<div id="sidebar" class="data left">
     <p>In this sidebar this could be html or links</p>
</div>

That’s it on the html side. Let’s look at the Javascript.
The guts of what’s going on is in the ‘add_param’ method.

// Creates key / value pairs
 function add_param(index, el, att) {
	 // set the parameter key by checking the id of the element
	 // if the element doesn't have an id, we use the index
	var param_key = ($(el).attr(att) != "") ? $(el).attr(att) : index;

	// set the parameter value by checking if this element is a link or not
	// if it's a link save the link if not save the html from the element
	var param_value  = ($(el).has('a').length == 0) ? jQuery.trim($(el).html()) : $(el).children().attr('href');

	// add the key and value to the param object
	params[param_key] = param_value;
 }

First we get the key by checking if the element we add has an id. If it does, that’s the key, if not, we use the array index from the jQuery ‘each’ method. Next we check if the html contains an link, we need the url not all the markup. Finally, we add the key/value pair to the object.

After we’re finished adding all the elements to object we use swfobject to replace all the content in the page.

// finally replace the content in the div with the swf and pass it all our
// key/value pairs in the object
swfobject.embedSWF("view.swf", "replacedContent", "550", "400", "9.0.0","expressInstall.swf", params);

Now let’s take a look at the Actionscript. It’s actually very basic. The main method is populate_data. It’s the method that creates an associative array of the key/value’s that are passed in via the FlashVars.

// populates all the data into an associative array
private function populateData(params:Object):void {
	for (var key:String in params) {
		_keyArr[key] = params[key];
	}
}

And then there’s the getDataFromDiv method to retrieve the values.

// gets the value from the key and returns
// No Data if the key is null
public function getDataFromDiv(name:String):String {
	return (_keyArr[name] != null) ? _keyArr[name] : "No Data";
}

The rest of the file is just visual and animation stuff.

Another thing I read in the book was regarding page load and load order. Aarron mentioned that the browser loads javascripts and stylesheets 2 at a time. So theoretically, if this script existed at least 2 calls before the stylesheet, we could remove the stylesheet and prevent it from ever loading, thereby reducing the page load. By doing something like this:

$("LINK[href='style.css']").remove();

Conclusions:

I like the concept but I’m not convinced of it’s practicality. It might be useful for an existing site. Especially if you needed all the copy and didn’t want to copy and paste an entire site! If I were to build a site from scratch, I’d check for javascript first then load either the html or flash version site. I’d use a database to hold all the data, to populate both the html and flash. In Flash, I’d use AMF to get all the data.

This entry was posted in Labs and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>