SEO - For Flash Freaks
February 24th, 2008 by 
retsoced 
I've talked about this before, and there is plenty of information out there meandering along the Super Highway - but a lot of people still seem to really miss the boat on this. Maybe it's as simple as they feel they don't have time, or that it won't really matter anyway; either case though, that's the wrong attitude to have. If you have a website or maybe more importantly if you are building a website for a company - then that website needs to be able to be indexed by the spiders that index for all of the major search engines. For my purposes today, I'm not going to focus on any; rather just touch on what you should do to get your hard work noticed by these hard working agents of search.
With more than 100 million websites called the web their home, you don't want to get hit by your competitors' truck pulling out of the driveway - so you have to do it right from the start. One way to get more information about your Flash site is to place some text within the first frame specifically for this. Google and Yahoo(I think this is the case with Yahoo as well) are able to scan SWF files, and back when Macromedia still existed - they created a tool specifically for checking the results of this, the Flash Search Engine SDK. Take a look at a previous post here for more info.
Getting Started
Let's get right into it and start off with getting the Flash content into the page. You have to start with placement of the SWF into the page, I use SWFObject exclusively. Adobe has some code they use to do this as well, but SWFObject is much cleaner, and I have used for a few years now and there is no real reason to switch. So now a simple starting page could look like this:
<!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" />
<title>most awesome site on the planet</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="/includes/css/screen.css" _fcksavedurl=""/includes/css/screen.css" " _fcksavedurl=""/includes/css/screen.css" " />
<link rel="Shortcut Icon" type="image/x-icon" href="favicon.ico" />
<script language="JavaScript" src="/includes/javaScript/swfobject.js" type="text/javascript"></script>
</head>
<body>
<center>
<div id="mainFlashUI"></div>
</center>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("/media/UI/mainLoader.swf", "microSite", "750", "625", "8", "#FFFFFF");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.addParam("scale", "noscale");
so.write("mainFlashUI");
// ]]>
</script>
<!-- Google Analytics Code -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript"> _uacct = "UA-664899-42"; urchinTracker();</script>
</body>
</html>
What you want to focus on right now is the mainFlashUI div. This is where you will place all of the information you would like to have indexed in regards to the entry point of your site. The other thing to consider here, is this isn't a place to put just a note about the user needing Flash, this is where you place your alternate content so folks who don't have Flash, or choose to turn it off or have a disability can get the same or similar information that is conveyed within the Flash. This is really the big issue; this should be designed with all of those things in mind, and not just SEO. The text and links within the mainFlashUI div will get crawled before any Flash is loaded over that div, and that is what will get attached to the results, this way you don't wind up with something like this:
LOADING PAGE Contact Contact Contact Contact COMPANY NAME Your nice company slogan
When creating this content, be standards oriented and keep the overall code to content very low, and validate your work. This will help with the indexing as well since the crawlers will be able to get to the content easier.
There are some other things to consider here too in regards to SEO; keep the description and keywords precise and relevant to the content being displayed. If you are so inclined, work through some JavaScript to get these values to change as the various parts of the site is loaded, even changing the page title to reflect the current section the user is navigating through.
More Options
When creating the Flash site, it is always a good idea to create multiple sections then load those sections into the main UI of the site. This will keep the initial bandwidth load more tolerable, as well as possibly getting more information to the crawler parsing your Flash site. I don't know if Google or Yahoo actually follow a loadMovie, but it wouldn't surprise if they can.
If the site you are creating is large, you might want to consider using SWFAddress to allow for deep linking to the various sections within your Flash site. These links could then be added directly to the initial page content (or site map) allowing for more links to be crawled and indexed. Also adding some custom JavaScript to your file loading to change the Meta tag information, page title and alternate content could also greatly increase how well your site is indexed. Flash is pretty efficient with JavaScript and you could use the External API built into the last two versions (8 and CS3) and do some pretty fancy AFLAX interactions.....
The Work
The bulk of the work will really reside in how well you design and develop your alternate content, and I know a lot of folks are really opposed to creating an alternate site once your Flash masterpiece has been completed. But it's not really about you is it? I try and say this with the least amount of sarcasm as possible, since you're most likely not putting up a website so you can be the only one to look at it. Take the time to layout out the page as semantically as possible, separating content from markup and creating a nice space that will allow the maximum number of folks to view your site. There are lots of references available for CSS and Standards Oriented Design: use them wisely.
In the end, you will have a site that is quite friendly to being indexed, and your results will reflect your hard work, and the effort put into making the site easy for crawlers to access.
Posted in
Development, flashFoo |
No Comments »
It seems there is a never-ending stream of chatter about proper CSS design and implementation; the use of Standards, as it is most commonly thought of and referred to. This is usually followed by very predictable banter about how you have to make concessions for browsers that aren't compliant (almost always an opportunity to bash Microsoft), then maybe some examples of hacks and fixes to get around these issues. None of it really addresses the core issues, and no one, save a very few folks, really want to try and do anything about it or recognize that there is a problem, even among the companies who proclaim standard compliance. When there are what.... 8 popular browsers and their various available versions, how exactly do you get them all to agree? You can't. There are specifications to follow, but everything is open to interpretation and/or coding errors. So you get variations in layout in every browser and have to figure how to accommodate the new versions when they are released, because invariably the new version breaks your layout where the old one worked just fine. The solution is right in front of our noses though. Give up trying.
One of my left coast friends, Kent turned me onto the game