DRY Up Your SWF SEO

We've talked about search engine optimization with Flash before, and for large database-driven sites the methodology still applies. But for smaller Flash sites that still have great content there may be a simpler, DRYer (Don't Repeat Yourself) solution.

This technique, just like unobtrusive javascript, works best when the page is first designed for the lowest common denominator (in this case search bots or folks without Flash) and then progrssively enhanced with a richer experience when supported. With that in mind, let's start with the navigation.

<div id="nav">
<ul>
<li><a href="/" class="selected">Home</a></li>
<li><a href="/about/">About Us</a></li>
<li><a href="/contact/">Contact Us</a></li>
</ul>
</div>

Next, our page needs some content. It may have images, paragraphs, bulleted lists and some formatting. It's not XML, so we'll want to keep the tags that lend the formatting.

<div id="content">
<p>Hello <b>World</b></p>
</div>

This basic HTML has created a great foundation for our site. Screen readers, search engines, and iPhone users will all be able to enjoy our content. But for folks with Flash, we can make the experience even better. If we place the nav and content divs inside a wrapper div, SWFObject can replace the contents of the wrapper with our nifty Flash movie.

Getting started, that unordered list nav looks very familiar as HTML, but it also looks like something else — XML. So why don't we load this XML into our Flash movie? It even tells us which page we're on (via class="selected"). That will allow great flexibility with the design of the nav in Flash. Using SWFObject, it's as simple as this:

so.addVariable("xml_input", escape(document.getElementById("nav").innerHTML));

Now we should feed the content into Flash the same way as the faux XML nav:

so.addVariable("html_input", escape(document.getElementById("content").innerHTML));

All that's left is to parse the XML for the nav and render the HTML from the content. Executions will vary, but this should get us started:

// Parse the xml content
XML.prototype.ignoreWhite = true;
var myXML:XML = new XML();
myXML.parseXML(_level0.xml_input);
var rootNode:XMLNode = myXML.firstChild;
...
// Set the html content
_root.content_txt.htmlText = _level0.html_input;

This method allows the developer to spend more time building a sound, accessible site and less time creating XML schemas to load in duplicate content for two presentations. Flash supports a good subset of HTML tags as well as custom CSS, so you should be able to match most of the usual content formatting.

Bobby Uhlenbrock, Application Developer, Barefoot