假設你需要從一個頁面轉向其他頁面,下面有很多種方式,你是如何選擇的呢?你能清晰的說明理由麼?
<%--連結的表現形式--%>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default2.aspx">HyperLink</asp:HyperLink>
<asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/Default2.aspx">LinkButton</asp:LinkButton>
<%--出於美觀的考慮,許多網站都會用button來替換掉link--%>
<asp:Button ID="Button1" runat="server" Text="Button" PostBackUrl="~/Default2.aspx" />
<%--用圖片做鏈接,也有兩種選擇方式--%>
<asp:ImageButton ID="ImageButton1" runat="server" PostBackUrl="~/Default2.aspx" ImageUrl="~/upup.gif" />
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Default2.aspx" ImageUrl="~/upup.gif"></asp:HyperLink>
如果你還有些迷茫,我建議你查看他們產生html之後的原始碼。
<a id="HyperLink1" href="Default2.aspx">HyperLink</a>
<%--HyperLink解析成Html之後對應的就是一個單純的超鏈接,href指向了要跳轉的頁面--%>
<a id="LinkButton1" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("LinkButton1", "", false, "", "Default2.", false, "", "Default2.aspx", false); /a>
<%--LinkButton1雖然也是一個錨標記,但實際上是利用的JavaScript進行的跳躍--%>
<input type="submit" name="Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", false, "Button1", "", false, "; , false, false))" id="Button1" />
<%--button被解析成type="submit"的input元素,同樣透過JavaScript進行頁面的跳轉--%>
<input type="image" name="ImageButton1" id="ImageButton1" src="upup.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ImageButton1", "quot; , "Default2.aspx", false, false))" style="border-width:0px;" />
<%--ImageButton被解析成type="image"的input元素,同樣透過JavaScript進行頁面的跳躍--%>
<a id="HyperLink2" href="Default2.aspx"><img src="upup.gif" style="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:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="lbl" ></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
protected void Button1_Click(object sender, EventArgs e)
{
this.lbl.Text = "我是UpdatePanel生成的,所以你看不見我!";
}
解析成Html後的原始碼部分:
<div id="UpdatePanel1">
<span id="lbl"></span>
<input type="submit" name="Button1" value="Button" id="Submit1" />
</div>
這是很好理解的,因為UpdatePanel一樣是透過頁面的JavaScript函數來產生頁面內容的。查看原始程式碼,我們能看到相關的JavaScript函數,但不能看到函數產生的內容。而搜尋引擎的蜘蛛,它也是只看原始碼的。
3. 當我們需要使用彈出頁面時,通常的做法是:
<a href="#" onclick="window.open('popup.html','common','height=600,weight=800');">common popup</a>
根據我們上面的交代,這樣的寫法,對SEO而言,無疑也是不利的。所以我們應該使用下面的程式碼,也就是保證了彈出視窗的效果,也是SEO友善的。而且即使客戶的瀏覽器不支援或停用JavaScript,頁面一樣能夠順利的跳轉。
<a href="popup.html" onclick="window.open(this.href,'seo','height=600,weight=800');return false;" target="_blank">seo popup</a >
<%--注意:這裡的return false語句不能省略。 --%>
4. 當我們希望使用一種特殊的字體(常常是欄目標題之類)的時候,我們經常使用一張漢字圖片來代替。這也是一個比較麻煩的事情,因為作為標題,其內容常常是相當重要的關鍵字,如果使用圖片,蜘蛛是也無法讀取的。一個可能的解決方案是sIFR,但這方面我並不是很熟;網上搜了一下,似乎還不能應用於漢字。
對於圖片,我們常用的SEO方法是註明title和alt,如
<img alt="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都無法(或很難)被讀取。