Home >
Flash has an undeserved bad wrap in the Search Engine Optimization world. Some SEO experts even warn not to use Flash, because many search engines have trouble indexing Flash content. While Flash content is searchable by Google, it’s critical to use Flash wisely if you want your applications to be searchable by all search engines.
There are two significant problems when Flash is used without alternate HTML content. First, even if Flash content were fully searchable by all search engines, there is still a need to control exactly what content in your Flash applications gets indexed (i.e. you may use animated static text letters to form a word and would prefer them to be indexed as a whole word rather than individual letters). Second, regardless of whether your Flash content is searchable, not all devices that browse the web even support Flash (iPhone, for example), and without alternate HTML content there is no way for those users to view the content in your Flash application.
Providing alternate content for a Flash application can easily be done by using SWFObject. SWFObject is JavaScript code that provides an easy way to add searchable alternate HTML content for your Flash applications (you can find more info about SWFObject, and download it at its page on Google Code). Here’s an example of some HTML code that utilizes the SWFObject dynamic publishing method:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("about.swf", "flashContent", "100%", "100%", "9.0.0", false, {},{},{scale:"noscale"});
</script>
<style type="text/css">
<!--
html,body,div#flashContent {
width:100%;
height:100%;
}
body {
margin:0px;
padding:0px;
}
-->
</style>
<title>About Dorothy Brodsky</title>
</head>
<body>
<div id="flashContent">
<p>This is the alternate content.</p>
</div>
</body>
</html>
Perhaps the biggest challenge in adding alternate content is the amount of time it takes making sure your alternate content is an accurate representation of the Flash content. The best way to achieve this is a data driven solution that allows you to use the same data in Flash as you use for your alternate content. That way, you can be effective with your time while also ensuring that your alternate content is accurate.
One solution is to use XML data. Here’s the XML data from a basic XML file:
<root>
<about>Visualizing and designing, from the capture in the camera to digital darkroom processing to print, with my clients or on my own, is the most wonderful environment I can possibly imagine. Continously being challenged in new ways to create compelling images that transport the soul while conveying the details, all the time staying abreast of new and changing technology, is a consuming passion. It is incredibly exciting being in this field today.
As a photographer and digital imaging consultant, I work with commercial clients and private clients in the New York tri-state area and along the entire East Coast. I am inspired by the visions of other people, and I enjoy structuring them into creative realities. My work includes design and advertising, product, architecture, lifestyle and fine art photography. It has been published, exhibited and commissioned commercially. I am an Adobe Certified Expert in Photoshop. I am a graduate of the University of North Carolina at Chapel Hill and live with my family in Greenwich, Connecticut.
</about>
</root>
This data can be loaded into Flash with the following timeline code:
var xml:XML;
var req:URLRequest = new URLRequest("about.xml");
var loader:URLLoader = new URLLoader();
function dataLoaded(event:Event):void
{
xml = new XML(loader.data);
about_txt.text = xml.about;
}
loader.addEventListener(Event.COMPLETE, dataLoaded);
loader.load(req);
Using the PHP5 simplexml extension with SWFObject, you can easily output XML data as searchable HTML alternate content. This can be done using minimal code, and requires very little knowledge of PHP. Here’s an example:
<?php
$xml = simplexml_load_file("about.xml");
echo($xml->about);
?>
Here is the complete PHP file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("about.swf", "flashContent", "100%", "100%", "9.0.0", false, {},{},{scale:"noscale"});
</script>
<style type="text/css">
<!--
html,body,div#flashContent {
width:100%;
height:100%;
}
body {
margin:0px;
padding:0px;
}
-->
</style>
<title>About Dorothy Brodsky</title>
</head>
<body>
<div id="flashContent">
<h1>About Dorothy</h1>
<p>
<?php
$xml = simplexml_load_file("about.xml");
echo($xml->about);
?>
</p>
</div>
</body>
</html>
Using this technique, you guarantee that the alternate content is an accurate representation of the Flash content, while simultaneously creating an easy way to update both by updating the XML file. I’ve seen my own projects soar to the top of search engine results using this same method. With this technique you can create a Flash based site that is fully searchable by all search engines, easy to update, and accessible by nearly all web enabled devices.
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Hi Todd, to be honest are years that I use javascript to conver the html of the related dom element to xml and pass it to flash, so you have only to maintain the html page, php or not.
Good point. Using PHP instead is just my personal preference.
The other way is to have your HTML page with a xhtml doc type. This way you can load the same page into Flash as XML and not have to manage separate copies of content.
Just use xpath / E4X to grab the required DOM element(s). As the page was already loaded, it should already be in cache and have no network overhead on reloading inside Flash.
This also gives you the ability to build a dynamic menu structure in Flash from
Anyway, they all achieve the same thing in regards to white hat SEO practices...
This great way, I see an advantage of using the PHP SimpleXML in more dynamic cases, maybe multi lingual as an example, where you can drive the content using different XMLs.
For more static cases i would still pull the content straight ot of a div. Creating an XML inside Flash with that content.
It is a personal choice as Todd said. Great contribution for people that are still trying to find a way to show clients that Flash can be SEO friendly.
Thanks!
Though certainly useful it still sounds like too much of a 'double work'/'indirect access' factor too me. You just can't beat text-based formats like HTML, or for more graphical stuff; SVG.
It works great if flash was spliced into each single page.
how to handle whereas a sinlge swf contain all the page
It works great if flash was spliced into each single page.
how to handle whereas a single flash file contain all the page
hi,
silex comes ready made with HTML equivalents to your content. Take a look... http://silex-ria.org
bye,
Ariel
I have been working with Javascript, PHP, Actionscript, and (X)HTML for several years now.
Im just getting into Erik Ray's Learning XML.
Its incredible to think XML bridges the divide among ALL of these technologies. Thanks for the info!
To be honest are years that I use javascript to conver the html of the related dom element to xml and pass it to flash, so you have only to maintain the html page, php or not.
Mish - club penguin
It works great if flash was spliced into each single page.
how to handle whereas a single flash file contain all the page
Instead of providing alternate content, why not just use alternate content instead of flash (SVG|Canvas|Javascript). The web will thank you.
For more static cases i would still pull the content straight ot of a div. Creating an XML inside Flash with that content
It’s critical to use Flash wisely if you want your applications to be searchable by all search engines - professional development
I have been learning web design for over 6 months now leaning with a wide range of web design technologies has tempted me the joy of learning more by reading interesting articles about web design
According to my statistics, under 2% of the current users don't support flash. However, it's better to be safe than sorry! Thanks for the code snippets. - Josh the LOCKSMITH
Just use xpath / E4X to grab the required DOM element(s). As the page was already loaded, it should already be in cache and have no network overhead on reloading inside Flash.
California traffic school
new jersey defensive driving
florida drug and alcohol course
California Drivers Education
Sacramento Traffic School
Defensive Driving
Driver Education
The main problem with using Flash without HTML to back it up I would say is the problem with search engine indexing. As mentioned in the post, even if the search engines can crawl into the flash, there are no tags (h1 etc.) for the search engines to be able to organize the data. - Jennifer of financial marketing.
Jennifer you make a good point. Perhaps there will once be a new flash version in which you can add tags and 'importance titles' to text and images in the flash. - Michael Pillsbury
Jennifer, I hadn't thought of that issue before (probably because I would always use both flash and html), but it's a valid point. The search engines will not be able to organize data without tags. You need a healthy combination of flash and html to have an effective site that also allows the spiders to come around and correctly index each page.
Jennifer, I hadn't thought of that issue before (probably because I would always use both flash and html), but it's a valid point. The search engines will not be able to organize data without tags. You need a healthy combination of flash and html to have an effective site that also allows the spiders to come around and correctly index each page.
Jennifer, I hadn't thought of that issue before (probably because I would always use both flash and html), but it's a valid point. The search engines will not be able to organize data without tags. You need a healthy combination of flash and html to have an effective site that also allows the spiders to come around and correctly index each page. Austin Attorney
I wish I knew how to learn coding instantly. Have problems with designing my blogs. So far the job is done by a friend's help. I really wish I could do it myself.
obat
Being sure about the accurate presentation needs careful and detailed examination. That is the hardest part to me since I tend to be careless, lol..
concrete sealer
Alternate content for a flash application can be difficult to come by these days, but you can get a free bet with skybet which is a relief to know regarding flash applications.
Most of the SEO really don't recommend to use flash but if you want we have to provide an alternative text content that will be easily seen by the search engine
ISKCON
Flash is over rated and i rather java script. The only time i think we would use flash is when you have a personal website. Once you are trying to SEO a website for Google. There should be "NO" FLASH.
Kris
locksmith
Thanks for this great script. I was looking for something like this.
Thanks again, Jason @ how to speed up my computer
Can anyone describe me the meaning of this SWFObject? I am new in here so if anyone has a patience I would be gratefull! learn how to sing better
Flash should not be used in any website if you want to gain recognition from Google! Office Jobs
Thanks for the useful post Todd, I'm currently about to start a Adobe Flash course at college, and this will make my flash projects much easier to update, currently trying to an animation of a fast cars in motion, certainly not easy.
Thank you for the information. I use flash content too, but still exploring to understand better.
Photo My World
I think that flash can be combined with SEO and work quite well. I think that flash gets unstuck when it's used for the entire website so that Google indexes one page. It's not a good use of content and is expensive.
At my Hertfordshire SEO agency we often work with clients who have been missold websites. They may be visually spectacular but no good if they can't be found!
I've always stayed away from flash because of the SEO worries. This post may change my mind a bit, at least its good to know there are options. We may consider adding some flash to our wedding favors
site soon.
Hi Todd, can you check if the code works ok in IE8... i seem to get exception errors..
The main problem with using Flash without HTML to back it up I would say is the problem with search engine indexing. As mentioned in the post, even if the search engines can crawl into the flash, like on the vistaprint site there are no tags (h1 etc.) for the search engines to be able to organize the data. -
thanks for this information. the thing about flash is that mobile browsers are still not able to use most flash players and the like on websites right now. its important to have alternatives to flash so that all the visitors can view the page. insurance forum
Thanks for this useful information. locksmiths
this is definitely some great stuff.
remodel home videos
Developing flash application without errors is very hard. Once my friend designed a flash and he closed body in the banner so that google didn't find text in the page. Which cause me loose PR. But i got opportunity to learn much from this article.
It works great when flash is spliced into each single page.
Flash is a great application, been using it for many years.
apotik
This article finally cleared my confusion on how Google treats flash pages in websites. Thanks for sharing your knowledge with us.
Andrew of 1800PetMeds Blog
Flash is SEO friendly and a lot of people don't know about that.. search engine bots have become increasingly adaptable..
Robert from diabetics site
Wow, flash does prove helpful to SEO. Thanks for debunking the bad rep it gets.
Thanks Todd for the post. I might use this for the audio player I've been coding to play our hip hop beats on our website. Some people search for beat titles, but because they are all inside the flash player, they don't show up on search results.
Alternate Content for flash application is must today because it will be affecting the SEO much.
Regards
Without doubt effectively providing alternate content is essential in terms of well searchable sites! Thanks for sharing.
Zauberer
Once my friend designed a flash and he closed body in the banner so that google didn't find text in the page. Which cause me loose PR. But i got opportunity to learn much from this article.
Thanks for sharing. cleaner reviews
Providing the alternate things is totally parallel .
security+ | comptia a+
in the process of deciding weather or not to add flash to my place card holders site however I am wondering if I should just stick to basic html coding for better crawling.
Hi,
Thanks for your kind sharing.Thought it will be very much influencive for audio players.Definitely try it soon.
Pofecker
Cool. I'll surely be using this in one of my video blog. Really a great and effective way to provide different content for a flash application!
Thanks!
Flash contributes to increased conversion. I'm going to test out on my wedding favors page and see if increase in conversions.
I think that flash can be combined with SEO and work quite well. I think that flash gets unstuck when it's used for the entire website so that Google indexes one page. It's not a good use of content and is expensive.
Movers NYC
Flash video is really the most universal web video format. I'm not a fan of all flash sites, but using it for embedding video clips is a good use of it.
Regards, Kevin R CEO Clasamente
I agree with many of you about the benefits of Flash Video. I chose to publish 50 independant short films from my short film competition in flash video just because of Cross platform/browser compatibility. I just opened up access to the all the short films for all digg users today here : Scoruri Live
Flash video can be an alternative to an avi movie files. An IMHO it also has good quality too
Hello Todd,
a very big thanks from Egyptian web designer a lot of thanks for share this flah SEO lesson.