How to SEO Flash

by Jonathan Hochman

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.

About the Author

After graduating from Yale with two degrees in Computer Science, Jonathan
Hochman set up his own consulting company in 1990. He has been an Internet
marketer since 1994. To send feedback, please visit http://www.hochmanconsultants.com/.