Article Posted 2006 May 12, Friday
by Jonathan Hochman from
As of 2006 April 11, a new release of Microsoft’s popular Internet Explorer (IE) browser includes code that prevents Flash controls from working properly on many web sites. The Flash insertion method below resolves this serious problem.
Flash has a bad reputation, undeserved in our opinion, for harming search visibility. Why are SEO consultants concerned about Flash? A few popular WYSIWYG development tools generate invalid, inaccessible HTML code for embedding Flash, and many designers don’t know enough about accessibility programming, search engine optimization (SEO) and the benefits of code validation. As a result, most web pages using Flash aren’t programmed correctly.
Requirements for Successful Use of Flash
Flash animation is a great way to present complex content because it allows the designer to put more content in a finite space, without wrecking page design. If you sell technology, Flash is an ideal way to present a slide show or movie that explains your products’ benefits. With a bit of hand coded HTML, we can satisfy these objectives:
- Clean design using Flash
- Search Engine Optimization (SEO)
- Accessibility for people with different abilities
- Code validation
- Correct functionality with IE
If you have a site built entirely with Flash, you don’t really have a website, because there’s no page structure. In that case we recommend building an HTML site, and chopping up your Flash into separate pieces to be installed on each page.
SEO Flash Programming
Our recommended SEO method for optimizing Flash uses a DIV with search engine accessible content, and JavaScript to detect when browsers are capable of viewing Flash. When the browser has Flash capability, the Javascript manipulates the page’s document object model (DOM) to replace the alternative content with the Flash movie. Search engine spiders don’t run the Javascript, so they see and index the alternative content. The alternative content may contain links, heading, styled text, images - anything you can add to an ordinary HTML page. Simply apply your normal SEO copy editing and coding skills to the alternative content, and Flash becomes a non-issue.
Programming Flash accessibility isn’t spamming, as long as the alternative content accurately reflects the visible movie. In fact, alternative content is mandatory if you want to build an accessible site.
The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) specifically states that multimedia content should have an alternative representation available. Accessibility programming creates the benefit of presenting visual information without losing the visitors and search engines dependant upon text content.
Example: Making Flash Menus Spiderable
The sample code below shows a Flash heading and menu from the WirelessBuilders site that has been made accessible with alternative content. The menu will function properly with the latest ActiveX update for IE. Previously, the interior pages of the site were not indexed because search engines could not follow the links inside the movie. We solved this problem using the HTML 4.01 code below:
<head>
<script type="text/javascript" src="/jscript/flashobject.js"></script>
</head>
<body>
<div id="flashcontent">
<h1>WirelessBuilders</h1>
<p>What we do</p>
<ul>
<li>Site Survey </li>
<li>802.11b </li>
<li>802.11g </li>
<li>systems integration </li>
<li>network design </li>
<li>project management </li>
<li>training </li>
<li>professional services (consulting)</li>
</ul>
<p><a title="Services" href="/services.shtml">Services</a> |
<a title="About Us" href="/about.shtml">About Us</a> |
<a title="Contact " href="/contact.shtml">Contact</a> |
<a title="Partners" href="/partners.shtml">Partners</a></p>
</div>
<script type="text/javascript">
var fo = new FlashObject("/flash/newstyle.swf", "mymovie", "800", "105", "6", "#ffffff");
fo.write("flashcontent");
</script>
</body>
Please visit deconcept for a full explanation of the Javascript code, and download links. You will need to download the flashobject.js file to use this solution.
We do not necessarily recommend building menus in Flash, but if you have a site that uses Flash, and want to avoid the expense of a complete rebuild, this SEO method works well. If a site is built 100% in Flash, you can optimize the content, but you will still only have one page. For those kinds of sites, we recommend recycling the Flash by chopping it into pieces and creating distinct pages.
Example: Making Flash Slide Show Content Visible to Search Engines
A second example, from the Virtutech web site, shows how to insert rather long content into a fixed space. We use a DIV, and set it’s CSS property overflow-y to scroll. This prevents the page layout from breaking when the alternative content is displayed. To see the alternative content load the Virtutech home page on a browser with Javascript disabled.
<div id="movieAlt">
<div id="movieAltInner">
<h2><a href="/products/index.html">Simics</a> is used to develop the embedded software that runs electronic devices such as:</h2>
<li>Aerospace hardware</li>
<li>Automobile control systems</li>
<li>Telecommunications infrastructure</li>
<li> High-end servers</li>
</ul>
<p><em>Hardware:</em> <strong>Satellite Control System</strong></p>
<p> <em>Challenge:</em> Unable to test software with satellites on orbit. How to verify new software?</p>
<p> <em>Resolution:</em> Using Simics, the developers can run software quality tests on the ground, to ensure that the software works correctly before it's installed.</p>
<h2>Industry: Automotive</h2>
<p><em>Hardware:</em> <strong>Electronic Control Unit</strong></p>
<p><em>Challenge:</em> Need to develop software now, but the ECU won't be available for months</p>
<p><em>Resolution:</em> Simics enables programmers to develop and test the software before the hardware is available, reducing time to market.</p>
<h2><em>Industry:</em> Telecommunications</h2>
<p><em>Hardware:</em><strong> Wireless Network Equipment</strong></p>
<p><em>Challenge: </em> You have twenty programmers. Each needs a complete system for testing. They cost MILLIONS.</p>
<p><em>Resolution:</em> Using Simics to create a model of the target hardware, each programmer can have his or her own virtual device for software testing and debugging, without breaking your budget.</p>
<h2>Industry: Internet</h2>
<p><em>Hardware:</em> <strong>Network servers</strong></p>
<p><em>Challenge:</em> Software bugs keep popping up. Some take weeks to reproduce and fix. You are running out of time.</p>
<p><em>Resolution:</em> With Simics, programmers can run the program forwards and backwards to quickly identify, recreate and repair bugs.</p>
</div>
</div>
<script type="text/javascript">
var fo = new
FlashObject("flash/virtutech_intro.swf", "mymovie", "497", "287", "7", "#ffffff");
fo.write("movieAlt");
</script>
The CSS Code
#movieAlt { /*Vertical scroll bar on alternative content*/
height: 287px;
width: 497px;
overflow: auto;
}
#movieAltInner { /*Use separate div because IE's faulty box model*/
padding: 10px 20px;
}
In addition to these sites, we’ve used this Flash SEO method on a number of high traffic sites. The code has been served hundreds of thousands of times without even a single complaint, and the sites have achieved top rankings for keywords found only in the Flash content.
