Johntron

This document outlines how to produce a website that uses one Flash video as its primary content, but does not sacrifice search engine visibility by doing so. During my time as a software developer in Dallas, TX, I’ve spent a lot of time trying to get Flash sites to play nicely with search engines.

One of the prevailing ways of doing this uses SWFObject, as demonstrated by Jonathan Hochman in “How to SEO Flash” [1]. Using SWFObject adds an additional requirement to the user experience. To experience the site as it is intended, a user’s browser must support Javascript in addition to Flash. This approaches the gray area in the context of web standards. To address this problem, Drew McLellan came up with a method he calls the “Satay Method” [2]. The Satay Method seems to be as close as you can get to supporting rich user-experiences, search engine optimization, and standards compliance all at the same time.

However, there is one additional problem that needs to be addressed. I’ve simply pointed out a common approach. When a user visits a website for the first time, they will be viewing a landing page. A landing page is not necessarily the homepage. Many search engine results point directly to internal pages on a particular domain. To address this problem, a routing script should be placed inside of the primary flash video. This script will start playback at a particular spot depending on which webpage is being viewed.

Site structure requirements

---

Pages should be structured the same as HTML-only sites. Each page should contain HTML links to other pages, as well as unique HTML content.

HTML requirements

---

Each page should provide both HTML and Flash. HTML should be visible, unless the user’s browser supports an adequate version of Flash. If the browser does not support the correct version of Flash, the website should this to the browser. As long as the browser is aware of an outdated version of Flash, it can ask the user to upgrade to a newer version. Because the primary Flash object will not indicate which version of Flash it uses (for standards purposes), an additional (dummy) Flash video should be included that specifies the version used by the primary Flash video. If this is confusing, see the example.

Flash requirements

---

The primary movie should be small enough to load immediately without buffering. If it is not small enough, IE may decide to wait for the whole movie to load before starting playback. If the flash video is too big to be loaded immediately, it should be replaced by a separate, smaller Flash object that will load the larger movie immediately. I’ll call this a proxy object.

Because users may enter the site from places other than the homepage (ie. search engine results linking directly to a specific page), the Flash video should also be able to begin playback on the correct “page” depending on which HTML page was loaded. Use HTTP query parameters and a routing script on the first frame of the root level of the Flash video for this. If a proxy flash object is used, certain query parameters may need to be forwarded to the primary flash video for routing to be performed correctly.

Each semantic section of the flash video should have a corresponding directory on the web server. Each semantic page of the Flash video should have a corresponding HTML page on the webserver — in the correct directory.

Javascript requirements

---

There should be none. Behavior should only be added to a webpage if it adds value to the user experience. Content should only be added using Javascript if it is insignificant or unrelated to the rest of the content on the page.

Limitations and concerns

---

Recent versions of IE will require users to click on the Flash video before playback will begin. You could follow the method outlined here and also include Javascript to load the Flash object after the page has loaded. I have not personally tested this, but it seems like it should work.

I do not have access to recent versions of the JAWS screen reader. The Satay method of including Flash objects has been known not to work in older versions of JAWS.

Examples

---

Sitemap:

  / [Document Root]
     index.html
     /features
        index.html
     /art
        index.html
        /history
           index.html
     /contacts
        index.html

HTML:

    <html>
      <head>
         <title>SEO Title</title>
      </head>
      <body>
         <!-- Dummy object for version detection -->
         <object type="application/x-shockwave-flash"
               codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
               style="display: none; visibility: hidden;">
            <param name="movie" value="dummy.swf" />
         </object>

         <!-- Actual video -->
         <object type="application/x-shockwave-flash" data="flash.swf?page=home" width="400" height="300">
            <param name="movie" value="flash.swf?page=home" />
            <div>
               Copy . . .
            </div>
         </object>
      </body>
   </html>

Actionscript:

  // If this code is placed in a proxy flash object, load that movie and
  // forward the request

  // Maps page names to frame numbers
  var lookup:Object = new Object();
  lookup.home = 6;
  lookup.features = 128;
  lookup.art = 394;
  lookup.history = 228;
  lookup.contacts = 578;

  // `page` is passed in from the HTTP GET parameter
  gotoAndStop( lookup[ page ] );

---

Sources:

1. – Jonathan Hochman – “How to SEO Flash”
2. – Drew McLellan – “Flash Satay: Embedding Flash While Supporting Standards”

Tags: Accessibility, flash, SEO, usability

This entry was posted on Wednesday, April 2nd, 2008 at 1:23 am and is filed under SEO. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.