asp.net的優化 服務器控件背後友好的Html和JS

假設你需要從一個頁面轉向其他頁面,下面有很多種方式,你是如何選擇的呢?你能清晰的說明理由麼?

<%–鏈接的表現形式–%>
<asp:HyperLinkID=HyperLink1runat=serverNavigateUrl=~/Default2.aspx>HyperLink</asp:HyperLink>
<asp:LinkButtonID=LinkButton1runat=serverPostBackUrl=~/Default2.aspx>LinkButton</asp:LinkButton>

<%–出於美觀的考慮,很多網站都會用button來替換掉link–%>
<asp:ButtonID=Button1runat=serverText=ButtonPostBackUrl=~/Default2.aspx/>

<%–用圖片做鏈接,也有兩種選擇方式–%>
<asp:ImageButtonID=ImageButton1runat=serverPostBackUrl=~/Default2.aspxImageUrl=~/upup.gif/>
<asp:HyperLinkID=HyperLink2runat=serverNavigateUrl=~/Default2.aspxImageUrl=~/upup.gif></asp:HyperLink>

如果你還有些迷茫,我建議你查看他們生成html之後的源代碼。

<aid=HyperLink1href=Default2.aspx>HyperLink</a>
<%–HyperLink解析成Html之後對應的就是一個單純的超鏈接,href指向瞭要跳轉的頁面–%>

<aid=LinkButton1href=javascript:WebForm_DoPostBackWithOptions(newWebForm_PostBackOptions(quot;LinkButton1quot;,quot;quot;,false,quot;quot;,quot;Default2.aspxquot;,false,true))>LinkButton</a>
<%–LinkButton1雖然也是一個錨標記,但實際上是利用的JavaScript進行的跳轉–%>

<inputtype=submitname=Button1value=Buttononclick=javascript:WebForm_DoPostBackWithOptions(newWebForm_PostBackOptions(quot;Button1quot;,quot;quot;,false,quot;quot;,quot;Default2.aspxquot;,false,false))id=Button1/>
<%–button被解析成type=submit的input元素,同樣通過JavaScript進行頁面的跳轉–%>

<inputtype=imagename=ImageButton1id=ImageButton1src=upup.gifonclick=javascript:WebForm_DoPostBackWithOptions(newWebForm_PostBackOptions(quot;ImageButton1quot;,quot;quot;,false,quot;quot;,quot;Default2.aspxquot;,false,false))style=border-width:0px;/>
<%–ImageButton被解析成type=image的input元素,同樣通過JavaScript進行頁面的跳轉–%>

<aid=HyperLink2href=Default2.aspx><imgsrc=upup.gifstyle=border-width:0px;/></a>
<%–給HyperLink的ImageUrl屬性賦值後,解析成Html之後對應的就是一個超鏈接中夾瞭一個img,但href仍然指向的要跳轉的頁面–%>

知道瞭這些又有什麼用呢?

用處很多,但我們今天隻談論SEO

就目前的搜索引擎技術手段,JavaScript(當然也就包括瞭AJAX)、表單元素(如input)、Flash和Image都無法(或者很難)被讀取。蜘蛛傾向於讀取簡單的html格式的文本。所以,從SEO的角度出發:

1. 不要使用JavaScript或表單進行頁面跳轉鏈接,如果一個普通的<a></a>也能完成同樣的功能。一般來說,任何不能通過標準錨標識符<a></a>進入的導航,都不會被蜘蛛檢索到。如果本來就使用的客戶端元素,我們應該比較容易註意到這一點;但當使用經過封裝處理過後的服務器端控件時,我們就可能會大意瞭。

2. 註意UpdatePanel裡沒有文本內容的情況。我們可以做一個簡單的測試:

<asp:ScriptManagerID=ScriptManager1runat=server>
</asp:ScriptManager>
<asp:UpdatePanelID=UpdatePanel1runat=server>
<ContentTemplate>
<asp:Labelrunat=serverID=lbl></asp:Label>
<asp:ButtonID=Button1runat=serverText=Buttononclick=Button1_Click/>
</ContentTemplate>
</asp:UpdatePanel>
protectedvoidButton1_Click(objectsender,EventArgse)
{
this.lbl.Text=我是UpdatePanel生成的,所以你看不見我!;
}

解析成Html後的源代碼部分:

<divid=UpdatePanel1>
<spanid=lbl></span>
<inputtype=submitname=Button1value=Buttonid=Submit1/>
</div>

這是很好理解的,因為UpdatePanel一樣是通過頁面的JavaScript函數來生成頁面內容的。查看源代碼,我們能看到相關的JavaScript函數,但不能看到函數生成的內容。而搜索引擎的蜘蛛,它也是隻看源代碼的。

3. 當我們需要使用彈出頁面時,通常的做法是:

<ahref=#onclick=window.open(‘popup.html’,’common’,’height=600,weight=800′);>commonpopup</a>

根據我們上面的交代,這樣的寫法,對SEO而言,無疑也是不利的。所以我們應該使用下面的代碼,即保證瞭彈出窗口的效果,也是SEO友好的。而且即使客戶的瀏覽器不支持或者禁用掉JavaScript,頁面一樣能夠順利的跳轉。

<ahref=popup.htmlonclick=window.open(this.href,’seo’,’height=600,weight=800′);returnfalse;target=_blank>seopopup</a>
<%–註意:這裡的returnfalse語句不能省略。–%>

4. 當我們希望使用一種特殊的字體(常常是欄目標題之類)的時候,我們經常使用一張漢字圖片來代替。這也是一個比較麻煩的事情,因為作為標題,其內容常常是相當重要的關鍵字,如果使用圖片,蜘蛛是也無法讀取的。一種可能的解決方案是sIFR,但這方面我並不是很熟;網上搜瞭一下,似乎還不能應用於漢字。

對於圖片,我們常用的SEO方法是註明title和alt,如

<imgalt=ASP.NET搜索引擎優化title=使用ASP.NET技術開發網站時應註意到的一些SEO技術src=seo.gif/>

不過這也屬於不可見的頁面元素,具體效果如何也很難精確衡量。但有總比沒有強!

5. 其他一些註意事項:

5.1 將html標簽的語義和css結合起來,和《span》和《div》不同,《h1》意味著標題、《b》意味著強調、《ul》《li》意味著列表,這些語義標簽能給搜索引擎更清晰的指示;

5.3 重要的內容放在html頁面(指源代碼,而不是瀏覽器顯示結果)的頂端

5.5 將大段的JavaScript放在頁面底部或者單獨的js文件中;

5.2 最好不要使用框架(frame)佈局;

5.3 大量的VIEWSTATE可能會對蜘蛛造成幹擾;

5.5 牢記:就目前的搜索引擎技術手段,JavaScript(當然也就包括瞭AJAX)、表單元素(如input)、Flash和Image都無法(或者很難)被讀取。

作者:自由飛 /freeflying/archive/2010/02/19/1669469.html