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?
You smile diplomatically as they proudly proclaim it “almost finished” and…
“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 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. Here’s the source code we used to produce the layered sections found in the graphic above. Copy and save (as HTML) the following and view it in your browser to see for yourself…
<html>
<head>
<title>Z-order Example</title>
<style type=”text/css”>
<!–
div.one {position: absolute;
top: 20px;
left: 20px;
height: 50px;
width: 50px;
color: white;
background-color: blue;
z-index: 2;}
div.two {position: absolute;
top: 30px;
left: 30px;
height: 25px;
width: 100px;
background-color: orange;
z-index: 1;}
div.three {position: absolute;
top: 40px;
left: 40px;
height: 25px;
width: 25px;
background-color: yellow;
z-index: 3;}
–>
</style>
</head>
<body>
<div class=”one”>This is blue section.</div>
<div class=”two”>This is orange section.</div>
<div class=”three”>This is yellow section.</div>
</body>
</html>
View this example in your browser
Source: 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. 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.
Flash Sample — (opens in new window)
Dave was kind enough to share with us the source code he used to create the effect…
<HTML>
<HEAD>
<TITLE>Movie2
</TITLE>
<!— REMEMBER TO INCLUDE YOUR META TAGS —>
</HEAD>
<BODY bgcolor=”#FFFFFF” topmargin=”0″ leftmargin=”0″>
<!— THE TEXT BELOW IS STANDARD HTML —>
This is HTML Text layered behind a Flash Movie in HTML
<p>This flash movie was made transparent so you may see the effects
</p>
<p>of putting text behind flash. Using DHTML you can absolutely position
</p>
<p>a flash object right over top of your existing html code. Search engines see
</p>
<p>copy and text while visitors see your dynamic flash movie.
<!— THE BELOW LINE CONTAINS THE Z-ORDER — IN THE TAG, IT IS Z-INDEX —>
<span style=”position: absolute; left: 0; top: 0; z-index: 1″>
<!— FLASH OBJECT OR MOVIE —>
<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs
/flash/swflash.cab#version=5,0,0,0″ WIDTH=550 HEIGHT=400>
<param name=”_cx” value=”14552″>
<param name=”_cy” value=”10583″>
<param name=”Movie” value=”http://www.searchengine-news.com/flash/Movie2.swf”>
<param name=”Src” value=”http://www.searchengine-news.com/flash/Movie2.swf”>
<param name=”WMode” value=”Transparent”>
<param name=”Play” value=”-1″>
<param name=”Loop” value=”-1″>
<param name=”Quality” value=”High”>
<param name=”SAlign” value>
<param name=”Menu” value=”-1″>
<param name=”Base” value>
<param name=”Scale” value=”ShowAll”>
<param name=”DeviceFont” value=”0″>
<param name=”EmbedMovie” value=”-1″>
<param name=”BGColor” value=”FFFFFF”>
<param name=”SWRemote” value>
<embed src=”http://www.searchengine-news.com/flash/Movie2.swf”
quality=”high” wmode=”transparent” bgcolor=”#FFFFFF” WIDTH=”550″ HEIGHT=”400″ TYPE=”application/x-shockwave-flash” PLUGINSPAGE=
“http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash”>
</OBJECT>
</span>
<!— THIS MARKS THE END OF THE SPAN — THE SPAN DEFINES WHAT IS
CONTAINED IN THE Z-ORDER TAG —>
</p>
</BODY>
</HTML>
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 positionis 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.”
To which we can only agree. If the content is relevant, everyone seems tolerant of the strategies employed to enhance the findability of legitimate sites.
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 pages 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.
by Andy Beal
About the Article
Robin Nobles is Director of Training for the Academy of Web Specialists. Robin has taught well over a thousand students in her online and onsite search engine positioning courses during the past several years. Her latest book, Web Site Analysis and Reporting, as well as her past book, Streetwise Maximize Web Site Traffic, can be ordered through Amazon.com. Visit the Academy’s training site to learn more about their search engine ranking courses and products.
