Best Practices for Search-Optimized Flash Development

In spite of what you may have heard, it is possible to have both engaging Flash content and happy search engine spiders.

For several years, there has been tension in the web design and development community regarding search engine optimization (SEO) and the use of Adobe Flash for site content and applications. Flash naysayers have and still do argue that you should almost never use the platform if you care at all about search engine performance and site traffic. Meanwhile, Flash aficionados argue that the user experience is more important than Google experience.

So which is it? Who’s right? In this post, I am going to:

1. Explain why both naysayers and aficionados make valid points
2. Describe the state of Flash indexability, and
3. Share several Flash development best practices that you can begin using in your projects right away.

All told, I hope this post eases tension and encourages more developers to consider using the powerful Adobe Flash platform in a way that is good for both users and spiders.

Naysayers vs. Aficionados

Both sides in the Flash SEO debate make good points and have good intentions.

On the one hand, developers and designers concerned about site traffic and getting found on search engine results pages are very focused on site success. Websites, in general, and ecommerce websites, in particular, are built to attract site visitors. In online retailing, these site visitors are shoppers and customers whose purchases are the company’s fundamental focus. If no one finds a website, it is of little use.

Acknowledging that getting potential customers to a store is vital, Flash advocates often emphasize that it is user experience that converts a site visitor into a store customer. As an example, we know that customers often buy from those company’s they most trust, and a 2003 Stanford University study of 2,440 people found that site aesthetics was the single most important factor in conveying site, and therefore, company credibility.

Furthermore, site interactivity such as hover effects, draggable elements and the like can convey professionalism as users imagine that these advanced features require a more sophisticated company to support them. The Flash platform simply allows developers greater flexibility in site design than would be possible in HTML alone. That flexibility in turn allows for more appealing site aesthetics and more engaging site interactivity, including advanced merchandising techniques, video presentation, and non-product content.
Ultimately, websites are for people, so it is user experience that should be our first concern. We want to present good site content in a way that is easy for human users to access and understand.

In HTML, we use a framework of tags like title, h1, or p to organize content in a way that is best for human users. Over time, the software engineers at companies like Google and Microsoft have discovered how to programmatically recognize content structures that organize web content in a human readable and usable way. Having recognized these useful structures—as well as the value of backlinks—search engines tend to deliver results from pages that are thus organized.

After the fact, SEO practitioners monitor search engine behavior and test theories to determine which structures and links search engine algorithms favor. With data in hand these SEO practitioners then instruct their clients to emulate these useful structures and linking strategies.

Put another way, search engine algorithms trail actual user experience, and SEO trails search engine algorithms. Here we find the crux of the problem, those that say we should avoid using Flash for SEO’s sake are encouraging us to follow user experience trends of the past, and those that encourage us to develop rich Internet experiences are asking us to lead.

We need to find a middle ground. If we get too far behind the latest design trends, we are not really focusing on providing good customer experience and conversion will suffer. If we get too far ahead of search engine indexing capabilities, we do risk losing potential traffic.

The State of Flash Indexability

So where is this middle path? What is the current, up-to-the-moment state of Flash indexability, and what can you do to incorporate Flash for the user’s sake while making content readily available for search engine spiders—your virtual users?

Google, and presumably other leading search engines, can index SWF content, execute server calls to retrieve external files for indexing, and in some cases, link back to the proper state in the Flash movie where the content originated.

This is important since the two main issues related to indexing Flash—or similar rich Internet applications (RIAs)—have to do with (a) finding content and (b) linking to content.

In the past, search engine spiders could not see inside of a SWF. It was a black box. But thanks to collaboration between search companies and Adobe, virtual users operating on servers can now, in fact, access textual and other content inside of a SWF file. Need proof? Run this search on Google right now, filetype:swf + "comic books."

Google announced the capability in its blog on June 30, 2008. An Adobe announcement the next day summed up the change.

“Until now it has been extremely challenging to search the millions of RIAs and dynamic content on the web, so we are leading the charge in improving search of content that runs in Adobe Flash Player,” said David Wadhwani, general manager and vice president of the Platform Business Unit at Adobe. “We are initially working with Google and Yahoo! to significantly improve search of this rich content on the web, and we intend to broaden the availability of this capability to benefit all content publishers, developers and end users.”

“Google has been working hard to improve how we can read and discover SWF files,” said Bill Coughran, senior vice president of engineering at Google. “Through our recent collaboration with Adobe, we now help website owners that choose to design sites with Adobe Flash software by indexing this content better. Improving how we crawl dynamic content will ultimately enhance the search experience for our users.”

“Designers and web developers have long been frustrated that search engines couldn’t better access the information within their content created with Flash technology. It’s great to see Adobe and the search engines working directly together to improve the situation,” said Danny Sullivan, editor-in-chief of SearchEngineLand.com. “The changes should help unlock information that’s previously been ‘invisible’ and will likely result in a better experience for searchers.”

That was 18 months ago, and you can bet that Adobe, Yahoo!, and Google have not been resting on their laurels.

In fact on June 18, 2009, Google announced that it could load external Flash resources, including text, HTML, XML, additional SWFs, and more. This feature means that you can create a Flash application that draws its content from a structured and external XML document.

This was an important advancement, because it is a best practice to separate content layers from presentation and behavior layers (i.e. Flash). Remember that Flash Player does not actually make calls to a network stack for external resources, rather it relies on its host to make these calls for it. When Flash Player loads on your web browser it is your browser that requests any associated XML files, text files, or the like. And when Flash Player for Search (Google and Yahoo!’s special player for indexing content) is hosted by a search engine spider, it relies on that host to make these requests. As of this past summer, Google can and does retrieve this external files.

“That's really important for search though because think of how many SWFs that are out there on the web,” explained Justin Everett-Church, a senior product manager for designer/developer relations at Adobe in a December 2009 interview. “[Search engines] are able to search and index these amazingly fast, and the way they have to do that is actually whenever a request is made, they can go out and cache that data, so it's available very, very quickly, and they may even just say, ‘We'll wait until we get all the data,’ and then rerun all the searches to make sure that it's all there. You can't really work in the same sort of go out and wait for a piece of content every time you need it just because it is an automated process.”

But once a search engine finds content, it may still have trouble linking to that content.

Flash content is fluid content. It does not adhere to the single page paradigm, so it is possible that particular states or frames will not necessarily have a unique URL. Without a unique URL, search engines that wish to link back to the content must link to the beginning of the Flash file or at least to a nearby state.

“This is the same problem you encounter with AJAX-based pages, “ wrote SEO experts Eric Enge, Stephan Spencer, Rand Fishkin, and Jessie C. Stricchiola in their October 2009 book, The Art of SEO. “You could have unique frames, movies within movies, and so on that appear to be completely unique portions of the Flash site, yet there’s often no way to link to these individual elements.”

But not all is lost.

A technique called deep linking, allows Flash developers to provide specific URLs for specific states in the application or page.

“If you are building your applications in Flex, you can [link directly to content] -- a lot of our components are already pre-configured to work with navigation management. So, for example, in a Flex application, if you've got things like tabs, you can click between various tabs and you can then see a URL change and use the Back and Next button. That can certainly be enabled and disabled. I believe the default is enabled, but for people that are not using Flex, there's actually a lot of really good libraries out there like SWFAddress that have been built by the community to address the same thing,” said Everett-Church.

The system is not perfect, since even with links in place search engines face some challenges with using these links. But it is feasible to offer both human and virtual users a way to link back to particular content in the SWF.
To summarize this section, Google, and presumably other leading search engines, can:

• Index SWF content
• Execute server calls to retrieve external files for indexing
• And, in some cases, link back to the proper state in the Flash movie

Flash Development Best Practices for SEO

Given search engine capabilities plus a desire to both make site content indexable and to create good user experiences, there are some best practices that will help ensure search engines and people alike are getting the most out of your Flash applications.

• Use external XML or text files. XML offers search engines a structured and semantic format for indexing site content. And it makes it easier to implement multi-language versions of an application. By keeping your content layer separate from your presentation layer you’ll have a better overall application.
• Create Unique URLs for Important Sections. “Creating unique URLs for important sections of your SWF file, based on the keywords for which you want to optimize, will help search engines navigate into your SWF application and provide targeted results for the most relevant content,” wrote SEO expert Damien Bianchi, in a March 2009 article. To create these unique links, you may want to employ SWFAddress or UrlKit.
• Use the HTML noscript Tag. It can be a good idea to put important site or application content in side of HTML noscript tags, which effectively puts your content into a search engine spider’s favorite language. If you are using external XML, files, you can even load the content dynamically on the server-side.
• Use XSL When Feasible. XSL can define XML formatting and presentation, so you can use it to single XML source to control both Flash content and HTML content, like navigation. You’ll make the entire site’s content searchable and you will be using an effective site development strategy.

This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.