A modern approach to Flash SEO

Posted on by

Search engine optimization is one of the most popular subjects when nerds sit around and talk about Flash. “Does Google index your swf files?” seems to be the most popular question, usually garnering plenty of ‘yes‘ and ‘no’ and ‘maybe’ answers. The real answer to this question, once and for all, is this:

It doesn’t matter.

To understand this answer, you need to understand what Flash is. And to do that, you need to understand modern web development philosophy. First off, you need to embrace web standards. Semantic markup and separating content from style and behavior is the only way you should be building your sites. Many web standardistas have been recommending this method of web development for years, and rightly so. However, this post isn’t the place to go into the whys of this type of development, so I’ll skip that part and just say this about how it’s done: There are three areas of front-end web development: Content, Style, and Behavior. You should always keep these three things separated as much as possible.

That brings up the question: “Where does Flash fit into this three pillar method of web development?” Is it content? Is it behavior? Is it style? While it could be considered all three, most professional Flash developers will remove the content from their Flash movies and load it in using Flash remoting or XML files. That leaves us with style and behavior.

Style is added using CSS. Generally when you add images to your HTML that are purely presentational (no text or required content in them) you should add them in using CSS. In most cases you don’t want Google to index them because people don’t search the web for ‘top left rounded corner gif.” They search for content. Even if Google upgrades their crawler someday to read CSS files and index the images, they probably wouldn’t use the information for more than statistical analysis because of this.

Behavior is generally added using Javascript. Maybe you want a new window to open set to a certain size, or you want to use some fancy Ajax to let users rate something without refreshing the page. This should all be added unobtrusively, and if the browser doesn’t support Javascript, it will hopefully still work. Unfortunately, not everyone considers this, and these days Javascript is becoming more and more of a requirement to use most websites. So you should always provide some sort of alternative for non-Javascript users. When it comes to indexing behavior, Google will for the most part not index your Javascript files. Even if it did, most web users would have no idea what the .js file they are looking at actually does. When using Javascript to change your document, Google will not read the ‘final’ page, but only the raw HTML file. Google does not render Javascript 1.

Now that you know all of this, it’s time to look at how to treat your Flash content. Since we’ve determined we don’t want Google to index our swf files, but we do want it to index the content displayed inside them, what is the best way to go about this?

As stated before, if you are building Flash sites professionally, you probably move all your content out of your Flash movie and into an XML file or keep it in a database. This makes it much easier to allow Google to index this content by using progressive enhancement.

Progressive enhancement is a method of web development that goes hand in hand with Web Standards. You start with your HTML (your content), then add CSS (your look and feel), then add in additional behavior (Javascript, Ajax, Flash, any other interactivity that isn’t handled automatically by the browser).

The best way to add Flash progressively is by using Javascript, or more specifically, a script like FlashObject. First you lay out your page as if you aren’t using Flash. If you are using a database for your content, you can spit out that data as HTML where the Flash movie will go on the page (or maybe just a preview of the content, it’s up to you to show Google the content you would like indexed). Then you use FlashObject to replace this content only if the user has Javascript enabled and the required Flash plugin version.

Here’s a small example of what that might look like:

<div id="flashcontent">
    This is replaced by the Flash content if the user has the correct version of the Flash plugin installed.
    Place your HTML content in here and Google will index it just as it would normal HTML content (because it is HTML content!)
    Use HTML, embed images, anything you would normally place on an HTML page is fine.
</div>
<script type="text/javascript">
    // <![CDATA[
    var fo = new FlashObject("flashmovie.swf", "flashmovie", "300", "300", "8", "#FF6600");
    fo.write("flashcontent");
    // ]]>
</script>

This causes Google to skip the Flash swf files and only index the HTML (the content!) you place on the page. You can place links to other pages, images, whatever you want Google to index, and when a viewer with a browser that supports Flash visits your site, they will then see the Flash content. This gives you full control and much greater predictability over what content Google will index. And if your content is pulled from a database that is editor controlled, your pages will update and be re-indexed as the content changes without the need to re-publish all your swf files.

1 Currently Google does not render the Javascript on a page, but there are rumors that they are developing a new crawler based on Firefox (they employ a number of Mozilla foundation members) that will index pages based on how the browser sees them, instead of the raw HTML content. This means HTML hidden by CSS may not be indexed, and pages that are altered by Javascript after they load will be indexed how they appear to the user. However, this is all rumors and until it happens Google will ignore your Javascript content.

Note: In this article I use the ‘Google’ name often, but it can be interchanged with any search engine, as they all work roughly the same way.

517 thoughts on “A modern approach to Flash SEO”

  1. Man, this is really great info to have. For the last year or so, I have spent all of my time mastering XHTML and CSS and haven’t done much in the way of Flash content. Now, that my work is reaquainting me with Flash, I’ll be putting FlashObject to great use. I have a question though: I understand that with the FlashObject script, the js places .swf’s according to the <div> id name. If I already have CSS styled alternate content inside the <div>, will the .swf completely cover that content for a js enabled browser or will it push it down in the <div> essentially creating a double of the content?

  2. FlashObject replaces the content of the target div, so whatever was in the div will not exist on the page anymore once you call flashobject.write().

  3. Pingback: Flasher -Flash/Web Design-

  4. Kewl nice article dude, I remember (I think it was Guy Watson) made an Open source attempt called ripple which did very similar except that it treated the html as xml and parsed it using it as the source for text in the flash movie.

  5. Yep, ripple is nice and all, but it seemed to be more geared towards full frame Flash sites – this method could be used effectively by any type of Flash movie.

    Also you can try content injection, although it may be slightly buggy in some cases.

  6. Pingback: Blueprint Blog

  9. This method absolutely works. I used Flashobject for displaying flash at my old company. Google did not have any issues with indexing the site and giving us the top rank.

    Flashobject is not only lightweight flash detection, it validates!

  10. Pingback: TF

  12. I disagree that “the best way to add Flash progressively is by using Javascript”.
    What happens when a user visits your site with Flash on, but Javascript off? Because you have set the bar artificially high, they don;t see the Flash.

    You start off talking about needing to “embrace web standards”. So use them.
    This example will show Flash where supported, and fallback to the HTML content. Good for the user, good for search engines. And no Javascript is required.

    
<object id="flashmovie" type="application/x-shockwave-flash" data="flashmovie.swf" width="300" height="300">
	<param name="movie" value="flashmovie.swf" />
	<div id="flashcontent">
	    This is replaced by the Flash content if the user has the correct version of the Flash plugin installed.
	    Place your HTML content in here and Google will index it just as it would normal HTML content (because it is HTML content!)
	    Use HTML, embed images, anything you would normally place on an HTML page is fine.
	</div>
</object>

  13. How can you say that the best way to embed a flash movie is to use a javascript?
    Why should I have to use a script? And if my visitors have disabled JS but not Flash Player?
    Using a combination of object parameters and a xml configuration file is a better, more scalable, more webstandard compliant solution.

  16. Derek, Matteo and elmerone:

    There are a number of reasons why Javascript is better than not.

    1) No Javascript means no plugin detection (unless you use a separate page with a single Flash movie on it, which will kill your search engine standing). This means that if you have Flash 8 content, and all your visitors have Flash 7, the player will still try to play your Flash 8 movie, and your visitors will most likely see a very buggy and incomplete Flash movie. This is bad.

    2) Using Flash Satay is not friendly to JAWS screen readers.

    3) Microsoft recently lost a suit against a company called Eolas. They had a patent on plugin technology in the browser. Because of this, Microsoft has released a patch for IE 6, and will include in IE 7 some changes to Internet Explorer. This will require all users to first click on a Flash movie embedded on a page unless you embed the movie with Javascript.

    If you follow this method properly, even if the user does not have Javascript enabled, they will still see all of your alternate content. If done right, this means they will not miss your Flash animations much at all. You can even use a noscript tag to show a message saying that they are missing out on extra content because they have Javascript disabled.

    You can read more about why FlashObject is better than other Flash embed/detection methods on the FlashObject page.

  17. Joey – Glad to hear this method actually works.

    The flash satay method is great too, but has some drawbacks. Namely you have to use a container movie to a container movie if you want your SWF to play before fully loaded. In addition you’ll also need javascript to detect the correct player version.

  18. Well – ok. I’m sold. I usually try to get away with as little Javascript as possible – but you’ve made very good points both above and on your FlashObject page about why this method is “best”. Plus – it checks the Flash Player version – and you’ve included the express install feature.

    Thanks for the great resource.

  19. But doesn’t this mean that your entire page has to load, the javascript has to run and then replace the html with flash? You suggest putting any sort of image, div’s etc inside of the replaced content, but for each byte of info that’s replaced that’s an extra byte a user has to load with no appreciable outcome.

  20. No, you don’t have to wait for the whole page to load – you place the script call that replaces the div right after it, so there is no visual lag at all – to the user it’s completely transparent.

    Images and alternate content are loaded, but the HTML is usually so small it won’t make a difference. Unfortunately, it appears that images are still loaded, but you can plan for this and use them sparingly. And there is an appreciable outcome: Google will index your content perfectly.

  21. Pingback: iabadu

  22. Geoff,

    1) No Javascript means no plugin detection…
    You can detect the player version from the movie. This seems the most obvious place to perform version checks.

    2) Using Flash Satay is not friendly to JAWS screen readers.
    This is why you include fallback content.

  23. If you detect the player with a Flash movie, you then replace your index page with a Flash movie that then redirects you to your ‘real’ Flash content. First, google won’t follow links inside Flash movies, so your other pages won’t be indexed, which will kill your ranking. Next, if a user somehow bypasses your front page, you will have no plugin detection, so they could see garbled content if they don’t have the correct plugin version.

    As for #2, JAWS can read most Flash content just fine if you build it correctly, so people using it may have Flash enabled, which means they will never see your fallback content. The Flash content will just be ignored along with the fallback content.

  24. Awesome work! I really like the flash on Katie’s site, and all the tips! Thanks again and happy blogging!

  25. Thanks for that very convinient way to embed flash W3C conform. Great Work. But sometimes i get in trouble when somebody is using Safari on Mac. For me it seems that in a few cases the FlashObject script does not work properly because no content gets delivered. Neither the alternate nor the flash content. Do you know about that allready?

  26. FlashObject has been tested thouroughly on Macs (I use a Mac as my main machine and for testing) and I’ve never seen any issues on Safari. It’s possible that the user just doens’t have the correct plugin version installed.

    Have them go to my version check page and see what happens.

  27. What about promotional sites where the entire site is in Flash, would you essentially need to have two versions of the site, one HTML/CSS based and another Flash based version that repaces the HTML based one if the user has the correct Flash Player?

  28. Yes, exactly.

    But if you read what I mentioned about separating out your content from your Flash movies and putting it into a database or external xml files, you’ll be able to use that same content to generate the HTML version of the site.

  29. I’ve read a lot regarding SEO for flashsites. This article is very interesting but I have a question… In many articles it seems like this method could be considered as spam since the html content is hidden. Could this be a problem?

    Niklas

  30. Google has pretty loose guidlines as far as this topic is concerned. It seems that the main rule is that you shouldn’t have your content indexed twice, and this method doesn’t put your content on the page twice, you are simply providing an HTML alternative, which is exactly what Google recommends you do with Flash websites.

  31. Hmmm…interesting. If you use several swf movies that loads into a master.swf would you only exclude the master.swf from beeing indexed or would you have to include all of the swf files?
    Oh and thanks for your fast comments and sharing all this info

    Niklas

  32. No, you don’t want any of your swf files indexed, because you should not put actual content inside the swf files. It should all be external in XML files or a database.

  34. Geoff,
    YOu have answered a question that has been burining in my mind for some time now.
    I started in SEO and have moved into Flash authoring and all the other programming
    languages. So my SEO background made me stay away and do things that I didn’t really
    like to do, like mix and match content, style, and behavior all with different
    elements. Thank you for the discussion and thank you to the readers that responded,
    a special thanks to Derek, his questions were excellent and becauase you answered
    them I feel doubly blessed.
    Kev

  38. Yes, exactly.

    But if you read what I mentioned about separating out your content from your Flash movies and putting it into a database or external xml files, you’ll be able to use that same content to generate the HTML version of the site.

  40. the swfObject is the cat’s meow. however, being the novice i am, i’m confused as to what i should do if the user has NO FLASH PLAYER (new PC i guess). I have the expressInstall feature working well in my swf, but i’d like to add a link to “express install” the player to the “alt content” portion of the HTML. any help would be appreciated.

    thanks again for making this available to all…

  41. If they have no Flash Player at all, you should instruct them to visit the adobe.com site and download it, or just provite alternate non-flash content and not worry about it at all.

  42. I’ve done something similar a few years ago. What is xhtml but the xml variant of html? So you can parse your xhtml as it is xml, and use it in your swf. If javascript is disabled and/or the user is missing the right version, he’ll see the css/xhtml version.
    http://www.halans.be/lab/bolv2/
    If I look at it again, I should update it with a doctype, and clean a bit up…

  43. Hi there!
    Love the flashobject…it’s great. Do you know how to make the browsers backbutton and deep linking to work? I did check out slidepro demo and it looks very interesting. The thing is that this is probably somewhat above my head at the moment. How would I go about to change the location hash depending on where I am in the SWF?

    Niklas

  44. What i think is the best way to add Flash progressively is by using Javascript, or more specifically,a script like Flash object.

  45. QUESTION
    Will XHTML integration for content withinh a Flash Site index Google Sitemaps? and follow?

  46. OK the question again, Im sorry: If I decided to use this methos and pull all the content from XML will google sitemaps as well as Googlebot will index and follow the links-depth ?

  47. Awesome. Ok, say if I’d like to have the div content change based on what’s shown in Flash, content that exists in a database, would it be wise to use some type of initial external interface call to populate that div? Say…if I had a deep linking site and any link clicked on it would run an external call and rewrite the div. I’d like to get it working to the point where if someone came to a site through a deep link, it would display the content of that deep link within the div.

  48. Content written with Javascript won’t be picked up by Search engines. So you would need to use some sort of server technology to read the url the user requested and write the data for that page in the div, then have SWFObject replace that div with the Flash movie.

    If you are combining back button functionality and all that, you would need to do something like this:

    User goes to http://www.example.com/my/page/

    Spit out the data for that page form the database here, Google will read this, but will not be redirected by the Javascript in the next step.

    Redirect them using Javascript to http://www.example.com/#my/page (note the # in there)

    All Javascript enabled browsers will see the Flash version, and all non-Javascript browsers will stay on the original HTML page and won’t know they are even missing the Flash version (which is a fantastic user experience, no errors or anything, maybe just a small notice saying that the site supports Flash of they want)

    Just make sure you include links on the homepage to all the sub pages – you are basically building an entire HTML site, and then adding the Flash presentation layer on top of it.

  49. Great info. I always thought that putting flash on your website is something of the unnecessary because search engines don’t read it anyway. And you have explained how flash could turn out to be useful. Thanks!

  50. Useful article indeed. Perhaps I missed it in the above, but if we remove the text from SWFs and put it into XML files that are loaded at runtime, will this content be indexed by Google et al? Is there any recommended format for such XML files? This would be elegant and it would be nice to see some recommendations from the major search engines along these lines.

Comments are closed.