I have been thinking about search engines inability to crawl flash files for quite some time now, but then it struck me - use one content file to serve up both the Flash and HTML, then use JavaScript to embed the Flash. Wow, that is really quite easy.
Background
Programming an enter website in Flash is inherently hard for search engine robots to index. This is because all the website content is sitting inside a complied SWF file. This technique has disappeared to the backs of our minds (much like the 80’s) and has turned into an SEO no no. However, there is some light at the end of the tunnel because Google can actually read a flash file. But this technique is not foolproof - mainly because it is very hard to understand structure, context and semantics when reading a linear Flash file as a set of static HTML pages.
Take the following example : ‘Index Index action 92 anatomy 6 Arm band 127 Around the world 62′ - does not really make any sense to me.
Example
Here is an example of search engine friendly flash programming. Wow that is amazing I hear you exclaim, well I will tell you how I did it.
Solution
First of all there needs to be one main content file. The reason for this is that you don’t want to have to update both the Flash and HTML if there is a change to the content or you need to add an extra page. I did this with a PHP array, setting up each page (you could do it with any other server side scripting language):
//setup the pages array
$pages = Array();
//add each page to the main pages array
$page = Array();
$page['navTitle'] = 'home';
$page['img'] = '_img/home.jpg';
$page['content'] = "home content goes here";
$pages[] = $page;
$page = Array();
$page['navTitle'] = 'about';
$page['img'] = '_img/about.jpg';
$page['content'] = "about content goes here";
$pages[] = $page;
//ect...
Then next trick is to use JavaScript to embed the Flash into the HTML page. The reason JavaScript is used to embed Flash is because search engine spiders to not read JavaScript at all. This quirk enables only visual browsers (i.e. people using a web browser) to see the Flash, which is inevitably what we want. Now there are a number of ways to embed Flash using JavaScript, the SWFObject seems to be the popular choice at the moment. However, I recently read about Robert Nyman solution, which looks very promising and at a small 2.1KB, who could you go wrong.
Once we have both the content and the Flash setup, we need to build the website. The first step is to make a normal HTML website using the before mentioned PHP array. Then essentially you do the exact same thing in Flash, however, instead of using PHP you use ActionScript:
//load the nav from the PHP array
loadNavTitle = new LoadVars();
loadNavTitle.load('path to echoed out php file');
loadNavTitle.onLoad = function (success) {
if (success) {
navTitle = loadNavTitle.result;
navArray = navTitle.split('|'); //split up the echoed data into an array
buildNav(); //function to build the nav
}
}
function buildNav(){
for (i=0; i
//spawn clips
root.attachMovie('navObject', 'nav_mc'+i, _root.getNextHighestDepth());
//set instance names
var nav_mc:Object = _root['nav_mc'+i];
//setup an id
nav_mc.id = i;
//add the text
nav_mc.nav_title.text = navArray[i];
//on release
nav_mc.onRelease = function(){
getContent(this.id);
}
I have left out some steps, namely to PHP file to import the Flash data and the main HTML index page, but the essential structure is there.
Done and done!
Conclusion
So there you have it, a fully featured, animated website that is search engine friendly. And with no ajax! Who would have thought.
Technorati Tags: SEO, flash, JavaScript, web
