by Ian McAnerin
2004, Rev. 2007

How to SEO Flash

* This is a much updated version of an old Flash Test Page - which I've kept because the tests are still useful.

The problem(s) with Flash

I'll start with a basic statement - Flash is not search engine friendly.

Here is a fictionalized but essentially accurate conversation about Flash being indexed by the search engines:

{Meeting Room at SES}
Flash Developer: I understand that Macromedia has released a set of programs that will allow Flash to be accessible to search engines.
Search Engineer: Yes, that's true, we've looked at it.
Flash Developer: So the search engines can index Flash, right?
Search Engineer: Technically, yes, even without the kit, in the same way we can index PDF and other non-HTML documents, but...
Flash Developer: Yippee! My job is saved!
{Flash Developer runs out of room to tell all his friends and blog about it}
Search Engineer: But... As I was saying, the vast majority of Flash content is not indexable and takes up a huge amount of bandwidth for very little gain in the relevancy of the SERPS, therefore although we CAN index it, we DON'T index it...Hey, where'd he go?
Audience Member: He went to go generate a bunch of work for SEO's...

The bottom line is, that if you think about how the typical Flash file is set up, the first bunch of frames usually just say "Loading" and "1%" 2%" etc. Then often there is some sound files and graphics loaded during this period, followed finally by content, which is often a "symbol" of text buried in a separate button script, rather than editable text. This is usually streamed.

In short, a search engine may have to use up several megabytes of file just to get to the part of the Flash movie that contains text, only to find out it's a program, script or vectorized text, rather than what it would consider to be content.

This is hugely inefficient, a waste of bandwidth, and apparently several studies by the search engines have shown that it's simply not worth it.

Technically, a search engine could also attempt to run scripts on webpages, or download images, vectorize them and then run OCR software on the images to see if there is content there, or maybe run sound-to-speech detection of video and sound files, but the amount of processing power to accomplish this is far in excess of the benefits they would likely gain from it.

Finally, due to the structure of a Flash file, it's difficult to know the context of any text you may find there, since the text may be saved as variables or just pulled from the server as necessary (since a search engine doesn't execute Flash anymore than it executes Javascript, that text would never get pulled from the database or flat-file and thus would never be in the Flash in the first place).

Then you have the issue of Flash files executing other Flash files, and so forth. Since a search engine doesn't execute programs or scripts for safety reasons, none of that content would get indexed.

So yes, it's possible. But it's not going to happen, not for a VERY long time, if ever. Maybe when bandwidth and processing power becomes infinite and free, or close to it.

As for finding URL's, etc - There are two ways that can happen. First, when you generate a Flash file, Flash creates an HTML "container" that calls it. You will notice that it often has content pulled from the Flash file in there as a comment, or noscript. Second, I'm told that if the URLs are in the first couple of frames, a search engine may choose to peek in there, but I've never actually seen that happen personally.

I certainly would not count of either method to rank my website in a competitive area, however. Noscript would work better.

There are some workable methods that you can use to present the search engine with the content from a Flash movie, but hoping it will do it on it's own is not one of them. So, what to do?

The Fix - Proper Use of the Object Tag

First, when Flash is published as a webpage, it generates some HTML code or a container that helps load and run the swf file in a browser. The problem is, that for some reason Macromedia/Adobe decided to use the Object tag improperly, then "fix" it by using a custom tag intended only for Netscape (the embed tag). Two wrongs rarely make a right, and in this case, it makes a mess.

When I generated the code for the examples below from within Flash, it created the following code:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="..."
WIDTH=300 HEIGHT=100>
<PARAM NAME=movie VALUE="flashtest.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#CCCCCC>
<EMBED src="flashtest.swf" quality=high bgcolor=#CCCCCC WIDTH=300 HEIGHT=100
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="...">
</EMBED>
</OBJECT>

This looks like this:

Example 1 - Flash + Embed (This is the standard Flash Movie after Publishing)

In text-only mode, it looks something like this:

{EMBED}

*That's right - only an embed. It's actual content is invisible.

If you remove the movie specific details, you get a general outline like this:

<OBJECT classid="..." codebase="...">
 <PARAM NAME=movie VALUE="...">
 <PARAM NAME=quality VALUE=...>
 <PARAM NAME=bgcolor VALUE=#...>
     <EMBED src="..."
      quality=...
      bgcolor=#...
      TYPE="..."
      PLUGINSPAGE="...">
     </EMBED>
</OBJECT>

Breaking it down even more, you get:

Open Object
Parameters
     Open Embed
      The Same Parameters
     Close Embed
Close Object

In reality, you only need the Object with it's Parameters. The reason that the Embed is here (with completely duplicate information and Parameters) is that the way Macromedia/Adobe uses this Object tag is wrong. Since it's not used properly, it only works in IE. Rather than fixing this, they decided, for reasons known only to them, to add the Embed tag within the object.

Why would they do this? Well, the Object tag is designed to work so that if the main object can't be loaded, then it will continue to look within the Object code for alternative content. This is good and appropriate behaviour (thank you, W3C!).

In this case, what happens is that since Firefox, Netscape and many other browsers can't handle this non-standard method of using the Object tag, it fails and then looks for the alternative content. Then it finds the Embed tag, which contains the exact same information but within a tag they understand. Note that the Embed tag is not a good idea, and will not validate, but since it was used so often by Netscape in the past, most browsers will run it. It's a kludge, and proprietary one, at that.

Naturally, the best way to fix this mess is to use the Object tag properly - then everyone is happy. This has been called the "Flash Satay" method.

Unfortunately, there is no automatic method of fixing the old code yet, so you have to do it by hand. First, remember that since you are fixing the Object, you no longer need the Embed code. Second, make the rest of the code match this (I'll use the example above):

<object type="application/x-shockwave-flash" data="flashtest.swf" width="300" height="100">
<PARAM NAME=movie VALUE="flashtest.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#CCCCCC>
</object>

This will result in the Following:

Example 2 - Flash with a fixed Object Tag (Preparation for SEO)

In text-only mode, it looks something like this:

*That's right - nothing at all. It's invisible.

Now that we have an object that works well in Firefox, IE, etc, we can actually do something with it, SEO-wise. This use of the Object tag to replace noscript for SEO is the technique I invented (as far as I know) as a response to an argument on standards and validation back in 2004, but it works best in conjunction with the satay method, which creates a cross-browser valid Object to start with. My version works with any Object, even the original Flash code, not that I currently recommend doing so.

Remember how the Object tag allowed the Embed tag to be used if the object could not be understood? Well, that's how we get alternative content into Flash.

What alternative content, you ask? The text content of the movie is a good start. Failing that, content that accurately represents the movie works, as well - the same rules that you would use for the ALT attribute of an image apply here. The advantage is that unlike the ALT attribute of an image, using the Object tag allows you to put in proper HTML code - including links(!!), headers and other formatting.

Where do you put this alternative content? The same place the Embed tag used to be: just above the closing Object tag:

<object type="application/x-shockwave-flash" data="flashtest.swf" width="300" height="100">
<PARAM NAME=movie VALUE="flashtest.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#CCCCCC>
   <h3>A Flash Movie</h3>
   <p>A little fish swimming around |
   <a href="http://www.mcanerin.com/">This is a Flash Button</a></p>
</object>

As you can see, I've placed the content inside the Flash movie (which a search engine cannot see) as cascaded alternative content of the Object (which the search engine can see). You can also see that I am able to have a header and a link with anchor text as part of this content.

Since this content is readable by search engines and can be formatted with most basic HTML, it can be SEO'd in much the same way as any other content. If you want to check to see how this looks to a search engine, you can either use the SEO-Browser, or look at the text only cache in Google.

Example 3 - SEO'd Flash Object Tag

In text-only mode, it looks something like this:

A Flash Movie

A little fish swimming around | This is a Flash Button

How About W3C Validation?

So, we now have a Flash object that can be SEO'd. Great! Now, how about making it Validate to proper W3C standards? Yes, that's right - in spite of the fact that out of the box Flash code doesn't validate (big surprise!), you can make it validate with very little effort. You might as well - you've gone through the effort of preparing it for SEO, a little extra effort won't kill you, and it's best practice.

First, by creating a proper Object you've already come most of the way towards validation. All you need to do is a little more work and you are finished. At this point we are simply finishing up the satay method. You could do this first, before adding in the SEO content, of course. As a matter of fact, that's actually how I do it myself. The order was changed for illustrative purposes in this document.

First, for XHTML to validate, you need to make a few changes from the above code, but they are very small and easy.

Make sure that the Object is wrapped in a container - a DIV, SPAN or Paragraph
Fix the closing brackets so there is a space and a closing slash: ie ...high> becomes ...high />
Make sure that all the Parameters and other parts of the Object are all lowercase: "VALUE" becomes "value".

See? Easy. And natural to people used to coding to specification. The result is this SEO-ready, cross-browser compatible, fully validated Flash:

<div>
<object type="application/x-shockwave-flash" data="flashtest.swf"
width="300" height="100">
<param name="movie" value="flashtest.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#CCCCCC" />
   <h3>A Flash Movie</h3>
   <p>A little fish swimming around |
   <a href="http://www.mcanerin.com/">This is a Flash Button</a></p>
</object>
</div>

Example 4: W3C Validated SEO Flash Code

In text-only mode, it looks something like this:

A Flash Movie

A little fish swimming around | This is a Flash Button

Conclusion

Flash is not as easy to SEO or validate as simple text, but once you have the technique down, it's straightforward and fairly easy to work with. The advantages of Flash for marketing are numerous, and now, with this technique, you can have it all - Flash, SEO and Valid Code. Enjoy!

Unless otherwise noted, all articles written by Ian McAnerin, BASc, LLB. Copyright © 2002-2007 All Rights Reserved. Permission must be specifically granted in writing for use or reprinting anywhere but on this site, but we do allow it and don't charge for it, other than credit. Contact Us for more information.

Note: By virtue of the fact that this page tests compliant and non-compliant methods of Flash alternate text, by it's very nature this page will never validate.