Using Search Engine Optimization (SEO) In Flash

Posted on

1/12/2008 in Tips & Tricks

After reading an article on SEO and Flex by Ted Patrick and another by Josh Tynjala, I recalled my foray into doing this on a recent Flash project at work. I figured that I should share this with everyone because I know a huge knock on Flash is that it isn't SEO friendly. Remember, I'm no SEO expert (and I don't think anyone out there really is), but these things should definitely help out in your Flash projects.

A quick note about the example files: If you're going to test the example files through the browser (index.html) and not through Flash, you'll need to open up the Flash file and remove the "../" before the loading of the index.html file.

Loading External Content
I was introduced to this technique by Tom Stanley. We were working on a project where we wanted to have a Flash splash page but also for it to be crawlable by spiders from search engines looking to grab the content. Tom showed me a way to create the document in HTML and CSS (and I really suck at CSS, just for the record) and if someone doesn't have Flash installed or a spider is trying to crawl the site it will still see the content. Of course, this is a relatively rudimentary example and you'd have to get creative to show ALL your site's content, but it is definitely a good starting point. You basically set up an HTML document to mimic your site's content and put all the text there. The following is the HTML document we'll use in this example:

PLAIN TEXT

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Flash and SEO</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<script type="text/javascript" src="js/swfobject.js"></script>
</head>
<body>
<div id="container">
<div id="flashcontent">
<div id="htmlcontent">
<div id="header">
This is the first line up top.
</div>
<div id="footer">
This is the second line down under.
</div>
</div>
</div>
</div>
<script type="text/javascript">
var so = new SWFObject("swf/SEO.swf", "SEO", "550", "400", "9", "#000000");
so.addParam("scale", "noscale");
so.addVariable("pageData", "../index.html");
so.write("flashcontent");
</script>
</body>
</html>

Here is the CSS file we are using in this example:

PLAIN TEXT

CSS:

body
{
margin: 10px;
padding: 0px;
background-color: #000000;
font-family: Verdana, Sans-Serif;
font-size: 12px;
overflow: auto;
color: #ffffff;
}
#container
{
width: 550px;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-color: #000000;
}
#flashcontent
{
padding: 0px;
}
#htmlcontent
{
margin: 0px;
padding: 0px;
background-color: #000000;
}
#header
{
height: 200px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
padding: 5px;
background-color: #666666;
}
#footer
{
height: 200px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
padding: 5px;
background-color: #333333;
}

If you download the example files and run them, you will see the SWF embedded in the HTML. If you take out the SWFObject code, you will see that I've set up my CSS to mimic the Flash aspect of the site so the user gets a pretty good idea of what it looks like. Again, this is not always easy to do with projects not as simple as this, but for our purpose here it gets the job done.

Then we move over to Flash to load the content into our SWF file and display it. Here is the messy AS2 version as usually is the case with XML in AS2 unless you're using a third-party tool like XPath:

PLAIN TEXT

Actionscript:

var dXML:XML = new XML();
dXML.ignoreWhite = true;
dXML.onLoad = displayData;
dXML.load("../index.html");
// trims whitespace before the string starts
function ltrim(input:String):String
{
var size:Number = input.length;
for (var i:Number = 0; i <size; i++)
{
if (input.charCodeAt(i)> 32)
{
return input.substring(i);
}
}
return "";
}
function displayData():Void
{
line1_txt.text = ltrim(dXML.firstChild.childNodes[1].firstChild.firstChild.firstChild.childNodes[0].firstChild.nodeValue);
line2_txt.text = ltrim(dXML.firstChild.childNodes[1].firstChild.firstChild.firstChild.childNodes[1].firstChild.nodeValue);
}

Note that I had to use a function I took out of (oddly enough) the AS3 corelib that trims the whitespace before a string. For some reason which I still can't figure out why, when I traced the text coming into Flash it had a TON of whitespace before it. I assume it has something to do with the way the HTML is formatted and that it's not an actual XML document so ignoreWhite isn't working on it, but I'm not sure about that and this seems to work just fine so I'll leave it at that.

And here is the much cleaner AS3 version of the same thing using E4X:

PLAIN TEXT

Actionscript:

var dataURL:String = "../index.html";
var dataLoader:URLLoader = new URLLoader();
dataLoader.addEventListener(Event.COMPLETE, displayData);
dataLoader.load(new URLRequest(dataURL));
function displayData($evt:Event):void
{
var dXML:XML = new XML(dataLoader.data);
line1_txt.text = dXML..div.(attribute("id") == "header");
line2_txt.text = dXML..div.(attribute("id") == "footer");
}

You may also notice that I took out the namespace from the html declaration. The line used to look like this:

PLAIN TEXT

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

After trying to figure out for about an hour and a half on why my E4X filtering wasn't working in the AS3 version, I finally came across an article by Mims Wright that explained it. Make sure to keep this in mind when doing your HTML documents or you, too, will waste a lot of time pulling your hair out and doubting your knowledge of E4X.

As you can see in Josh's article stated above, this method (but a slicker one, actually) was used on the Flex Directory site with XSL.

Naming Your Files
Also in Ted Patrick's post (a comment by Rob Dixon) is a tidbit that we often use at work as well. When naming your files, use search engine friendly names. For instance, if you have an HTML page for your reviews by Jane Doe, call it reviews-jane-doe.html rather than reviewsjd.html or something to that effect. This is a more search engine friendly approach and it will get indexed higher.

Using Flash's Built-In SEO Tools
I'll be perfectly honest and say right now that I don't know how much this actually helps, but it was included with Flash 8 I believe and was a big point back then so I'm guessing that it does have some effect. When you create your Flash document, go to Modify → Document and this will bring up the Document Properties dialog. Here you have space to enter your site's Title and Description which is supposed to help in indexing your SWF file by search engines. Keep in mind that the naming convention for your HTML files tip will also apply to your SWF files, so make sure to do name your SWF files accordingly as well.

NOTE: I literally JUST got done writing this whole post (which I planned to write a couple of days ago) and read the last comment (which was just recently posted) in Ted Patrick's post. Sure enough, something similar to this has already been posted (apparently almost a year ago to the day) here. Now you have two resources outlining this stuff