Flash gets a bad rap, undeserved in my opinion, for harming search engine visibility. Why are search engine optimization (SEO) practitioners concerned about Flash, and how can we SEO Flash content? Flash content is often heavy on images and interactive features, and light on text. As of 2008, the leading search engines are heavily dependant on text to understand the meaning of pages.

The leading web development tool, Adobe Dreamweaver, embeds Flash in web pages with code that fails to provide accessibility for visitors or search spiders who cannot handle Flash. Instead of using the default code, my recommendation is to hand code Flash pages with primary HTML content, and a method of automatically testing for Flash support before attempting to insert the movie. The primary HTML content can be search optimized as if the Flash wasn’t there, while the Flash provides an enhanced user experience for those visitors who have the necessary Flash player.

The April 11, 2006 release of Microsoft’s popular Internet Explorer (IE) browser includes an update (“Eolas”) that prevents ActiveX-based Flash controls from working properly. When the user attempts to interact with the Flash, a tool tip appears, stating, “Click to activate and use this control.” That extra click is an annoyance. In addition to helping search engines, the programming techniques described in this article solve the Flash Eolas problem.

Search Engines and Flash

Search engines have the ability to read Flash files and extract text and links. In particular, Google and Adobe announced a new algorithm for indexing textual Flash content on June 20, 2008. As explained by Rand Fishkin in Flash and SEO – Compelling Reasons Why Search Engines & Flash Still Don’t Mix, and Vanessa Fox in Search-Friendly Flash?, hoping that search engines can decipher you Flash is not a substitute for providing indexable HTML content.

Requirements for Successful Use of Flash

Flash animation is a great way to present complex content because it allows the designer to put more content in a finite space, without wrecking page design. For technology sites, Flash is an ideal way to present a slide show or movie explaining a complex product. At the other end of the spectrum, art and entertainment sites have a real need for multimedia, and Flash is the perfect solution.

When using Flash, we’d like to satisfy each of these objectives:

• Clean design
• Search Engine Optimization
• Accessibility for a wide variety of browsers, including screen readers and mobile phones
• Code validation and standards compliance
• Correct functionality with IE

SEO Flash Programming

My recommended Flash SEO method uses a DIV with search-engine-accessible, primary content, and an open source Javascript function called swfobject() to detect when browsers are capable of viewing Flash. When an appropriate version of Flash player is present, the Javascript manipulates the page’s document object model (DOM) to replace the primary content with the Flash movie. Most search engine spiders can’t handle Flash, so they will elect to view the primary content. The primary content may contain links, headings, styled text, images—anything we can add to an ordinary HTML page. With SEO copyediting and coding skills applied to the primary content, Flash becomes a non-issue.

Flash accessibility programming isn’t spamming, as long as the primary content and the visible movie are essentially the same. The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) specifically states that multimedia content should have an alternative representation available. Accessibility programming creates the benefit of presenting visual information without losing the visitors and search engines who depend upon textual content.

As of July 2007, I discussed this method with Dan Crow of Google. He warned that this programming method could draw attention because of the possibility for abuse. If you use this method, make sure the alternative content is a faithful representation of the Flash content, and avoid combining this with other coding methods that could be abused. While this SEO method is not abusive, it is aggressive because there is a small risk that the search engines could mistakenly decide that the primary content is a form of cloaking.

SWFObject 2.0

SWFObject 2.0 is an open source project based on Geoff Sterns’ original SWFobject() and UFO (Unobtrusive Flash Objects) by Bobby van der Sluis. As reported at swfobject, Adobe is likely to include swfobject() in future releases of its web development tools.

Scalable Inman Flash Replacement

If you are only using Flash to enhance headings, quotes, or callout text, a method called Scalable Inman Flash Replacement is an excellent choice. SIFR automatically pulls text from an HTML document and modifies the Document Object Model to replace the text with a Flash rendering of the appropriate font. SIFR makes it easy to modify the text, and ensures that your Flash text always matches your HTML text, reducing the risk of abuse.

The drawback of SIFR is that it only handles the presentation of simple text. Complex Flash animations, such as menus, slide shows, and interactive presentations can not be programmed easily with SIFR. For these types of Flash, SWFOBJECT and UFO are more effective.

Example: Making Flash Home Page Spiderable

The sample code below is derived from the home page of TrueVector Technologies which includes two Flash objects. The content of that page can now be indexed because search engines can read the HTML-coded content, while visitors with Javascript and Flash can view enhanced visual content.

<head>
<!--snip-->
<script type="text/javascript" src="/js/swfobject.js">
</script>
<script type="text/javascript">
  var flashvars = {};
  var params = {
    wmode: "transparent"
  };
  var attributes = {};  

  var flashvars2 = {};
  var params2 = {
    wmode: "transparent"
  };
  var attributes2 = {};

  swfobject.embedSWF("/flash/map_test.swf",
        "myContent", "760", "350", "9.0.0",
        "/flash/expressInstall.swf",
        flashvars, params, attributes);    

  swfobject.embedSWF("/flash/homepage2.swf",
        "headerbanner2", "760", "220", "9.0.0",
        "/flash/expressInstall.swf",
        flashvars2, params2, attributes2);    </script> 

</head>
<body>
<!--snip-->

<!--primary content, for non-Flash visitors-->
<div id="myContent">
  <img src="/images/home-top.jpg" border="0"
    alt="TrueVector Technologies" height="350" width="760">
</div> 

<!--snip-->
<div id="headerbanner2">
  <h1>TrueVector <em>noun</em></h1>
  <p>1) a tool designed to enhance web site navigation.
    2) by eliminating clumsy dropdown boxes and checklists.
    3) giving users easier access to data or inventory.
    4) leading to an enjoyable surfing experience.
    5) resulting in higher click-through rates and longer
    site visits. 6) which lead to more return visits and
    site referrals. 7) ultimately ending in trueVector's
    customers suffering <strong>higher profits</strong>.</p>
    <p><strong>Syn:</strong>
    Interactive Map/ Flash Map/ Zip Code Map/
    Rate Center Map/ Store Locator Map/ Real Estate Map/
    TrueVector Flash Map/ US Interactive Map</p>
</div>

Flash accessibility programming will not magically cause a site to rise to the top of the rankings, but this Flash SEO method will eliminate any ranking disadvantages associated with Flash.

We’ve used this Flash SEO method on many high traffic sites. The code has been served hundreds of thousands of times. Sites using this Flash SEO method have achieved top rankings for keywords found only in the Flash content.

All Flash Sites

A site built entirely with Flash suffers a great disadvantage because it lacks page structure to organize the content, internal linking, and unique page titles. One remedy is to create distinct HTML pages to represent each Flash “page,” and install the Flash movie on each and every one of the HTML pages. When a visitor requests the page, they’ll see Flash if they can handle it. Otherwise, a non-Flash visitor, such as a search engine, will be able to spider the site. If a user follows a search result onto one of the inner pages, they’ll get the same Flash experience because the movie is available on every page. Another approach is to divide the Flash into pieces and put the relevant piece on each page.

Slicing up the Flash can result in page transitions that don’t provide the seamless effect that you want to create. To get the best of both worlds, pass a parameter into the Flash movie using FlashVars. The same movie can appear on each HTML page, but depending on the parameter value, the movie can start at an appropriate point to show the Flash content that corresponds to that page. To get rid of all the extra pages, but still be able to reference different parts of the Flash piece, add a # and a tag to the end of each URL, and pass that tag into the Flash. This approach can make the back and forward buttons work properly, and allow people to bookmark specific parts of the Flash site.

It is also possible to use PHP scripts to pull both the primary HTML content, and the Flash content from a MySQL database. This approach would greatly simplify the maintenance of an accessible Flash site by storing only one representation of the content.

You may distribute this article in its entirety under a Creative Commons Attribution 3.0 License. Please attribute the author by name and link (URL).

In my daytime job I’m a Flash developer. But when it comes to creating websites I don’t think Flash is the way to go. Not just because Flash has some serious accessibility issues, but mainly because Flash-only websites are very search engine unfriendly. They usually consist of only one HTML page, and most of those contain no readable content. So Google, MSN and Yahoo will have no clue as to what your site’s about. I’ve been pondering things you could do to fix or at least improve this. I’ve played around with a few of these ideas and techniques, others are still on my to-try list. Please let me know if you’ve come up with other solutions or have anything else to add.

1. Use SWFObject.

Geoff Stearns’ SWFObject is the way of embedding Flash movies into HTML pages. It’s only drawback is that it uses Javascript, but in return you get the best plugin detection that (no) money can buy, a fix for the Internet Explorer activation issue and the ability to add HTML content in a placeholder div for search engines and people with no Flash player installed. Put a short summary of what your site about (make sure you use plenty of keywords), along with contact details in there. That way, Google will a least find something it can read.

2. Accomodate deeplinking

Through a bit of PHP(*) and actionscript you can make sure anyone calling up www.yoursite.com/index.php?page=contact is taken to the contact ‘page’ in your flash movie. For a simple timeline-based Flash website the actionscript needed can be as simple as:

if( page != undefined ){
gotoAndStop(page);
}


If your movie has a key frame labelled ‘contact’, it will be shown.

For this to work you need to use PHP to tranfer the ‘page’ url variable into a flashvar. With SWFObject, the javascript code needed in the page will look something like this:

var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.addVariable("page", <?php echo $_GET['page']; ?>);
so.write(”flashcontent”);


Besides the obvious advantage of being able to send someone a link to a specific page, this also allows you to use a Google sitemap. Make sure you include a ‘menu’ listing of these links in the placeholder content so search engine bots can follow them.

A variation to this approach might be to create copies of your index.html with descriptive name like ‘about.html’. These can have different placeholder content but load the same Flash movie. No need for PHP, just add the right flashvar to have the movie skip to the right page. Obviously, this approach is best suited for small websites with only a limited number of pages.

* = Or any other server side programming language. Javascript probably has a few tricks up it’s sleeve as well.

3. Google sitemaps

A Google sitemap is an XML document that you place in your site’s root folder that contains the layout of your site. Google’s indexing mechanism will use this info to index every page on your site. You can simply put the “?page=something” links in there, and each page will be indexed. Especially for large websites, this could be an ideal way to make sure all your pages are spidered. Without having to link to every single one from the placeholder HTML.

4. Dynamic placeholder content

With the tweaks covered so far, each ‘page’ of your website will still have the same placeholder content. Whatever you chose to put in the SWFObject placeholder div. The trick now seems to be to generate a page with placeholder content that matches the content of the page the Flash movie will (initially) display. If you’re using something like “?page=about” in your URL, your movie will load(*) and display the about page. From then on, the user can navigate the site, but the placeholder text won’t change. This is not a problem, as search engine bots will not do this and the sitemap will ensure all of the URLs are called. So all we need to do now is create a script that inserts the “about” page content formatted as HTML into the page’s placeholder div.

If you’re using a CMS type solution, this might turn out to be quite easy. Instead of just generating XML for Flash to read, output that same content as simple <p>’s and <ul>’s and insert that into the page. For static websites this can be a bit of work, as all content needs to be maintained in the movie (or the XML files it loads) and in the PHP code. But if you’re serious about ranking well in search engines, it’s probably well worth the effort.

I’m not sure if Google will like this, any type of dynamic placeholder content might be considered ‘cloaking‘. Your best bet is probably to have the Flash content and the placeholder content match exactly.

* = Most Flash websites I’ve worked load XML data either from disk or through something like SOAP or Flash Remoting on a per-page basis.

5. Adding internal links to the placeholder content

Google sitemaps are great, but unless you create a script to do this for you, updating them can be a lot of work. A more practical solution could be to convert the internal links used in your Flash project into HTML. I’ve built numerous Flash projects that use a single XML document to describe each page. A link from one page to another might look something like:

<next>page2.xml</next>

This tells my Flash movie to load page2.xml when the next button is clicked. If your project uses a similar setup, it shouldn’t be too hard to translate this into:

<a href="index.php?page=page2">next</a>

If you succeed in adding links from your XML source as regular HTML links, your site will be truly indexable. In fact, you’ve now created a working HTML version of your website inside SWFObject’s placeholder div.

6. To the extreme: HTML style page refreshes

Since we’re now using HTML content in the placeholder div, search engine spiders will follow the links in that content and truly spider your website. One further step you could take is to use the same links inside your Flash movie. So if you’re on the about page, and the user clicks on your ‘contact’ button, use actionscript’s getURL command to get index.php?page=contact.

contact_btn.onRelease = function(){
getURL( "index.php?page=contact" );
}


This will cause an old-fashioned page refresh, but it will also update the address bar so people can bookmark all the pages in your site. The Flash movie itself will be cached by the browser, so page load times should be minimal. If you need to maintain user info from page to page, a local shared object is probably your best bet.

There’s also a way to update the address bar through javascript, but I wonder if that works on all browsers and whether it allows for bookmarking. If you can live with the page refreshes, this seems to be the best option.

Conclusion

I haven’t tested all of these approaches myself, and I’m definitely not an SEO expert. But I feel pretty confident that having dynamic placeholder texts that make your website indexable for search engine spiders, along with unique URLs for pages in your website will improve your site’s rankings dramatically. Like with AJAX it’s a question of prioritizing presentation and SEO for your website. Flash is unrivalled when it comes to creating visually exciting websites, but its troublesome to get Flash websites to be accessible and indexable. If you do decide you want to go with Flash, these tips might just help your audience find you.