Part 1 – Creating a Shadow Site

Creating a beautiful web 2.0 website in Flash/Flex is very satisfying. I really enjoy the development time savings of Flex versus that of general HTML/javascript solutions and the crispness of the interfaces created. The pleasure of Flex development is something I can talk about for hours and I have even been known to evangelise in my local bar on a Friday night.

It’s not all roses though, as Flex solutions do come with one major flaw; They are not search engine friendly (for a number of reasons). Part 1 of this article explores a solution using a “Shadow Site“, which is a term I surfed across recently and feel it accurately describes the subject.

The Problem

You are probably already aware of the issues associated with SEO (Search Engine Optimisation) and Flex, but just in case this is a new concept for you I will briefly explain the issues that are Flex related:

Pure Flash/Flex sites are not crawled for search text

As your SWF is basically a compiled program that is executed through the Flash Player, for a search engine to be able to read any embedded content it would have to effectively decompile your SWF. This is a problem for a number of reasons:

• Google doesn’t do it (presently)
• developers may choose a Flash solution as a means of obfuscation (compared to alternative web 2.0 strategies) so don’t want their precious code available to the world
• the Flash Player/SWF standard is owned by Adobe and it is debatable whether it should be decompilable (see point above)
• decompilation would cause a large processing overhead for a search engine crawler

Pure Flex solutions are all inclusive within a single SWF structure

When you compile your Flex programs they ultimately produce a single SWF file (not including all of the associated html, javascript, shared resource files, etc.). This single file contains the whole program (and therefore navigation structure) so there is no need to leave the SWF just because you are moving to a different page, effectively making the whole URL structure irrelevant. Although this has a lot of advantages, it makes linking to a particular point in your application something you really have to think about. That particular problem is solved in Flex 3 with the improved “Deep Linking” functionality, but how does a search engine know about your deep links?

A Solution

What I have currently implemented as a solution on the Clarisolve project is a “shadow site”. Historically the term “HTML version” or “Text only” has been used, but in this case the symantics are slightly different because I don’t really want people to see underlying site, I only want the search engine to. In my implementation, the shadow site is basically a WordPress blog used as a content manager with all the relevant HTML articles stored in the associated MySQL database. WordPress 2.5.1 offers a number of interfaces with which to extract the pages and articles, so I can very easily use the same source text in my Flex application too. WordPress also has a great publishing element and user manager, so makes for a very rich content management system. You can of course use any CMS of your choice, but I chose WordPress.

The most important part to creating the shadow site is the javascript that queries the current version of Flash Player installed, then either displays the trailing HTML (derived from PHP) or redirects to the Flex version of the site. On redirect, the javascript also interprets the current URL parameters and rearranges them into a friendly format for “deep linking”.

The main reason for using WordPress is the great slug support, which is useful on Google as each page is separately displayed. Make sure that the “PermaLink” settings are not using the default format as historically search engines could not cope with GET notation very well.

Currently, this solution does need some polish as the way I have implemented it is fairly static, resulting in the RSS feed being broken. Solving the problem should be fairly simple by making the javascript text conditionally addable by a PHP function (based on the URL).

To see the shadow site you need to disable Flash in your browser. The easiest way I found to do this is to use Internet Explorer and go to the “Tools->Manage Add-ons->Enable or Disable Add-ons..” and disable the “Shockwave Flash Object”. At the time of writing, the HTML site is actually looking prettier than the Flex site but that will change in time

Hopefully that is all the information you’ll need to create your own shadow site.

The PHP/javascript for selecting whether to use the Flash or HTML looks like this:

<script src="/AC_OETags.js" language="Javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;
// -----------------------------------------------------------------------------
// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

// Check to see if a player with Flash Product Install is available and the version does not meet the requirements for playback
if ( hasProductInstall && !hasRequestedVersion ) {
	// MMdoctitle is the stored document.title value used by the installation process to close the window that started the process
	// This is necessary in order to close browser windows that are still utilizing the older version of the player after installation has completed
	// DO NOT MODIFY THE FOLLOWING FOUR LINES
	// Location visited after installation is complete if installation is required
	var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
	var MMredirectURL = window.location;
    document.title = document.title.slice(0, 47) + " - Flash Player Installation";
    var MMdoctitle = document.title;

	AC_FL_RunContent(
		"src", "playerProductInstall",
		"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
		"width", "100%",
		"height", "100%",
		"align", "middle",
		"id", "ClarisolveWebSite_v2",
		"quality", "high",
		"bgcolor", "#869ca7",
		"name", "ClarisolveWebSite_v2",
		"allowScriptAccess","sameDomain",
		"type", "application/x-shockwave-flash",
		"pluginspage", "http://www.adobe.com/go/getflashplayer"
	);
} else if (hasRequestedVersion) {
    var strReturn = "";
    var strHref = window.location.href;
    if ( strHref.indexOf("/") > -1 ){
        var aQueryString = strHref.split("/");
        for ( var iParam = aQueryString.length-1; iParam > aQueryString.length-3; iParam-- ){
		    if ( isNaN(aQueryString[iParam]) ) {
	            strReturn += "page=" + aQueryString[iParam];
				iParam = 2;
			} else {
	            strReturn += "archives=" + aQueryString[iParam] + "&";
			}
	    }
    }

    window.location = "/ClarisolveWebSite_v2.html#" + strReturn;
}
// -->
</script>
<noscript>
  	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="ClarisolveWebSite_v2" width="100%" height="100%"
			codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
			<param name="movie" value="ClarisolveWebSite_v2.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#869ca7" />
			<param name="allowScriptAccess" value="sameDomain" />
			<embed src="ClarisolveWebSite_v2.swf" quality="high" bgcolor="#869ca7"
				width="100%" height="100%" name="ClarisolveWebSite_v2" align="middle"
				play="true"
				loop="false"
				quality="high"
				allowScriptAccess="sameDomain"
				type="application/x-shockwave-flash"
				pluginspage="http://www.adobe.com/go/getflashplayer">
			</embed>
	</object>
</noscript>

<?php
define('WP_USE_THEMES', true);
require('./wordpress/wp-blog-header.php');
?>

Conclusion

SEO is quite a large subject, so I haven’t gone into the details of how to understand the inner workings of Google or the use of “<strong>” and “<h1>” tags. Instead I have concentrated on how to get your HTML recognised in a search engine and how to alter your URL to something more “Deep Link” friendly.

The next part of this article will be related to importing WordPress articles and deep linking.