所有需要做的是你要優化flash以使得它是搜索引擎友好的。

大家都知道,flash一般不能獲得搜索引擎的好評。

不用驚慌 —— 這就是解決方案!

這是一個魔術般的訣竅,你可以用它獲得魚和熊掌—— 搜索引擎友好和如flash可以提供般的專業圖像。這個策略包括在你的層疊式樣式表(CSS)中用一個絕對位置技術稱為Z Order

為了讓這個方法可行,你必須首先瞭解什麼是Z OrderMicrosoftMSDN網站解釋如下Z order 就是一個視窗,表示視窗的疊放次序。將螢幕視窗想像成一個三維的空間橫向為x軸,縱向為y軸,垂直於螢幕的方向就是z軸。就是沿Z軸的方向,Z軸指的就是垂直於螢幕的方向,所以可以用來表示視窗的疊放次序。 

  

Z Order layered effect

通俗的來說,Z Order允許你在其他的內容之上部分地放置內容,或者放置完整的內容。由於只有在前上面的內容才可以看見的,所以在一個容易索引的相關的文字內容層的最上層它是完全可能去放置一個對於搜索引擎來說是無法理解的flash電影的。並且,通過這樣做,你的網站訪問者只是看到flash電影,而搜索引擎看到的只是你的相關的關鍵字

怎麼用CSS創建Z Order

首先你要瞭解一個基本的CSS Z Order源代碼。這兒就是我們用來產生層區域的源代碼,如上圖所示。 拷貝和保存下面的內容,並且放在你的流覽器裏查看

<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

注意那個最高值  -- <div class="three"> -- 是位於窗口的最上面。

Flash在上面,相關的內容在下面=搜索引擎可索引地

到現在你大概明白我們正要在我們的flash電影下面的層放入我們相關的內容。這樣做,網站的訪問者在他們的流覽器裏只看到flash電影,而搜索引擎會看到,並且索引相關的內容,因為搜索引擎只是看源代碼頁面,並且他們只索引在那個代碼裏他們看到的文字。

為了更的闡明它看起來是什麼樣子的,我們找到了網頁設計師, SmartCertify 主管—— Dave Barry Dave可以創建一個很好的透明的flash 電影以幫助我們可以直觀的看到效果。點擊下面的鏈結,就可以看到Dave的例子。Flash 例子Dave與我們分享了他的源代碼如下

<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>

 應當注意到,這個效果只有在支援HTML4.0版本或者以上的流覽器中才能工作。這個就是唯一的小問題要注意的,無論如何,作為巨大的並且是主要的流覽器,現今大部分都能相容。

那麼,搜索引擎是否接受(容忍)這個“訣竅”?

顯然最緊迫的問題是搜索引擎是否會接受,或者拒絕我們在網頁中用這個策略。畢竟,有可能是不相關的內容在層的下面,或者甚至整個頁面下都是完全不同的內容也是有可能的。

為了瞭解搜索引擎是怎樣看這個策略的,我們再一次考慮這個策略和相關內容。或許,FAST商業發展和市場部的主管—— Stephen Baker 說的最好,如下:“我們立場是相當直接的我們不關心這個技術,而是它的意圖。

假如我們索引了Z- Order CSS,以及它相關的內容的文字,那麼我們大家都高興。 但是,正如你所知,我們有自己的內部系統,它無時不在關注。假如一個特別的技術變成嚴重的濫用,那麼我們將一定會停止索引這個資訊。對於他說的,我們只有同意。假如內容是相關的,只是為了讓合法網站增加可見性,每個人看起來都可以接受這個技術。

正如我們以前無數次說到的那樣,為了讓搜索引擎索引以增強合法網站的可見性,像flash,框架,動態內容,等等它們就像噩夢一般。他們只是簡單地從沒能做好一個HTML頁面的工作,對於flash的位置,或許,這是索引的最大挑戰。

無論如何,網站用了這些高級工具後,在他們選用的關鍵字目錄中它將有更多的被發現的機會。一個專業的圖像對於你的潛在客戶來說很重要,在CSS裏用Z Order使你獲得這個專業的圖像的同時而不用犧牲搜索引擎友好。

 

推薦給同仁

Tell a Friend

您想要瞭解更多的免費小竅門以便提升你的網站排名嗎?
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com