Sugar and spice makes everything nice. Have a great Thanksgiving weekend! http://t.co/tiOrcOmdEE

posted 1 hour ago on twitter

close
blog_blitzGeneric_2
blog_blitzGeneric_2

Search Engine Optimization for Flash Websites. We did it, here’s how.

According to web usability consultant Jakob Nielsen, Flash websites are 99% Bad mmmkay. Two of the reasons he gives (in his now 7 year old report) for this claim are that:

  • The “Back” button does not work.
  • In general, Flash integrates poorly with search.

BLITZ has already addressed the first issue in our Flash Framework. The Framework implements an elegant and user-friendly solution that not only fixes the browser back button navigation issue, but also adds additional accessibility and usability functionality by adding support for:

With all of those problems solved, I decided to tackle the problem of how to optimize a Flash website for search engines. Since we are dealing with high end websites with large marketing budgets behind them, the end result had to be white hat compliant SEO. We couldn’t afford to get our clients websites blacklisted by the search engines. With search accounting for upwards of 40% of a websites total traffic volume (depending on the type of site) we needed to come up with a solution to offer to our clients that would give them more bang for their buck. The end result of our Flash SEO efforts looks a little something like this:

Search Engine Optimization tool for Flash websites

This application looks pretty simple on the surface, but the real power behind the tool lies underneath the covers.

The first thing we do with this app is load up a projects config.xml file. Our config.xml file is like mission control for a website and contains all the relevant data about a particular website. The application parses the configuration XML document and returns a list of all the page nodes for the site. Each page node in the XML file represents a page in the Flash site. Each page also contains (among other things) a title attribute, name attribute and a reference to a copydeck.xml file. The copydeck.xml files contain all the text that displays on each corresponding page of the site. Armed with all of this textual data, we can now generate all the necessary files to optimize our Flash site for search engines. Once you click the Optimize Website button, the tool will spit out search engine optimized pages for each of the page nodes it discovered in the configuration file. The files it generates include:

  • One HTML page per page node
  • Each HTML page will include site-navigation links to all other pages on the site
  • A sitemap.xml file so search engine spiders can easily discover all of the pages in a site
  • Each static HTML will by default deep-link to the corresponding page node
  • The HTML files all support back/forward navigation, plus pretty URLs, page title updates, etc. as outlined above
  • Each HTML page uses semantic HTML markup to optimize the page for search engine indexing
  • Each page also includes Flash version detection to deliver the best version of the website that the users browser supports
  • All HTML pages are fully compatible with any hand-held or mobile device, even if they don’t have Flash Light installed
  • All pages fully support any web-metrics scripts for visitor stats tracking

And what would a website tool be if we didn’t eat our own dog food? Check out the end results on a few pages on the BLITZ website:

Be sure to view the pages HTML source, and compare the source text in the HTML document with the text in the Flash version of the site. It’s the same! And the HTML version is fully navigable, fully readable, and fully searchable – not to mention that the markup used is semantically correct for the type of content.

And for proof on just how effective our search engine optimization for Flash websites really is, check out the top natural search results for those same three pages on the top 3 search engines: Google, Yahoo, and Microsoft’s Live Search!

So even though Mr. Nielsen had some some valid points, that doesn’t mean we should just throw in the towel and give up on a technology because it’s not ‘perfect’. That’s where we the development community come into play, developing solutions to perfect the imperfect.

{ 39 comments }

Ming June 11, 2007 at 4:17 pm

Very cool.

Savvas Malamas June 12, 2007 at 12:39 am

This so nice..
Any luck on publishing this tool?

MrSteel June 12, 2007 at 8:21 am

that guy looks interesting :D

many so called experts take on flash for reasons they find bad but that reasons in reality doesn’t exist

alternative content and backlinking is fine and great, you made a very strong point to prove it’s perfectly normal for flash page to be fully functional in terms of SEO

I can only advise Flash developers to be more mature and implement those sort of things, not to be lazy because this things does metter

cong on great article!

all the best
Alex

Jason Grunstra June 12, 2007 at 10:26 am

Sawas, we can’t publish this at this time since it’s designed to work specifically with our own proprietary Flash framework. But you’re more than welcome to use the same concepts.

One other possible solution that I’d personally like to see someone tackle, is to use the source HTML content as a data-store to power the Flash content. Valid XHTML == XML, and since Flash handles XML really well, it should be able to use the XHTML file that the Flash lives inside of as it’s own copy source.

It’s the same idea as this article describes, but in reverse. You could even hand over the source HTML files to a client, tell them to open it in Dreamweaver (or other WYSIWG tool) and they could modify their own websites content.

SanDiegoSEO June 12, 2007 at 10:48 am

Let’s see some results for terms with at elast a million competing pages. Technically you’re delivering two different sections of content to a user and spider, which runs the very thin line of cloaking. I wouldn’t be willing to risk a clients website on this until hearing from the top 3 engines and their feelings on the tactic. We’ve been wrestling with it on some projects at the agency I work at, but have yet to see good results in competitive niches.

Gaston June 12, 2007 at 11:22 am

This is great! I’ve dreamed of this for months!, Where can I get it? Is it for sale?

Ronnie June 12, 2007 at 7:09 pm

Once again another hurdle crossed. I think this effort will really break some mindsets and barriers.

Savvas Malamas June 13, 2007 at 12:48 am

Ok Jason thanks for the reply and mainly thanks for this post.
Keep inspiring us..

Ruben Rojas June 14, 2007 at 8:21 am

Really important this article.
I like to know if you will publish this tool for designers and developers.

Donal Neligan June 14, 2007 at 9:03 am

This is really impressive. Fantastic work, how much? :)

SanDiegoSEO June 14, 2007 at 9:33 am

This is still hiding text from the user. Since the DIV tag that you’re basing the content off of is hidden. While I understand your point of “The flash content is pulled out of that div tag” its still a case of that div tag being hidden. Thus not allowing this to help “SEO” a site.

Tom June 14, 2007 at 10:33 am

> One other possible solution that Id personally like to see someone tackle, is to use the source HTML content as a data-store to power the Flash content.

Spot on! We actually use a method like this, you can read about it here: http://alastairc.ac/2007/06/cms-editable-flash/

Jason G June 14, 2007 at 12:58 pm

Tom that’s awesome! Nice work. I have one suggestion that may address the loading issue you outlined and help the Flash load faster. Since the images come first in the DOM (before the Flash), the Flash may not load until all the images have loaded. You can prevent that by using something like:

document.addEventListener(”DOMContentLoaded”, myFunction, false);

in Firefox which will fire off myFunction once the DOM is loaded. That way it doesn’t need to wait for the images to fully load.

And if you upgrade your Flash embed code to a JavaScript method (such as SWFobject) you could just call the SWFObject.write() method as your myFunction parameter.

William Hines June 14, 2007 at 2:41 pm

Wow, this is flooring. I’ve been searching for somebody to break the ground on this for over a year now…I was actually working on creating a ruby on rails cms system that generates a site + mirrored xml files for a mirrored flash site to utilize – however you have beat the industry once again.

Great work! I’ve seen the deeply embedded links and browser navigation integration in sites like 2advanced and in2media…but the seo is amazing.

Once again, great work…it’s only a matter of time before this becomes industry standard and all the anti-flash developers are silenced…

Tom June 14, 2007 at 3:33 pm

Thanks for the feedback Jason :) ,

Regarding the loading issue:
The JavaScript is in fact being triggered on DOM loaded (using jQuery $(document).ready), hence JavaScript is being used to embed the Flash (’What the scripts do’ in the article). We specifically didn’t use SWFObject because it produces invalid code – also, rolling our own solution gives us so much more control over the user experience.

This is something that just turned up in development; as stated in the article, the loading issue isn’t fully tested (it isn’t particularly a problem with the content we’re using)… So I’ll look into it at some point in the future.

As already stated in the comments, I do hope the industry moves forward with these methods, the myths surrounding Flash are ready to be dispelled – personally I’m really pleased to see that others are looking into the problems presented with embedding Flash content.

Jesse June 22, 2007 at 3:21 pm

> One other possible solution that Id personally like to see someone tackle, is to use the source HTML content as a data-store to power the Flash content.

Try content injection with SWFObject; http://blog.deconcept.com/code/passflashxml/flashdata.html

HTML
var so = new SWFObject(”index.swf”, “flashwebsite”, “100%”, “100%”, “8″, “#000000″);
so.addVariable(’xmlData’, encodeURIComponent(document.getElementById(’flashcontent’).innerHTML));
so.write(”flashcontent”);

FLASH
var xml = new XML();
xml.ignoreWhite = true;
xml.parseXML(unescape(_root.xmlData));
_root.output_txt.text = xml.toString();

Claus Wahlers July 6, 2007 at 3:35 pm

“One other possible solution that Id personally like to see someone tackle, is to use the source HTML content as a data-store to power the Flash content”

http://guipaganini.com.br/

Joel Stransky July 12, 2007 at 10:47 am

yawn, I figured this out months ago. Only mine works :)
http://www.lightgroup.com/#/nightlife-and-restaurants/jet-nightclub/photos

Joel Stransky July 12, 2007 at 10:51 am

Oh, and mine has session tracking.

Ivan T July 12, 2007 at 11:02 am

Joel – thanks for leaving a note – however your site logic seems broken. For example when I go to about_lightgroup.html – you are not deep-linking your flash content to that section, instead you are taking the user to your homepage. If I was going to the profile section via an HTML link, I’d expect the flash content to reflect that inner section. It appears you have some work to do…

Jason G July 12, 2007 at 11:51 am

Joel, in addition to Ivan’s comment above, the HTML source of your page is VERY risky in terms of search engine cloaking. You are sending different content to search engine spiders (and users without Flash) than what is actually displayed in Flash. If you check Google’s webmaster guidelines you can see that what you are doing can get you black listed in an search index.

What our solution does is send the same EXACT content in both the HTML source AND the Flash interface. The benefit of this is it allows us to maintain the page-paradigm of websites. This makes for a better user experience, as well as much more targeted SEO. And all of this ties into our framework, which by the way has extensive session tracking that works with all the major traffic analytics packages out there.

Joel Stransky July 12, 2007 at 12:23 pm

Thanks guys. I’m well aware of the indexing holes. I’m in the process of building a cms to manage that much more efficiently. Your method of using the dhtml as xml however is very cool. I think I’ll have to steal that. :)

I was commenting on the fact that your browser history doesn’t appear to work. If you were to start a browser session at say google, then paste in a deep link to your about page, then click on your offerings page, then go to an external url like digg, pressing the back button does not take you back through exactly that content.

Kudos on the tracking and other tools.

Jason G July 12, 2007 at 12:33 pm

Joel I’m curious what browser are you using? I just tried what you described in IE7, Firefox 2.0, Safari 2.0 & Opera 9 and it works for me just as you would expect. Clicking the back button takes you to the last page your viewed in Flash.

Joel Stransky July 12, 2007 at 12:54 pm

FF2, IE7 and IE6 all PC. Maybe I have something wonky in my settings but the first back button returns to your site, the second back click doesn’t change anything except the url, then the next back click returns to google. The about us page is not shown, it just stays at offerings for two clicks.

Zachary Schreiber August 2, 2007 at 6:31 am

Incredibly helpful. Thank you.

Though…I might note that as talented as you are in the programming & development side…has it occurred to you that gray type on a black background might be just as detrimental to usability as an all Flash site? Doesn’t matter how good the design or how quickly it loads if you can’t see what you’re reading.

Wolfgang August 28, 2007 at 3:08 am

At the moment, I am developing a cms for flash. In addition to the flash files, i offered a html version with the SAME content (both html and swfs were feeded from the same xml source). So bots, and users without flash plugin saw the html version of the site.
Nonetheless, one of my bigger clients got blacklisted (which is a desaster) by google due to their guidelines(which really need an overwork):
“Some examples of cloaking include:

* Serving a page of HTML text to search engines, while showing a page of images or Flash to users.”

So as good as it sounds, it’s still cloaking in the eyes of google, ergo worthless :(

joseluis September 13, 2007 at 1:21 am

it seems a very good solution, i have implemented myself (http://www.planta.pt, http://www.passatemponokia.com/nokia_5700_xpressmusic/), but i thing there’s a problem, that is dynamic content! :)

Peter January 5, 2008 at 3:47 pm

While the solution is a big step forward, it’s still not 100% perfect.

Let’s say I visit http://blitzagency.com/leadership.html and then navigate to Offerings, and decide to put that new and anchored link (http://blitzagency.com/leadership.html#offerings) into my blog. When Google indexes my blog, it will see the wrong link (leadership instead of offerings), because it doesn’t like anchored links. This actually results in ranking the wrong pages. Or am I missing something?

This also results into many different url possibilities linking to a single page (10 for each page, if you have 10 pages) which actually decreases ranking, and wrong Google Analytics stats for example, cause the requested page http://blitzagency.com/leadership.html#offerings will not be Offerings, but recorded as Leadership as well to Google Analytics.

Jason Grunstra January 15, 2008 at 12:42 pm

Peter you bring up some good points, but in talking with Google and other SEO folks, I don’t believe the additional links will decrease your rankings since the search engines are smart enough to recognize that the content after the hash # is an in page anchor and not an additional physical page to be indexed.

Regarding Google Analytics (or other analytics tracking) you can easily send the correct page (in your example above #offerings) to the analytics system with some simple AS code in your tracking class.

The important distinction to remember is that the correct content is always being served to both the user and the spiders even though that may not always be one in the same. NOTE: Do not use this technique for evil (i.e. cloaking) or you will most likely will be punished by the search engines once they discover it.

Peter Allan Roberts February 4, 2008 at 2:54 pm

Ok guys…i refer to Wofgangs submission ie:-

At the moment, I am developing a cms for flash. In addition to the flash files, i offered a html version with the SAME content (both html and swfs were feeded from the same xml source). So bots, and users without flash plugin saw the html version of the site.
Nonetheless, one of my bigger clients got blacklisted (which is a desaster) by google due to their guidelines(which really need an overwork):
Some examples of cloaking include:

* Serving a page of HTML text to search engines, while showing a page of images or Flash to users.

So as good as it sounds, its still cloaking in the eyes of google, ergo worthless :(

Alrighty – the fact is, flash presentation of a web site is far more interesting than static html. Why should any page or header be classed as “cloaking” by the search engines.
The archaic views of Google and other search engine programmers are actually holding back progress. This discussion started – way back in June 2007 has not been resolved….Where is the solution?

Nic February 18, 2008 at 2:33 pm

Joel’s implementation is still the best. It actually works, it doesn’t just appear to work. And view the source on the home page. They’re actually reading DIVs and displaying that content within Flash.

Oh yea, and in case you missed his post, his back-button actually tracks the entire history, so even if you leave the site to go to Google, when you hit back, you won’t just get routed to the home page. You will literally be where you left off.

Jason Grunstra February 21, 2008 at 11:26 am

Sorry but I’m unable to access Joel’s site any longer to see what you’re talking about.

The Light Group Is Down For Maintenance

web marketing blog March 23, 2008 at 7:25 pm

Is there a way that you can make it more accessible such as when I try to do a “Find in page” or if I want to increase text size for readability.

Okay, so Jakob Nielson is over-rated and is famous cause no one else cares to compete with someone thats been whining as long as he has about “usability.” I find his site difficult to partially cause poor navigation elements, and just too visually difficult.

Personally, I still believe in paintbrushes for pictures, and typewriters for text (dont take this too literally); but this is some great progress for specialized companies like Blitz that can do it..

There has been a lot of discussion about various techniques. Most of them are summed up here: All Flash sites & search engine optimization

c00ler March 26, 2008 at 9:21 am

Great stuff! What are some of your next steps? Perhaps auto-generating print CSS for all of these as well?

Look fwd to seeing it progresses.

siv January 19, 2009 at 9:03 am

This looks really good, but as I read along the comments I see there are some problems. First of all I worry about the chance to get cloacked. Is there any changes from Google on those guidelines?

Second, did enyone come up wiht a good solution to the problem of having “ten” different links pointing to the same page, like http://blitzagency.com/leadership.html#offerings and http://blitzagency.com/leadership.html#offerings.

Third, does anyone else hav experiances with using xhtml as source-code for flash?

strategic sourcing February 26, 2009 at 8:35 pm

Its awesome information. I will certainly try this tool. Please tell me where can i download this tool?

Joe August 31, 2009 at 7:48 am

I’ve been using Gaia framework to tackle the problem of SEO’ing flash to some great results. You’ve probably looked into this already, but in case you haven’t, check out http://www.gaiaflashframework.com

By the way, your own dogfood example is down now and leads users to the worlds most uninspired 404. You guys are better than that :)

kevin November 8, 2009 at 8:03 am

Search optimization is a hyper-competitive endeavor that requires

intense focus and a thorough, up-to-date understanding of how the

search engine algorithms and robots operate
==========================================
kevin

SEO

Recipe March 8, 2010 at 9:20 am

Thanks for sharing this valuable resource,very helpful.