|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
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:
Source of the example: http://www.htmlref.com/examples/Fig10-
Notice that the highest value -- -- 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
(To view the Flash Sample, visit this article online at
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
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.
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