Google SEO For Flash

How to Use 'Flash' in Top Ranking Pages
...and prevent your web design team from screwing up your SEO —by Esoos Bobnar

In the world of SEO, not all Flash is evil. A Flash banner here, or a Flash slideshow there, can provide exciting content for site visitors without harming your rankings! It can also make your webpage look really cool.

On the other hand, building your entire webpage or site in Flash is simply dumb SEO/SEM. You put yourself at an automatic ranking disadvantage. You also handicap your ability to generate conversions (sales, leads, newsletter signups, etc.).

All too often, when a creative design team embarks on a new web site project, they're overflowing with eagerness to build an ultra-modern looking site using Flash as the basis for the design. In most cases they're oblivious to the fact their masterpiece will torpedo any chance the site can rank well in the search engines. That's because, of course, search engines just don't "get" Flash.

Now, if you own the site, no big deal—you simply give an all Flash site the big thumbs down. But if you're part of your company's SEO team or an outside consultant, you're often expected to somehow make the site rank well in spite of the web designers making that difficult by using Flash.

So, if you can't talk them out of it, here's the ammo you need to make sure that your site's Flash design stays SEO friendly.

Quick Review: Why Flash is Bad

When you create an entire webpage in Flash, you've locked up all of your text and links in a format that search engines can't crawl. It's as if you built a webpage, took a screenshot of it, then used that image file as your webpage rather than the page itself. The search engine spider simply cannot "see" the text because, technically, there isn't any—it's all an indecipherable image to them. So now you're forced to create an alternative means by which search engines can interpret the content of your page.

The situation is even worse when you build your entire site in Flash. Not only can't the search engines read any of your pages, they can't even follow your links. AND, it's also almost impossible for anyone to link to your pages. That's because all of your content is locked up in a Flash movie hosted at a single URL (as opposed to various content located on a site's multiple page URLs). You may have great content, but if people can't link to it and search engines can't read it, it's simply not going to rank well.

How Each Search Engine Handles Flash

Technically speaking, Google does index Flash—as does Yahoo and Ask (Microsoft Live currently does not). And, by using a special filetype: operator, Flash files are easy to find in Google's index. Here's a search for fashion design, restricted to just Flash (SWF) files:

Searching "fashion design" filetype:SWF produces:

Obviously there are several Flash pages listed but close inspection reveals that Google is doing a terrible job of describing them. Some titles and descriptions are nothing more than HTML code (i.e., gibberish to most people), such as...


Others are using the loading messages that visitors see when waiting for Flash files to download as titles...

Loading Loading. Loading.. Loading... Designed by ...

There's even one that shows the same keywords over and over, due to Google repeatedly indexing the same blinking or animated text:

Animation Animation Communications Communications Communications ...

This shows you that, although Flash can be indexed, most web designers are experiencing problems making their Flash websites search engine friendly.

FYI, Google's own help files describe their shortcomings to indexing Flash and offers the following suggestions...

Google indexes pages that use Macromedia Flash. However, our crawlers may experience problems indexing Flash pages. If you're concerned that Flash content on your pages may be inhibiting Google's ability to crawl your site, you may want to consider using a text browser such as Lynx to examine your site. If features such as Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.

You may want to consider creating HTML copies of these Flash pages for our crawler. If you create HTML copies, please be sure to include a robots.txt file that disallows the Flash pages in order to ensure that our crawler doesn't recognize these pages as duplicate content.

Clearly Google knows their ability to accurately index your Flash pages is encumbered by inherent limitations based on their spidering abilities. Therefore they offer you the option of creating an HTML carbon copy of your site that their spider can more easily digest. And, if you elect to do so, they caution you to block the Flash version in your robots.txt file—otherwise you may end up with duplicate content.

However, what Google doesn't mention is that, unfortunately, other sites will naturally be linking to your non-indexed Flash site if that's what they're actually seeing. That means that your indexed "carbon copy" HTML site will be buried at the bottom of the rankings because it simply doesn't have any links. This is one of the HUGE drawbacks to having an all Flash site!

But that's not all. There are several other (so-called) "potential fixes" your creative web design team may throw at you in an effort to gain your approval for their design proposals. Here's a laundry list with discussion about what actually works, what doesn't, and why.

 The Flash Search Engine SDK

One of the best ways to get a pretty good idea of what your Flash files will look like once search engines index them is to use Macromedia's Flash Search Engine SDK. The SDK (Software Development Kit) is a free download. It includes an application named swf2html.exe that extracts text and links from a Flash (.swf) file. Once that content is extracted, you can read it in a DOS window or output it to a file as an HTML document.

This technology is similar to what Google uses in their own attempt to extract content from Flash files. So, using the SDK can give you a Google's-eye view of what your Flash files look like to search engines. Unfortunately, the often-jumbled output that you are likely to see stands as reinforcement for why you should not entertain much hope that search engines will parse your Flash files and actually get things right.

For example, Google uses the first line of text in the extracted output as the title tag in the search results. This usually is not the ideal title tag for ranking well nor does it usually entice potential site visitors to click your link in the search results. Likewise, the description is pulled from text Google thinks might be relevant to the user's query. But, often it reads like gibberish. Undoubtedly you will find it challenging, to say the least, to craft the perfect balance between Flash presentation and search engine friendliness.

Animated text in your Flash file presents another big challenge. The problem is that Google might index it repeatedly to the point where your page is mistakenly penalized for keyword-stuffing. Even worse, this heavily repeated text is probably not the keyword text you want your site to be found for. In such cases, you've only succeeded in de-optimizing your page by flooding it with pointless keywords.

We covered the Flash SDK in detail in our report News Flash...Google is Now Indexing Flash!. We also recommend taking a look at the Search Engine SDK FAQ for more background on this tool, but don't expect it to solve all your Flash SEO problems by a long shot.

 JavaScript Text Replacement - The Pros and Cons

Using the JavaScript Text Replacement (JTR) technique, you build your pages almost as you normally would with lots of indexable text in HTML. Then you use a JavaScript program to automatically detect if your user has Flash installed. If they do, you serve them your Flash movie. If they don't, then they simply get your HTML content. Since search engine spiders don't have Flash installed, they'll be served your indexable HTML and everything should go smoothly.

The most commonly used JTR program is called SWFObject()—a detailed guide to which is available on the developer's site. We highly recommend you read that guide if you're going to be using this approach. Regardless, we'll give you some code and we'll cover the basics of how it works below...

SWFObject() for Flash SEO
Note: Click the Highlight Text button, then use Ctrl+c to copy the contents of the display box. This will correctly capture the code and help to prevent errors when you transfer it.

The first section of the code:

<script type="text/javascript" src="swfobject.js"></script>

...should be placed within the <head> tag. Next, the...

<div id="flashcontent">
This text is replaced by the Flash movie.

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");

...section should be placed within the <body> of your webpage and this contains the HTML code (highlighted above in red) you want to get indexed.

That's followed by a bit of JavaScript code which plays your Flash movie assuming, of course, that the viewer has Flash installed. If they don't have Flash installed, they'll see whatever you put in your <div id="flashcontent"> section instead.

It's important to note that you still need to create your HTML titles and descriptions and optimize them as you normally would. SWFObject() simply embeds your Flash movie within a normal HTML webpage. For example, here's a complete (albeit short) webpage using SWFObject():

SWFObject() for Flash SEO - Complete Page
Note: Click the Highlight Text button, then use Ctrl+c to copy the contents of the display box. This will correctly capture the code and help to prevent errors when you transfer it.

Of course, if you've built your entire site as one big Flash executable, you'll have trouble with SWFObject(), which requires that your site be composed of individual web pages which hold your Flash content.

If your site is a single Flash executable, you can attempt to break it up into pieces and put each piece on it's own HTML page. Then link the pages together using FlashVars. This way each HTML page hosts the same Flash movie but you can link to different parts of it so that it starts at a different point in the movie.

This allows people to link to various parts of your Flash file. And using SWFObject() will, to some degree, help your content get indexed. It's not a great solution, but it's about as good as you're going to get if your entire site is built using Flash.

Overall, SWFObject() ensures that users will be served the Flash movie but search engine spiders will still have HTML to index. If your whole site is built out of one giant Flash executable, you're still likely to have problems. But if you're just using individual Flash pages, then we've found SWFObject() works well.

However, using this technique is not entirely without risk because you are serving Google's spider something different than what you are to serving to your site visitors. In simplistic terms, Google calls that cloaking—and that is technically against their rules. Therefore it's possible that your site may be flagged for human review. In actuality, you aren't really doing anything wrong—but their spider might think you are.

To be safe, make sure the indexable content within your <div> tags matches exactly the content you have in your Flash. By doing so, you are likely to pass the human review and escape any penalty. However, if the Flash content differs from the content in the <div> (especially if it looks like you're keyword stuffing) then you shouldn't be surprised if the page (or site) gets penalized.

Regardless, you should expect a human review if you use this technique—so be prepared for it! That means your indexable content better match your Flash exactly. Even then, there's the remote possibility that some automated trigger might register a spam violation and slap a penalty on your page or site anyway. So be aware there is a risk.

By the way, there's also a slight variation on this approach called sIFR (Scalable Inman Flash Replacement) which lets you replace individual text elements with Flash, as opposed to whole sections of the page. It's more technical than we need to get into here, but if you or your team is planning to use this approach, just remember that your Flash must match your indexable text exactly—and you can expect Google to closely scrutinize your site to make sure you're not spamming anyway.

 The CSS Hidden Text Approach

Some developers choose to use the display: none CSS tag. With this approach you create a webpage, place your Flash movie code in it, then add the HTML equivalent of your Flash content to the page. You then wrap the HTML portion in a div tag styled with the display: none property, like so...

<div ID="content" style="display:none;">

The big problem with the CSS display: none approach is that your site is even more likely to be flagged for human review. That's because display: none is commonly used by spammers to hide text on a page. On their hidden text and links FAQ, Google lists using CSS to hide text as one of the violations that'll get you banned.

Again, as long as the display: none text exactly matches the viewable text in the Flash, it's unlikely to be penalized. But it does put you at a small risk. Expect that your site will be subjected to human review to make sure you're not spamming. If everything's clean, you should be okay. But if there's any discrepancies, you could be in trouble.

 Frames and Flash

Another technique is to put your Flash in a frame, then put the indexable text in the noframes area. This gives your webpage indexable text in a format that's readable by search engine spiders and you can easily create unique titles and URLs for each page that people can bookmark and link to.

This approach is similar to the SWFObject() and display: none tactics mentioned earlier but isn't quite the spam red flag as the others. Regardless, you must still make sure that your noframes content matches exactly the content in your Flash.

 The NoEmbed Tag

You can also use the <noembed> tag to hold the HTML version of whatever Flash you're using on that page. Not only does this give the search engine something to read, but it also provides an alternative for site visitors who don't have Flash installed on their browsers.

What's nice about this approach is that it doesn't look suspicious to the search engines. If you absolutely can't get your text anywhere on the page in HTML format, then noembed is the best option. However, compared to text in HTML it's still a poor choice because content in <noembed> still doesn't always get indexed as effectively as when the text is in HTML.

How to Make Flash More Usable for Site Visitors

As mentioned, not only does Flash put your webpages at a terrible disadvantage for ranking well in the search engines, but it can also make it harder for your customers to use your site. Obviously, this would hurt your conversions. Even so, here are some tips to help make the best of Flash from a user perspective:

  • Remember, not everyone has Flash installed on their browser. So make sure you give them a page with a message that makes sense and tell them why they can't view your site. Don't just serve them the default Flash error message gobbledygook.

  • By default, Flash tends to run all the keywords in your page titles together. So you get titles like MyKeywordRichTitle, which is obviously very bad. Make sure your title keywords are readable to users and search engines alike. Not only are gibberish titles bad for SEO, but they can also reduce the number of people who click your listing in the search results.

  • Don't disable your users back button on their browsers. We see this a lot with Flash sites and we know that site visitors absolutely hate it.

Solving the Flash Conundrum

Sensible and limited use of Flash embedded within your webpages can actually be a good idea, presentation-wise. And, as long as you pay attention to the issues stated in this article, you can overcome the typical ranking disadvantage normally inherent with Flash. However, there is no way to build large sections of your site in Flash without putting yourself at a significant ranking disadvantage. We'll say that again...

There is simply no completely effective way to make Flash design compatible with good SEO/SEM.

With that fact in mind, here are the techniques we recommend starting with the most effective:

  • HTML with some Flash elements embedded — Provided that your pages have indexable titles, body content and navigation, embedding Flash on a limited basis into your site does not pose an SEO ranking problem.

  • Frames — Put the Flash in a frame then put the indexable text in a the noframes area. As long as the two contain exactly the same content, search engines don't seem to have a problem with this.

  • NoEmbed — Search engines endorse this approach, even though they do not always do a good job of indexing it.

  • SWFObject() — A fairly clean way to deliver Flash to users and HTML to search engines. Unfortunately, there's a remote possibility of mistakenly being penalized for cloaking. Make sure your Flash and HTML are identical in order to pass human scrutiny.

  • Flash SDK — Tweak your Flash file until it looks good in the Flash SDK, then hope search engines get it right. Unfortunately, they often don't.

  • display:none — Like SWFObject(), this works but could get you mistakenly penalized. You'll be throwing off red flags to the search spiders, even if you're not doing anything wrong.

  • Two completely separate sites — Create your Flash site for your users and a completely separate HTML site for the engines. Then use robots.txt to block the Flash site from being indexed. Google recommends this approach but they ignore the fact that you won't get links to your HTML version if you're showing the Flash version to site visitors. And, therefore, you can't expect to rank well.

The "Solution" is Sensible Flash

We suggest that you always stay focused on what you want your site, and your webpages to accomplish. Then, and only then, if Flash is the best way to do that, then use it sensibly. Remember, if nobody can find your site, then you might as well not have one. If your success is dependent upon search engine rankings, then your site design plans must take a back seat to SEO considerations. It's just that simple.

And that's today's Flash of INsite!
Esoos Bobnar
Head Researcher
Planet Ocean Communications