Flash SEO: graceful degradation to add meaning and structure

Flash sites are traditionally less searchable by Google than plain HTML sites. Now that Google supports the indexing of Flash files, you might think that’s that. You just make your shiny site in Flash and never have to worry about being searchable. Still, something is missing: meaning and structure. Both of them are present in regular HTML sites, but not in Flash. So, how exactly can we make Flash sites just as searchable as HTML sites?

Structural information

How does Google actually index Flash files? Inside a Flash .swf file, Google reads its text fields and follows its links, sure, but can Google add structural info to all this? Flash files normally contain text, but also layout instructions, effects, and other visuals. In other words, Flash files contain a mix of content and styling. This sounds like the old days, when you were used to wrap your <html> text in <font> tags.

With plain XHTML and CSS though, content and styling are separated. This has a couple of benefits, which we all know by now. Google can easily read the “raw source” of a web site, and the visitor sees a visually pleasing result of that same source. The CSS transforms the raw source of the XHTML, as it were, and is declared in a separate CSS file. What’s nice about this, is that Google doesn’t have to plough through lots of visual declarations like <font> tags or <color> tags, which don’t add any meaning to the content. What remains for Google are structural tags, like <p>’s for paragraphs, or <h1>’s for headers. Headers and paragraphs add meaning and structure to a site, and are relevant for your content to rank high on Google. For example, Google knows that if your header contains the word “cookies” and your paragraph contains the word “sugar”, that section would be about cookies, and sugar would be of less importance (it could be an ingredient). If both words were reversed, the section would say something about sugar, and cookies would be of less importance (cookies could be an example of things to make with sugar). If a Flash file contains these same words, Google doesn’t know which is more relevant, and thus isn’t able to add meaning or structure to your site.

Hold this in mind.

Embedding Flash

We now look at how Flash .swf files are embedded in HTML files. The recommended technique to load Flash files in a browser is to use a script, like SWFObject for example. What it does is that it injects your Flash file in a specified <div> tag in your HTML source code. For example, if you have this <div> with id “flashContent” in your source:

<div id="flashContent">
<p>Please download Flash</p>
</div>

…this command will replace that with the flash file “yourFlashFile.swf”:

<script type="text/javascript">
swfobject.embedSWF("yourFlashFile.swf", "flashContent");
</script>

This is a nice technique because it gracefully degrades. If no Flash Player is installed at the visitors computer, the message “Please download Flash” is displayed in the <div>. Otherwise, the message is replaced by the Flash content.

So, this is the recommended technique to embed Flash files. But what about searchability? Imagine that your Flash file contains lots of text, or maybe reads it content from an XML file. In theory, you could copy-paste the text from your Flash file into the <div> of your HTML file, and Google would have access to it. But this presents two problems. One, you have your content twice. That is twice the bytes, and it just doesn’t sound elegant. And two, you have to recreate the tags around your content, to add structure to the text. This is cumbersome.

Use Flash like you use CSS

So, what do we do? We turn things around. First we add content, then we style. Just like CSS on top of XHTML, we put Flash on top of XHTML. The concept is to see Flash as the little brother of CSS. Or actually, the more powerful one.

First, type your content in any editor, preferably without markup. Then copy-paste your text into a HTML file. Wrap <h1> header tags around your headers and wrap your paragraphs in <p> tags, etc. When done, you have your content structured in a HTML file, ready for Google to parse and index.

Now create your Flash file. And, instead of typing text in you text fields, you have to fire up your actionscript skills to populate your text fields with the content from your XHTML file. The key is to write a little XML loader, that loads the contents from your HTML page. Then use the built in E4X commands of Flash to select the content nodes of your XHTML page. Finally, you have to populate your text fields with the data from the XML nodes. Example:

import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;

function load() {}
	XML.ignoreWhitespace = false;
	XML.prettyPrinting = false;
	var loader:URLLoader = new URLLoader();
	loader.addEventListener(Event.COMPLETE, onLoadComplete);
	loader.load(new URLRequest("index.html"));
}

function onLoadComplete(event:Event):void {
	var xml:XML = new XML(event.target.loader.data);
	trace(xml.body..h1.text()) // outputs all h1 tags;
}

Also, dispatchevent.org has some starting points:

Actionscript 3 E4X rundown
Using E4X with XHTML? Watch your namespaces!

Now you have your Flash file, completely separate from the actual content. The content is styled by Flash. Just like CSS does to XHTML content. Benefits: your content is easily updatable without having to enter the Flash IDE, and Google is happily indexing your content. As an added bonus, users without Flash still see the content of your site. You can even style your bare content with CSS, to be ├â┬╝bercompatible. So, in the end, it’s all about content, meaning and structure (and, of course, a little design sauce on top of that).

Wrap up

Advantages of this technique:

  • Fully search engine optimized
  • Meaning and structure restored
  • Content is read once
  • Content is easily editable
  • Visitors without Flash and / or Javascript sill see content

At our studio Booreiland, we created a site using this technique for Unga Toys, an Amsterdam based toy development studio:

www.ungatoys.com

Also, we made our own site this way:

www.booreiland.nl

Go ahead, try to disable Flash or Javascript or view the source of the sites above. It’s an extremely robust technique. We’ll be using it as a standard for our quality mark from now on.

6 Responses to “Flash SEO: graceful degradation to add meaning and structure”

  1. Eelke Says:

    Thanks for this clear explanation. Is it possible to crank it up one more step. If you got clear distinct pages within your Flashfile (like the unga example) would it be possible to design the site in such a way that if you search for ‘unga + storyteller’ in google that you will be directly taken to this scene? That would really be awesome.

  2. Wimer Hazenberg Says:

    That actually is possible I think. You would have to split up your HTML files. For example, in the Unga case you would have different HTML files for different scenes. The same .swf would then be placed on top of each HTML file, along with a Flash parameter that tells the .swf to jump to that scene. Not a bad idea at all.

  3. Eelke Says:

    Phew, hope I can make the giant step between the theory and practice, by firing up my Actionscript skills :)

  4. Kevin Rommen Says:

    It’s a nice solution to get your flash website indexed by Google (or any other search engine). Though the rules of SEO don’t apply here very well because. SEO is about much more then just indexing content. It’s also about your website structure, leading people directly to the content they want to see, time between updates, the way in which your url is written (so no index.php?id=19&someotherthing=nl), activity of your website and a whole lot of other things.

    Therefore this is a nice first step but you might want to take a look at SWFaddress. This is a flash/flex plugin written by Asual. This plugin makes is possible to fake a HTML website.

    Examples: http://www.asual.com/swfaddress/showcase/

    As you can see the plugin updates the url in your browser everytime you move to another state of your application. This makes your website fully indexable; also the structure of your website. Besides this, you can also create a html subsite which has all the content that needs to be indexed. Whenever a person comes to the website they get redirected to the appropiate state in your swf.

    A great advantage you get is that people can bookmark to specific parts of your website. For instance: http://www.booreiland.nl/showcase/ or http://www.booreiland.nl/contact/

  5. Kenny W. Says:

    Nice write up…usually I never reply to these thing but this time I will,Thanks for the great info.

  6. drukarnia Opole Says:

    Awesome post.

    my web blog – drukarnia Opole

Leave a Reply