Flash SEO: graceful degradation to add meaning and structure
Flash sites are traditionally less searchable by Google than plain HTML sites. Now that Google supports the indexing of Flash files, you might think that’s that. You just make your shiny site in Flash and never have to worry about being searchable. Still, something is missing: meaning and structure. Both of them are present in regular HTML sites, but not in Flash. So, how exactly can we make Flash sites just as searchable as HTML sites?
Structural information
How does Google actually index Flash files? Inside a Flash .swf file, Google reads its text fields and follows its links, sure, but can Google add structural info to all this? Flash files normally contain text, but also layout instructions, effects, and other visuals. In other words, Flash files contain a mix of content and styling. This sounds like the old days, when you were used to wrap your <html> text in <font> tags.
With plain XHTML and CSS though, content and styling are separated. This has a couple of benefits, which we all know by now. Google can easily read the “raw source” of a web site, and the visitor sees a visually pleasing result of that same source. The CSS transforms the raw source of the XHTML, as it were, and is declared in a separate CSS file. What’s nice about this, is that Google doesn’t have to plough through lots of visual declarations like <font> tags or <color> tags, which don’t add any meaning to the content. What remains for Google are structural tags, like <p>’s for paragraphs, or <h1>’s for headers. Headers and paragraphs add meaning and structure to a site, and are relevant for your content to rank high on Google. For example, Google knows that if your header contains the word “cookies” and your paragraph contains the word “sugar”, that section would be about cookies, and sugar would be of less importance (it could be an ingredient). If both words were reversed, the section would say something about sugar, and cookies would be of less importance (cookies could be an example of things to make with sugar). If a Flash file contains these same words, Google doesn’t know which is more relevant, and thus isn’t able to add meaning or structure to your site.
Hold this in mind.
Embedding Flash
We now look at how Flash .swf files are embedded in HTML files. The recommended technique to load Flash files in a browser is to use a script, like SWFObject for example. What it does is that it injects your Flash file in a specified <div> tag in your HTML source code. For example, if you have this <div> with id “flashContent” in your source:
<div id="flashContent">
<p>Please download Flash</p>
</div>
…this command will replace that with the flash file “yourFlashFile.swf”:
<script type="text/javascript">
swfobject.embedSWF("yourFlashFile.swf", "flashContent");
</script>
This is a nice technique because it gracefully degrades. If no Flash Player is installed at the visitors computer, the message “Please download Flash” is displayed in the <div>. Otherwise, the message is replaced by the Flash content.
So, this is the recommended technique to embed Flash files. But what about searchability? Imagine that your Flash file contains lots of text, or maybe reads it content from an XML file. In theory, you could copy-paste the text from your Flash file into the <div> of your HTML file, and Google would have access to it. But this presents two problems. One, you have your content twice. That is twice the bytes, and it just doesn’t sound elegant. And two, you have to recreate the tags around your content, to add structure to the text. This is cumbersome.
Use Flash like you use CSS
So, what do we do? We turn things around. First we add content, then we style. Just like CSS on top of XHTML, we put Flash on top of XHTML. The concept is to see Flash as the little brother of CSS. Or actually, the more powerful one.
First, type your content in any editor, preferably without markup. Then copy-paste your text into a HTML file. Wrap <h1> header tags around your headers and wrap your paragraphs in <p> tags, etc. When done, you have your content structured in a HTML file, ready for Google to parse and index.
Now create your Flash file. And, instead of typing text in you text fields, you have to fire up your actionscript skills to populate your text fields with the content from your XHTML file. The key is to write a little XML loader, that loads the contents from your HTML page. Then use the built in E4X commands of Flash to select the content nodes of your XHTML page. Finally, you have to populate your text fields with the data from the XML nodes. Example:
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
function load() {}
XML.ignoreWhitespace = false;
XML.prettyPrinting = false;
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onLoadComplete);
loader.load(new URLRequest("index.html"));
}
function onLoadComplete(event:Event):void {
var xml:XML = new XML(event.target.loader.data);
trace(xml.body..h1.text()) // outputs all h1 tags;
}
Also, dispatchevent.org has some starting points:
Actionscript 3 E4X rundown
Using E4X with XHTML? Watch your namespaces!
Now you have your Flash file, completely separate from the actual content. The content is styled by Flash. Just like CSS does to XHTML content. Benefits: your content is easily updatable without having to enter the Flash IDE, and Google is happily indexing your content. As an added bonus, users without Flash still see the content of your site. You can even style your bare content with CSS, to be übercompatible. So, in the end, it’s all about content, meaning and structure (and, of course, a little design sauce on top of that).
Wrap up
Advantages of this technique:
- Fully search engine optimized
- Meaning and structure restored
- Content is read once
- Content is easily editable
- Visitors without Flash and / or Javascript sill see content
At our studio Booreiland, we created a site using this technique for Unga Toys, an Amsterdam based toy development studio:
Also, we made our own site this way:
Go ahead, try to disable Flash or Javascript or view the source of the sites above. It’s an extremely robust technique. We’ll be using it as a standard for our quality mark from now on.
October 20th, 2008 at 11:41
Thanks for this clear explanation. Is it possible to crank it up one more step. If you got clear distinct pages within your Flashfile (like the unga example) would it be possible to design the site in such a way that if you search for ‘unga + storyteller’ in google that you will be directly taken to this scene? That would really be awesome.
October 20th, 2008 at 12:21
That actually is possible I think. You would have to split up your HTML files. For example, in the Unga case you would have different HTML files for different scenes. The same .swf would then be placed on top of each HTML file, along with a Flash parameter that tells the .swf to jump to that scene. Not a bad idea at all.
October 21st, 2008 at 0:38
Phew, hope I can make the giant step between the theory and practice, by firing up my Actionscript skills
March 9th, 2009 at 20:02
It’s a nice solution to get your flash website indexed by Google (or any other search engine). Though the rules of SEO don’t apply here very well because. SEO is about much more then just indexing content. It’s also about your website structure, leading people directly to the content they want to see, time between updates, the way in which your url is written (so no index.php?id=19&someotherthing=nl), activity of your website and a whole lot of other things.
Therefore this is a nice first step but you might want to take a look at SWFaddress. This is a flash/flex plugin written by Asual. This plugin makes is possible to fake a HTML website.
Examples: http://www.asual.com/swfaddress/showcase/
As you can see the plugin updates the url in your browser everytime you move to another state of your application. This makes your website fully indexable; also the structure of your website. Besides this, you can also create a html subsite which has all the content that needs to be indexed. Whenever a person comes to the website they get redirected to the appropiate state in your swf.
A great advantage you get is that people can bookmark to specific parts of your website. For instance: http://www.booreiland.nl/showcase/ or http://www.booreiland.nl/contact/
August 31st, 2009 at 2:08
Nice write up…usually I never reply to these thing but this time I will,Thanks for the great info.
April 9th, 2012 at 20:57
Thanks a good deal for a bunch of fantastic ideas. I seem forward to reading much more on the topic inside the future. Maintain up the extremely great function! This weblog is going to be great resource and I appreciate reading it.
April 12th, 2012 at 7:08
Hey! Would you mind if I share your weblog with my zynga group? There??s lots of folks that I think would seriously value your material. Please let me know. Thank you.
May 11th, 2012 at 4:17
I am impressed, I must say. Extremely hardly ever do I come across a weblog that is each informative and entertaining, and allow me tell you, you’ve hit the nail around the head. Your weblog is important, the problem is a thing that not adequate men and women are talking intelligently about. I’m really content that I stumbled across this in my search for something relating to this issue.
May 19th, 2012 at 6:39
Excellent post at Monokai » Blog Archive » Flash SEO: graceful degradation to add meaning and structure. I was checking continuously this blog and I’m impressed! Extremely useful information particularly the last part
I care for such information a lot. I was seeking this particular info for a long time. Thank you and good luck.
June 5th, 2012 at 7:29
This site http://choppedseorankings.weebly.com/ gave me an amazing deal… check it out!
June 20th, 2012 at 1:45
you won’t believe how big is this fat mamma – see here – http://reverbnation.com
July 4th, 2012 at 16:58
I’m going to be once again as you bring up to date.
July 6th, 2012 at 2:05
Have you ever thought about writing an e-book or guest authoring on other blogs? I have a blog centered on the same ideas you discuss and would love to have you share some stories/information. I know my subscribers would value your work. If you’re even remotely interested, feel free to send me an email.
July 6th, 2012 at 13:31
An intriguing discussion is price tag comment. I believe that it is best to compose far more on this topic, it won??t be a taboo subject however usually men and women are not enough to speak on such subjects. Towards the next. Cheers.
July 7th, 2012 at 5:45
thank you for permitting us in order to remark!
July 18th, 2012 at 22:15
Building blog backlinks can be a real pain in the present day. After Google decided to bring these new updates, I feel veryconfused and lost. I don’t know where to go or what to do..So every guideline counts.
August 30th, 2012 at 4:47
This is agreat point to bring up. I offer the thoughts above as general inspiration but clearly there are questions like theone you bring up where the most important thing will be working in honest good faith.
November 12th, 2012 at 2:32
Superb post however , I was wanting to know if you could write a litte more on this subject? I’d be very grateful if you could elaborate a little bit more. Kudos!
May 7th, 2013 at 1:08
: regarding remote Shenyang nighttime papers? Facial boil complete last associated with BA of Ni of comb of ┞ Sui claim
Your CBA overall closing that will contains in 5 pines for the first time, needs to be CBA full final actually history an awesome night, but full-court is actually roaring along with harsh In . China can be scolded Inches , allow vid name associated with Five pines even so, end up being likely to be able to grow to be embrassing storage.
18000 lover look at the internet site, this is a information that could along with photograph of variety of Basketball area viewers compete with, it does not take placement that will Cina can enjoy NBA course respect exclusively your self at present. But it is automobile accident and also the floor is actually additional ” Beijing will be scolded ” upon manner some social norms. 18000 folks call the appear that will Beijing scolds collectively, create the highly effective fuel industry which provided sector put yourself in another person’s placement effectively sooner or later, the climate which within enabling CBA be experienced genuinely, surpasses!
Once an individual laughingstock, mind the enthusiast of steel is the region can be installed far more very presently there turn right come, I will be a lot more than the T-shirt that will recognizes lots of fan are going to set up putting on a nation will come a new material gymnasium see a basketball. Even so, the most memorable impact, it is that will uniform echo within athletic field (home) on the horizon In . Beijing is actually scolded Inch .
Previous since, turn up through shield Any in super- , arrive in the football once more basketball, “Beijing will be cheap jordans online scolded Inches a new when became China opposition terrain it appears that Inches attribute Inch , used to own agitated countless going to crew, had activated numerous lover, additionally got surpriseded a great number of international good friend. At this late hours, “Characteristic ” grew to be almost ” classic Inches , attained competition floor apparently you do not weep on the rare occasions appropriately Inches silly Times Inches , ‘t be genuine fan!
May 11th, 2013 at 9:42
I have discovered that fees for online degree specialists tend to be a fantastic value. Like a full Bachelor’s Degree in Communication with the University of Phoenix Online consists of 60 credits from $515/credit or $30,900. Also American Intercontinental University Online provides a Bachelors of Business Administration with a overall study course requirement of 180 units and a price of $30,560. Online degree learning has made obtaining your degree far more easy because you can certainly earn your current degree through the comfort of your dwelling place and when you finish from office. Thanks for all tips I have learned through the website.Our blog at Flippa Cash
May 11th, 2013 at 12:10
I have noticed that over the course of building a relationship with real estate proprietors, you’ll be able to get them to understand that, in most real estate transaction, a percentage is paid. In the end, FSBO sellers tend not to “save” the payment. Rather, they fight to win the commission simply by doing a strong agent’s occupation. In doing so, they devote their money and also time to carry out, as best they’re able to, the duties of an representative. Those obligations include revealing the home through marketing, presenting the home to all buyers, creating a sense of buyer emergency in order to induce an offer, scheduling home inspections, controlling qualification investigations with the mortgage lender, supervising fixes, and facilitating the closing.Our blog at Flippa Cash
May 17th, 2013 at 2:55
This is a great post! I like this topic. This site has lots of advantage! I found many interesting things from this site. It helps me in many ways. Thanks for posting this again.