An SEO implementation for Flash

23 Apr 2009

This describes my approach to adding SEO to a Flash-based site, which is my online portfolio.

You can navigate the HTML 'back-end' pages starting from here.

I. Client Side

On the Flash end, two requirements:

(A) Your site must implement deeplinking, presumably using SWFAddress, such that every page view has its own URL path. And your shell class must be intelligent enough to go directly to any given deeplinkable page view on startup via the URL deeplink.

(Sidenote: While not strictly necessary from an SEO standpoint, having gone that far, you'll probably want all changes to the page view to be driven by the SWFAddress URL-change event, rather than directly by user events like mouse clicks, etc. Which will force you to throw your familiar, tried-and-true coding patterns out the window. And potentially, your laptop thereafter. But is beyond the scope of this entry. ;)

(B) Your site should use an external data source that describes the site structure and contains the site's text content, as well as, typically, image and/or video URL's and the like. Usually, this would be a well structured, static XML file whose node structure corresponds to the site's actual page structure. The deeplink 'crumbs' should be included therein as well - as an attribute of each node, for example. (Extra points for using a database or a CMS instead). And it goes without saying that your Flash should be building its site structure, nav, and page content dynamically using all of the above.

II. Server Side

On the server side, nothing too fancy. You want to create a script that parses the XML tree, constructs and writes out an HTML file for every deeplinked page in your site. You'll run the script every time you make changes to the data, or create a chron job. So in the end, there's nothing very 'dynamic' happening on the back end, just using a script to create static HTML files from a static XML file. (* Extra points for using XSL to magically transform your XML into ready-to-use HTML pages, but since XSL makes my head hurt, I just procedurally concatenated lots and lots of HTML tags together to form one big string...)

The directory path for each generated "index.html" page should correspond to the deeplink used in your Flash (everything after the hash mark). So if you have a page whose URL is:

http://www.mylanguishingportfoliosite.com/#/work/2009/frivolous_viral_microsite

- your script should create a corresponding HTML page whose filename is:

[web root]/work/2009/frivolous_viral_microsite/index.html

Each HTML page should include all the text content for a given page view, since SEO is our goal, after all. Hopefully, you have a page title attribute on your XML nodes that you can leverage as well. Maybe you want to add some keyword metadata in there, too.

The last thing you want to do is have each of your generated html pages auto-redirect to its Flash equivalent using Javascript, or at least display a prominent link for the user to do it for themselves (Ie, strip "index.html" off the end of the URL and insert "/#" after the domain name). Personally, I chose to do the latter, since I took the trouble to create HTML that could stand 'on its own', without the Flash, if necessary. Your pages should link to each other as well; otherwise, the web crawlers may not have a way to get to them all.

So, here's the PHP script I wrote for my site which may help concretize the procedure described above. And the XML file for your reference, used by both the the Flash and the PHP based on their respective agendas. And for the hell of it, my magic keyword, inserted into the HTML to easily verify if/when they were becoming visible to Google. xD

• flash
• sourcecode
• tutorial
• web