Creating Optimized Content in Flash - Search Engine Optimization for Flash

SWF files, like HTML, video, and images, can include metadata. You can use this metadata information to give Flash movies titles and descriptions. At this point, search engines, even with the recent advancements of Flash SEO technology, don’t index the metadata information. That’s not to say you should avoid using it altogether. Rather, you might as well add in the metadata information now, and it may work to your advantage in the future. With the advancements in Flash SEO, it’s becoming increasingly likely that this metadata will be used eventually.

The metadata used in SWF files is similar to the metadata used in other Adobe applications, and it contains information about a file that’s embedded into the file itself. This is called XMP metadata. XMP (eXtensible Metadata Platform) metadata can include many different types of information, and even custom information, but what’s relevant to SEO is that it can contain a title and a description.

Adding metadata to a SWF file is extremely simple. One way to open the metadata window is to choose File→File Info. Another way to access the window is through the Publish Settings window, which you can access using the Property Inspector or through the window command File→Publish Settings. In the Publish Settings window, click the Flash tab to set options for publishing Flash content. In the Flash tab, click the File Info button next to the Include XMP Metadata checkbox to open the window used to enter XMP metadata into the SWF file (see Figure 3.1, “Adding XMP metadata to a file”).

Figure 3.1. Adding XMP metadata to a file

Using the metadata window, you can then add XMP metadata, including title and description information, to your SWF file. Like metadata in HTML, this metadata travels with your SWF file once it’s published, providing information about the file’s contents.

Once XMP data is embedded into a file, you can view the metadata in two ways. You can view it in Adobe Bridge, or view it in a text file created by Flash. Either way, you’ll need to turn on the Include XMP Metadata checkbox in Flash’s Publish Settings window, add some XMP metadata, and create a SWF file by selecting Control→Test Movie or by Publishing the File.

It’s easy to view and edit metadata in Adobe Bridge. To view the data in Bridge, open Bridge and browse to the folder where your SWF file with embedded XMP data is located. Once you’re in the proper location, select the SWF file to view its metadata in the Metadata panel (shown at the bottom right of Figure 3.2, “Viewing the SWF file’s XMP metadata in Bridge”). While you’re in Bridge, you can also edit XMP data by clicking the Edit button (the pencil icon) for a field you’d like to edit.

Figure 3.2. Viewing the SWF file’s XMP metadata in Bridge

To view metadata as a text file, make sure you select the “Generate size report” checkbox in the Flash tab of the Publish Settings window before you publish your Flash content. After you’ve published your Flash content, you’ll see a plain-text file created in the same folder as your other published content that includes the XMP data. You can view the data (Figure 3.3, “Viewing the file in TextEdit”) by opening the file in any text editor.

Figure 3.3. Viewing the file in TextEdit

Some of the text you enter in Flash will automatically be placed in your published HTML file, and is searchable. This text is limited to text that has been typed manually into a dynamic text field in Flash, without using ActionScript. Though this is a quick and easy way to get Flash text into your HTML code without doing any extra work, relying on this method isn’t the best idea, for a few reasons.

For one, you have little control over how Flash translates your dynamic text field’s content into HTML. The HTML places the content of your dynamic text field in a <p> tag, giving little structure to the HTML. If you were to hand-write the HTML code, you could organize blocks of text into lists, headings, and so forth.

Next, any links added using the Property Inspector are inserted into the HTML as standard links, using only the href and target attributes. This doesn’t allow you to use important SEO attributes, such as title, in your links.

Finally, the HTML version of your Flash text is placed in a comment, so only spiders can view the text. Because the text is visible only to spiders, those who don’t have Flash Player installed won’t view any alternative content.

So, what Flash content is searchable? Basically, any text that appears in a text field and any URLs revealed in ActionScript or otherwise are now indexed by search engines. That includes the URLs you want to be indexed, as well as the ones you may not want to be indexed. Essentially, anything in a dynamic text field that a person can see can now be indexed.

To make searchable Flash content, you don’t have to do much, if anything at all. Google and Yahoo! are already indexing the content right now. The content indexed is all Flash content, not just content published for later releases of Flash Player.

Of course, this news is both triumphant and tragic. Triumphant because search engines are doing all the work and you have to do nothing, and tragic because search engines may end up indexing a lot of private data.

Now, you may not want all your Flash text to be indexed. If not for privacy reasons, you may want to have more control over which keywords are used, or you may be using letters as graphical elements. In these cases, simply convert any text to vector outlines (Modify→Break Apart) or import that text as a bitmap graphic. That way, you can have a little more control over which content is indexed and which is not.

If Flash applications can be searched, it’s crucial to understand how the content is indexed relative to how HTML content is indexed. At this point, it’s difficult to say, so the best practice currently is to use HTML in dynamic text fields for SEO in Flash, along with CSS or the TextFormat class. That way, you have maximum control over the structure and style of your text fields while simultaneously optimizing them.

Using HTML text with CSS in ActionScript 3.0 requires a basic to intermediate knowledge of all three languages. In this section, we’ll take a bird’s-eye view of how it works.

First, you’ll need to have some HTML and CSS code to bring into Flash. Table 3.1, “Flash Player 10-supported HTML elements and attributes” lists the HTML elements and attributes that Flash Player 10 supports, as stated in Flash Help.

PROD: The ED/AU provided footnotes for the following two tables, but did not specify where the markers should go. I’ve placed them at the end of the table titles, but you may want to double-check with ED/AU on whether that’s what they want. --Tools

You’ll also need to understand what CSS is supported. Table 3.2, “CSS properties supported by Flash Player 10” lists what CSS is supported in Flash Player 10 (again from Flash Help).

The ActionScript to load HTML and CSS into Flash will require you to be somewhat familiar with the language. Basically, you need to use the URLLoader class to load the external HTML and CSS files. Once you’ve loaded both files into Flash, you can parse the styles using an instance of the StyleSheet class, making it usable, by using the parseCSS method. From there, you connect the stylesheet object to a text field by using the text field’s styleSheet property and then have the text field display the styled HTML data by using its htmlText property. That’s it! Your code may look similar to this example:

var htmlReq:URLRequest = new URLRequest("html.txt");
var cssReq:URLRequest = new URLRequest("styles.css");
var loader:URLLoader = new URLLoader();
var sheet:StyleSheet = new StyleSheet();
var htmlData:String = "";

function fileLoaded(event:Event):void
{
    htmlData = loader.data;
    loader.removeEventListener(Event.COMPLETE, fileLoaded);
    loader.load(cssReq);
    loader.addEventListener(Event.COMPLETE, cssLoaded);
}

function cssLoaded(event:Event):void
{
    sheet.parseCSS(loader.data);
    html_txt.styleSheet = sheet;
    html_txt.htmlText = htmlData;
    html_txt.autoSize = TextFieldAutoSize.LEFT;
}

loader.load(htmlReq);
loader.addEventListener(Event.COMPLETE, fileLoaded);

If you use frame labels in Flash, you may be familiar with named anchors. Named anchors are a way for you to communicate to your browser’s back button to create a better user experience in your applications. Sadly, named anchor support extends only to Internet Explorer, and is unsupported in other web browsers. Though named anchors have little support, and thus aren’t considered necessary, we’ll still discuss the process of creating anchors in case you should choose to use them.

You can add named anchors to any keyframe in your Flash application via the Property Inspector. Simply select a keyframe, add the name of the anchor to the Label field in the Property Inspector, and choose “anchor” for the frame label type.

Perhaps the easiest approach to optimizing a Flash application is simply to create multipage applications. So, instead of navigating the application asynchronously, users will be moved to different pages and will have to wait for the pages to load.

The great thing about this tactic is the easiness of it. Instead of using buttons in your site to trigger complex ActionScript or to navigate to frames or frame labels, you simply use URLs. This gives you a fast and easy method for linking to specific states of your application, and for SEO purposes it gives you an application similar to an HTML-based application.

Sadly, as easy as it is, creating multipage sites isn’t necessarily the best way to optimize a Flash application. That’s because one of the big reasons to use Flash is to easily create applications that run asynchronously—without multiple page loads. Waiting for a page load at every change in an application will make your application more similar to its HTML counterpart, which in some ways defeats the purpose of using Flash.

Deep links are the best practice for linking in Flash SEO, because they allow you to link to any state of an application and they allow asynchronous navigation. Deep linking works by using pseudo anchors, which work similar to named anchors in HTML. You may or may not be familiar with named anchors, so here’s a quick refresher—named anchors are what you use in HTML to navigate to a specific part of a page, and they don’t require a page reload. The idea of deep linking is the same. The most popular tool for deep linking is SWFAddress, which is JavaScript-based and uses special addresses to communicate to Flash.