Posted Sunday, September 19, 2004
Perhaps you can relate to the involuntary groan elicited by search engine optimizers when a client presents an expensive new Web site featuring high quality FLASH movie content.
Of course, the client (or maybe your boss?) is thrilled with the dazzling presentation, and they rarely fail to mention what a "small fortune" it cost to produce before adding "it's worth it!...don't you agree? All it needs now is for YOU to optimize it for findability in the search engines."
Isn't it funny? ... how they fail to notice the color rushing to your face as you suppress the urge to scream and opt instead for the tactful approach, patiently explaining (once again) that FLASH doesn't score well in search engines.
Don't panic -- there IS a solution!
Here's a solution you can use to get the best of both worlds - search engine findability and the professional image enhancement that FLASH can provide.
The strategy involves using an absolute positioning technique called Z Order within your Cascading Style Sheets (CSS). For this to make sense, you must first understand what Z Order is. Microsoft's MSDN (http://msdn.microsoft.com) site explains...
The Z order of a window indicates the window's position in a stack of overlapping windows. This window stack is oriented along an imaginary axis, the z-axis, extending outward from the screen. The window at the top of the Z order overlaps all other windows. The window at the bottom of the Z order is overlapped by all other windows.
In non-technogeekspeak, Z Order allows you to place content partially, or even fully, on top of other content. Since only the content on top is viewable, it's entirely possible to place an unintelligible-to-search-engines FLASH movie on top of an easy- to-index-layer of relevant text content. And, by doing so, your site visitor sees only the FLASH movie while the engine sees only your relevant keyword-laden text.
How to create Z Order using CSS
To accomplish the magic it's helpful to first understand what a very basic CSS using Z Order source code might look like. To view the basic example, visit the complete article online at: (http://www.academywebspecialists.com/newsletters/0702.html)
Source of the example: (http://www.htmlref.com/examples/Fig10- 14.htm)
Notice that the highest value -- div class="three" -- is the "window" that lands on top. This is important to understand because that's how we're going to perform the magic.
FLASH over, RELEVANT CONTENT under = SE indexability
By now you've probably deduced we're going to layer our relevant content exactly beneath our FLASH movie. By doing so, the site visitor will see only the FLASH movie in their browser while the search engine will find, and index, the "relevant content" because search engines "view" only the source code of the page (not the browser version) and they index only the TEXT they find within that source code.
To better illustrate how this might look, we enlisted the help of Web designer Dave Barry of SmartCertify Direct -- (http://www.smartcertify.com/). Dave was kind enough to create an example site employing a transparent FLASH movie to help us visualize the effect. As Dave explains...
"This flash movie was made transparent so you may see the effects of putting text behind flash. Using Dynamic HTML, you can absolutely position a flash object right over top of your existing html code. Search engines see copy and text while visitors see your dynamic flash movie."
To see Dave's example, visit the complete article found at the below URL, and look for "Flash Sample." Once there, click anywhere in the browser window, hold down CTRL and hit "A" on your keyboard (Ctrl+A = highlight all) to see how this sample FLASH movie would otherwise "hide" the text were the FLASH not transparent.
(To view the Flash Sample, visit this article online at (http://www.academywebspecialists.com/newsletters/0702.html))
Dave was kind enough to share with us the source code he used to create the effect, which can also be found the above URL.
It should be noted this effect works only in browsers that support HTML version 4.0 or greater. This is only a minor concern, however, as the vast majority of browsers that are being used today are compatible.
Yes, but will the Search Engines tolerate the "trick"?
Obviously the most pressing question is whether or not the search engines will accept, or reject, pages that make use of this strategy. After all, the possibility of layering irrelevant content under, or even entirely off the page (by assigning minus positioning coordinates) is a distinct possibility.
To anticipate how the search engines might view this strategy, once again, we consider the issues of "intention" and "relevancy."
Perhaps Stephen Baker, Director of Business Development and Marketing at FAST, said it best when he remarked, "Our position is pretty straight forward...it's not the technique that we are concerned about, it's the intention. If we index the text in Z- Order and CSS and it's relevant to the content, then we're all happy. But, as you know, we do have internal systems that trip wires all of the time. If a particular technique becomes heavily abused over time, we'll definitely stop indexing information through said technique."
As we've said countless times before, certain legitimate Web site enhancements, like FLASH, frames, dynamic content, etc., are a nightmare for the engines to index. They simply have never done a very good job on complicated HTML page, and FLASH poses, perhaps, the greatest indexing challenge of them all.
Regardless, sites that use these upscale tools have as much right to be found as any others within their selected keyword categories. Projecting a professional image to your potential customers is important, and using Z Order within your CSS gives enables you to obtain that professional image without sacrificing search engine findability.
Copyright Robin Nobles. All rights reserved.
About The Author
Robin Nobles, Director of Training, Academy of Web Specialists, has trained several thousand people in her online search engine marketing (http://www.academywebspecialists.com) training programs. Visit the Academy's training site to learn more about their online search engine marketing training (http://www.onlinewebtraining.com) and search engine optimization (http://www.se-optimizer.com) software. She also teaches 3-day hands-on search engine marketing workshops in locations across the globe with Search Engine Workshops (http://www.searchengineworkshops.com).