Flash has an undeserved bad wrap in the Search Engine Optimization world. Some SEO experts even warn not to use Flash, because many search engines have trouble indexing Flash content. While Flash content is searchable by Google, it’s critical to use Flash wisely if you want your applications to be searchable by all search engines.
There are two significant problems when Flash is used without alternate HTML content. First, even if Flash content were fully searchable by all search engines, there is still a need to control exactly what content in your Flash applications gets indexed (i.e. you may use animated static text letters to form a word and would prefer them to be indexed as a whole word rather than individual letters). Second, regardless of whether your Flash content is searchable, not all devices that browse the web even support Flash (iPhone, for example), and without alternate HTML content there is no way for those users to view the content in your Flash application.
Providing alternate content for a Flash application can easily be done by using SWFObject. SWFObject is JavaScript code that provides an easy way to add searchable alternate HTML content for your Flash applications (you can find more info about SWFObject, and download it at its page on Google Code). Here’s an example of some HTML code that utilizes the SWFObject dynamic publishing method:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("about.swf", "flashContent", "100%", "100%", "9.0.0", false, {},{},{scale:"noscale"});
</script>
<style type="text/css">
<!--
html,body,div#flashContent {
width:100%;
height:100%;
}
body {
margin:0px;
padding:0px;
}
-->
</style>
<title>About Dorothy Brodsky</title>
</head>
<body>
<div id="flashContent">
<p>This is the alternate content.</p>
</div>
</body>
</html>
Perhaps the biggest challenge in adding alternate content is the amount of time it takes making sure your alternate content is an accurate representation of the Flash content. The best way to achieve this is a data driven solution that allows you to use the same data in Flash as you use for your alternate content. That way, you can be effective with your time while also ensuring that your alternate content is accurate.
One solution is to use XML data. Here’s the XML data from a basic XML file:
<root>
<about>Visualizing and designing, from the capture in the camera to digital darkroom processing to print, with my clients or on my own, is the most wonderful environment I can possibly imagine. Continously being challenged in new ways to create compelling images that transport the soul while conveying the details, all the time staying abreast of new and changing technology, is a consuming passion. It is incredibly exciting being in this field today.
As a photographer and digital imaging consultant, I work with commercial clients and private clients in the New York tri-state area and along the entire East Coast. I am inspired by the visions of other people, and I enjoy structuring them into creative realities. My work includes design and advertising, product, architecture, lifestyle and fine art photography. It has been published, exhibited and commissioned commercially. I am an Adobe Certified Expert in Photoshop. I am a graduate of the University of North Carolina at Chapel Hill and live with my family in Greenwich, Connecticut.
</about>
</root>
This data can be loaded into Flash with the following timeline code:
var xml:XML;
var req:URLRequest = new URLRequest("about.xml");
var loader:URLLoader = new URLLoader();
function dataLoaded(event:Event):void
{
xml = new XML(loader.data);
about_txt.text = xml.about;
}
loader.addEventListener(Event.COMPLETE, dataLoaded);
loader.load(req);
Using the PHP5 simplexml extension with SWFObject, you can easily output XML data as searchable HTML alternate content. This can be done using minimal code, and requires very little knowledge of PHP. Here’s an example:
<?php
$xml = simplexml_load_file("about.xml");
echo($xml->about);
?>
Here is the complete PHP file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("about.swf", "flashContent", "100%", "100%", "9.0.0", false, {},{},{scale:"noscale"});
</script>
<style type="text/css">
<!--
html,body,div#flashContent {
width:100%;
height:100%;
}
body {
margin:0px;
padding:0px;
}
-->
</style>
<title>About Dorothy Brodsky</title>
</head>
<body>
<div id="flashContent">
<h1>About Dorothy</h1>
<p>
<?php
$xml = simplexml_load_file("about.xml");
echo($xml->about);
?>
</p>
</div>
</body>
</html>
Using this technique, you guarantee that the alternate content is an accurate representation of the Flash content, while simultaneously creating an easy way to update both by updating the XML file. I’ve seen my own projects soar to the top of search engine results using this same method. With this technique you can create a Flash based site that is fully searchable by all search engines, easy to update, and accessible by nearly all web enabled devices.
]]>