Flash + SEO tricks with SWFObject, and SWFObject2
Progressive enhancement is a highly recommended technique for integrating flash into html pages in an SEO compatible manner. As recommended by google, adobe, and others. How it works is at the base is a plain html page that define the site structure using conventional links, which when javascript and flash are present autoupgrades/overwrites the boring html with your stunning flash file.
One thing that should be aware of is that unless there is some text in the html div that gets ovewritten, nothing will be indexed by the any search engine, as yet none are rendering javascript rendered html pages. ..meaning you'll be invisible on google ( perhaps that's what' you want if you're in stealthmode). Even if your index.swf was indexed, if your breakdown is one swf per section, the odds of those getting indexed are remote at best. To demonstrate.
In a recent project, we were in a rush to get everything up so just left it with an html + swfObject to embed the swf file and for everyone else a warning graphic saying "javascript + flash required" (meaning almost no text other than the meta tags). We assumed/required user's needing flash for the content, and we didn't have budget for a rich html site (client requires high end design). Amusingly, despite the unique name., after a few months, the main website the CEO and President's LinkedIn pages scored higher in rank than the main website, presumably getting more hits.
So in a recent push of a new landing page, we upgraded to the nice SWFObject 2.0 but were still in a crunch so couldn't get an html site up underneath yet. But what we did have time to do is create a DIV containing a mirror of the text so that the search bots had something to chew on, and used CSS/Javascript to hide the div so normal users couldn't see it. Within a week, that new page is at the top of google, surpassing the President's pages, with the hidden div text showing up in the link summary below it, so it demonstrate how important powerful having the html text beneath the flash is!
Here's how it works, you have a html div beneath the flash site that contains the info that you want. Including links to other html pages.
-
-
-
<div id="contentToReplaceDiv">
-
-
<div id="main">
-
<h1>Flash SEO tricks</h1>
-
<p>Improve your search engine ranking quickly</p>
-
<p>easy changes</p>
-
<p>best of both worlds, high experience flash for your users, richly targeted text for the search bots</p>
-
<div>
-
<ul>
-
<li><a href="http://www.troyworks.com">http://www.troyworks.com</a></li>
-
<li><a href="http://www.troyworks.com/blog">http://www.troyworks.com/blog/</a></li>
-
-
</ul>
-
</div>
In the CSS you just hide the div
-
-
div#contentToReplaceDiv
-
{
-
margin: 0px 20px 0px 20px;
-
display: none;
-
}
Then just follow the normal SWFObject instructions to embed a swf
A working verison can be seen here: