For quite some time now, the Achilles heel of most (if not all) Flash developers has been Search Engine Optimization (or S.E.O.). Somewhat recently, however, Asual has published a new example of how to combine PHP with their latest SWFAddress release to create a relatively graceful solution.
Now, being somewhat busy with work projects all the time, I’ve felt for awhile that my almost 4-year old portfolio site has been needing a re-vamp…not because I don’t like how it looks or functions, but because it was kind of a bare-bones Flash implementation that hadn’t taken advantage of the latest technologies such as SWFAddress because, aside from content, it really hadn’t been updated in awhile. I had been thinking about how to rebuild my site to make it more search-engine friendly, and then I stumbled across a forum where people were talking about the new S.E.O. example from Asual, and I decided to try to give my site a “re-purpose” as opposed to a “redo”.
After implementing the S.E.O. treatment of SWFAddress on my site, I have to say I’m quite impressed with how intuitive it is…although a couple things I had to dig for. The source code for the S.E.O. example is available at Asual.com when you download the latest SWFAddress, so I’m just going to outline the main stumbling points that hung me up for a bit when trying to implement this solution.
The entire functionality relies on having a .htaccess file with a mod_rewrite rule in place that redirects any path that does NOT explicitly lead to an existing file or directory to /index.php. This was not apparent when I looked at the example, so it took a bit of time and searching on Google to figure it out. My .htaccess file looks like this (without the comments – which are there for your benefit):
<IfModule mod_rewrite.c>
# Enables mod_rewrite
RewriteEngine on
# Sets the base folder
RewriteBase /
# Checks to see whether the path is NOT an existing file
RewriteCond %{REQUEST_FILENAME} !-f#
# Checks to see whether the path is NOT an existing directory
RewriteCond %{REQUEST_FILENAME} !-d
# If the above conditions are met, redirect everything to /index.php
RewriteRule .* /index.php
</IfModule>
The next thing that is important is that all your sections (or addresses) that you are giving SWFAddress access to in your Flash, have a relative content area in the “datasource.php” that is provided with the example. In the Asual example, the data for their Flash is coming from this PHP script as well, which is certainly the cleaner way to do it, but since I was adapting a previously existing site, I had to improvise and have “datasource.php” parse through my XML data that feeds my site, and construct itself accordingly.
In essence, “datasource.php” is a giant “switch” statement that returns the proper content for the proper path. For instance, in my site’s example, if you were to go to http://www.willcarpenterinteractive.com/Sites/Scion.com three things would happen:
- /index.php includes the relative content from /datasource.php by passing it the initial path.
- /datasource.php would get the initial “path” as “/Sites/Scion.com”, run through the switch statement to find the proper content for that specific section to return, and then return that so that the proper content is injected into a hidden div on the /index.php page, thus making it visible to search engines.
- /index.php would detect that you have Flash and Javascript and would change the url to http://www.willcarpenterinteractive.com/#/Sites/Scion.com for proper SWFAddress handling.
My conclusion:
After working out the initial .htaccess redirect issue and figuring out exactly how this is supposed to work, I found the solution extremely useful. In fact I think at this point I’m going to definitely hold off on a portfolio redesign. I’ve already analyzed this with several free online S.E.O. analysis tools, and it is about 85% better than the 5% it was prior to the treatment. I would highly recommend this method for anyone wishing to have their cake and eat it too (read: have a Flash site with good S.E.O).