Creating Flash Content that Even Search Engines Like
- Progressively Enhanced Flash With SWFObject
- Passing So You Don't Fail
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Sure, Flash content has its findability issues, but that’s only because we’ve been using it in our sites incorrectly. If you embed Flash in your pages, you won’t have to forsake the rich user experience it can create in your pursuit of findability.
Anyone who regularly follows Web technology news has probably read that Google and Adobe recently teamed up to improve indexing of Flash content. Contrary to what this announcement might lead you to believe, Google has actually been indexing Flash files for some time now.
Historically, Google has translated content in SWF files into HTML, which spiders can then index. But the translated markup that is generated is straight out of the 1990s with an abundance of font, bold, italic, and other presentational tags that convey the content with little or no information hierarchy or semantic meaning. As you can tell from Figure 1, it’s some ugly stuff.
)
Figure 1 Historically, Google has translated Flash content into some ugly HTML for spiders to parse.
With the recent Flash indexing improvements Google has made, this nasty, auto-generated code that once trumped content in search results appears to be slowly trickling out of the index, replaced by real content results.
Before you get too excited that the Flash SEO utopia you’d once dreamed of has finally come to fruition, let’s take a hard look at reality. Although Flash content is legible to search engines, it still struggles greatly to rank above a web standards compliant HTML page that communicates meaning through semantic markup. A logically structured document that uses heading tags, lists, emphasis, and other semantically meaningful markup currently still does a much better job of communicating the hierarchy and meaning of a message than a SWF will.
This might cause most web designers to either abandon Flash altogether in favor a standards compliant interface, or give up on findability in favor of fancy Flash effects. A more palatable solution lies somewhere in between.
Progressively Enhanced Flash With SWFObject
In my previous article on improving findability through Web standards, I introduced progressive enhancement as a technique you can use to ensure your content is legible to search engines, disabled users, and users on alternate platforms when JavaScript isn’t supported or has been disabled. The secret to making Flash findable lies in using much the same solution. Rather than embedding Flash directly into a page using XHTML’s object element or HTML’s embed element, it makes more sense to provide a meaningful alternative, and only serve up the Flash-enhanced version when the user’s platform supports it. This provides more control over the way your content is presented to search engines, and can result in higher search rankings.
Think of Flash as yet another layer upon the multi-tiered stack that forms the foundation of a well-built website. The HTML structure, CSS formatting, and JavaScript behavior serve as the foundation for the rich interaction and animation of Flash, as illustrated in Figure 2.
)
Figure 2 Flash is the top layer of a progressively enhanced interface.
SWFObject is an easy-to-use JavaScript library that will first detect which version of Flash the user has installed in her browser, and then embed your SWF. If Flash is supported, it replaces the content in a particular element in the page with code to embed a SWF. Since JavaScript isn’t supported by search engines, spiders will see a semantically meaningful text alternative to the content in the Flash movie, which will make your page more accessible and help ensure it receives an appropriate search ranking.
Let’s take a look at how SWFObject might be used to display a simple slideshow with various promotions or news.
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">
<h2>Introducing our new product</h2>
<p>save 20% on our new, super-cool product</p>
<h2>An exciting event happening May 1</h2>
<p>Come to our exciting event on May 1 at 4PM</p>
</div>
<script type="text/javascript">
var so = new SWFObject("slideshow.swf", "mymovie", "400", "200", "8", "#336699");
so.write("flashcontent");
</script>
A <div> with a defined id contains semantically marked up content that is consistent with the text in the Flash movie. SWFObject replaces the contents of <div id=”flashcontent”> with a SWF, resulting in a progressively enhanced, search engine friendly Flash presentation.
Although Google would certainly be able to read the content of this page if it were embedded in a Flash file, the weight of heading tags would allow this page to be more competitive because it communicates a strong information hierarchy.
If you want to get really fancy, you can pass the content of your HTML page into your Flash movie, which would make maintaining your content much easier. When the SWF and HTML files share content you can edit once, and automatically publish to two locations.