5 Steps for Building a SEO-Friendly Flash Site Using SWFObject and SWFAddress
In this post I outline what USED to be the best way to build a Flash site that was SEO-friendly. It would serve Flash to the people who had Flash, HTML to the people who could only support HTML, and would allow HTML to be indexed by search engines, and wouldn’t have separate URLs for your Flash and HTML sites. It was beautiful.
However, the landscape has changed. Googlebot now indexes BOTH the Flash AND the HTML in SWFObject. The big problem this causes is that Google now gives results with direct links to your SWFs, which can completely mess everything up — I wrote a post that explores the problems presented by Google’s ability to index Flash if you want to read more. In a nutshell, however, I personally have come to the conclusion that although the method I describe below is not IDEAL, it still offers the best way to build all-Flash sites that will get properly indexed and will most often present the correct links in Google results.
So without further ado, here’s how to go about building a SEO-friendly Flash site using SWFObject and SWFAddress.
- Use SWFObject
If you’re not already using the latest version of SWFObject, you should be. Adobe has now announced that it is supporting SWFObject specifically. The beauty of SWFObject is that it allows you to serve Flash to people who can support it and (X)HTML to people who can’t. Also, search engine crawlers index the (X)HTML alternate content you serve, meaning that if you put your content in there, it will get indexed. - Create HTML pages for each of your flash pages
For each of your Flash pages (home, about us, contact us, etc.), create an HTML page that mirrors its content. That means all the text, all the links, all the pictures, etc. The HTML page doesn’t need to be pretty, but it should semantically reflect the importance of the content on your Flash page (that means have headings, have lists, have paragraphs, use proper links, etc. This will allow search engine crawlers to make proper sense of the content on the site. Also, if you want to make your Flash site mobile-friendly, then make these HTML pages pretty
- Use SWFObject and multiple Flash files to hide the content
So you have all these pages, but you don’t want anyone who can support Flash to SEE them – only search engines. That’s where SWFObject comes in. On each of these HTML pages, you will use SWFObject to embed the same Flash file, but have the non-Flash content reflect the HTML you built. - Use SWFAddress and deep linking to direct Flash users to the proper content
Like SWFObject, if you’re not using SWFAddress, you probably should be. SWFAddress allows you to read information from the URL and then use that within your Flash. The most common reason for doing this is to be able to do deep linking in Flash. I will write some tutorials on how to use SWFAddress in the future, but for now you should download the example files and work through them. Using SWFAddress, you can use #anchors to define where in your Flash you want to go. So if you go to “www.mysite.com/index.html#aboutUs”, you can have SWFAddress load up your “About Us” section. The beauty of this is that search engines ignore #anchors so they won’t get confused and mess up indexing on your site. - Add a JavaScript call using SWFAddress to direct your Flash to the right section
At this point you’ve got multiple HTML pages and the ability to deep link in Flash. Now you need to direct users who come from a search engine to the right content within your Flash. All you need to do is call SWFAddress from JavaScript and update the page URL. Since your Flash is set up to use SWFAddress, it will read the update and take the user to the proper section.
All those steps are a little abstract, so here’s a more solid example:
Let’s say I’ve got a website with three pages: a “Home” page, an “About Us” page , and a “Contact Us” page. I’ve built this website in Flash with only one Flash file called “main.swf”. Now I want to make sure that this site is search engine optimized.
First thing I do is make sure that I embed the page using SWFObject. Since this first page will be my “Home” or index page, I create a page called “index.html”. At this point, my index.html code will look like:
<!-- Start swfobject code -->
<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript"><!--
var flashvars = {};
var params = {};
params.wmode = "transparent";
var attributes = {};
swfobject.embedSWF("main.swf", "flashContent1", "760", "420", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
// --></script>
<!-- end swfobject code -->
<div id="flashContent1"></div>
Now I will create pages just like the page above for all my interior pages. So I will have three HTML pages “index.html”, “aboutUs.html”, and “contactUs.html”. Once those pages are built, I want to take all the content from inside my Flash file and add it to the html page. For example, the “aboutUs.html” page would look like this:
<!-- Start swfobject code -->
<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript"><!--
var flashvars = {};
var params = {};
params.wmode = "transparent";
var attributes = {};
swfobject.embedSWF("main.swf", "flashContent1", "760", "420", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
// --></script>
<!-- end swfobject code -->
<div id="flashContent1">
<h1>About Us</h1>
Here is a bunch of information that I've copied and pasted from my Flash file. It's all the content from my About Us page.
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="aboutUs.html">Home</a></li>
<li><a href="contactUs.html">Home</a></li>
</ul>
</div>
I’ve now got three files with HTML content within them that mirrors my Flash. This means that Googlebot can now see my content. However if someone searches for an item that appears on my About Us page and clicks on the link in Google, they’ll be taken to “www.mysite.com/aboutUs.html” and will see my Flash. The only problem is they’ll see my HOME page in Flash, not my About Us page. That’s where SWFAddress comes in.
First, I have to set up SWFAddress in my Flash file. NOTE: You should always build your site from the beginning using SWFAddress to navigate your Flash. It’s a HUGE pain to try to go back and retrofit your site to work with SWFAddress, but it’s pretty easy to build your site to use SWFAddress from the beginning. Either way you go, you will add ActionScript which looks similar to this:
// SWFAddress handling
import com.asual.swfaddress.*;
function handleSWFAddress(e:SWFAddressEvent) {
try {
if (currentFrame == 2 && e.value == '/') {
play();
} else {
gotoAndStop('$' + e.value);
}
} catch(err) {
gotoAndStop('$/error/');
}
}
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);
See the “CS3″ example inside the SWFAddress download in order to see how the above script would navigate you to the sections in your site (I personally use a different, more complex way but that’s just me). In any case, now the Flash is set up that if I go to “www.mysite.com/index.html#/aboutUs/” it will show the about us section. Deep linking is working.
However, what happens if a person goes to “www.mysite.com/aboutUs.html”? SWFAddress looks for information following the “#” so it doesn’t know that it has to go to the About Us section. You do this by adding updating SWFAddress using a call to it in your javascript. The code for this is really simple:
SWFAddress.setValue([link value]);
So your About Us page code becomes:
<!-- Start swfobject code -->
<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript"><!--
var flashvars = {};
var params = {};
params.wmode = "transparent";
var attributes = {};
swfobject.embedSWF("main.swf", "flashContent1", "760", "420", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
SWFAddress.setValue("/aboutUs");
// --></script>
<!-- end swfobject code -->
<div id="flashContent1">
<h1>About Us</h1>
Here is a bunch of information that I've copied and pasted from my Flash file. It's all the content from my About Us page.
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="aboutUs.html">Home</a></li>
<li><a href="contactUs.html">Home</a></li>
</ul>
</div>
And you’re done! This looks more complicated than it actually is. Using SWFObject is extremely straightforward. SWFAddress is a little more poorly documented, and relying on SWFAddress updates to navigate your Flash can be a little awkward at first, but once you get the hang of it, it becomes a really nice, elegant way of working with site content. I’ll post a tutorial on working with SWFAddress soon, but for now, hopefully this will get you moving on the path toward search engine optimized Flash sites!
