詳解ASP.NET的SEO:伺服器控制元件背後故事
假設你需要從一個頁面轉向其他頁面,下面有很多種方式,你是如何選擇的呢?你能清晰的說明理由麼? 第一篇:詳解ASP.NET的SEO:RewritePath()方法
<%--連結的表現形式--%>
<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.aspx", false, true))">LinkButton</a>
<%--LinkButton1雖然也是一個錨標記,但實際上是利用的JavaScript進行的跳轉--%>
<input type="submit" name="Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", false, "", "Default2.aspx", 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", "", false, "", "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或表單進行頁面跳轉連結,如果一個普通的也能完成同樣的功能。一般來說,任何不能通過標準錨識別符號()進入的導航,都不會被蜘蛛檢索到。如果本來就使用的客戶端元素,我們應該比較容易注意到這一點;但當使用經過封裝處理過後的伺服器端控制元件時,我們就可能會大意了。 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生成的,所以你看不見我!";
}
<%--連結的表現形式--%>
<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.aspx", false, true))">LinkButton</a>
<%--LinkButton1雖然也是一個錨標記,但實際上是利用的JavaScript進行的跳轉--%>
<input type="submit" name="Button1" value="Button" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", false, "", "Default2.aspx", 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", "", false, "", "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或表單進行頁面跳轉連結,如果一個普通的也能完成同樣的功能。一般來說,任何不能通過標準錨識別符號()進入的導航,都不會被蜘蛛檢索到。如果本來就使用的客戶端元素,我們應該比較容易注意到這一點;但當使用經過封裝處理過後的伺服器端控制元件時,我們就可能會大意了。 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生成的,所以你看不見我!";
}
相關文章
- Redis持久化背後的故事Redis持久化
- Java main方法背後的故事?JavaAI
- Mac OS X 背後的故事Mac
- HTML5背後的故事HTML
- dyld背後的故事&原始碼分析原始碼
- 蘋果自動駕駛背後的故事蘋果自動駕駛
- 愛回收IPO背後的新老故事
- GCC編譯器背後的故事GC編譯
- RestCloud ETL 社群版背後的故事RESTCloud
- 微博春晚背後的技術故事
- 誰來背鍋?自動駕駛車禍背後的故事自動駕駛
- 10個社交網站背後的故事網站
- 對話清華大學周昊,詳解IJCAI傑出論文及其背後的故事AI
- 郭超:阿里雲Cassandra背後的故事阿里
- 嵌入式—編譯器背後的故事編譯
- AI Gossip - 人工智慧背後的小故事AIGo人工智慧
- 重磅釋出背後:POLARDB的中國故事
- SSH 協議埠號 22 背後的故事協議
- 微軟開源 .Net 平臺的背後故事微軟
- 騰訊與Github的魔幻會面背後的故事…Github
- 更好的 java 重試框架 sisyphus 背後的故事Java框架
- 詳解Windows 11背後的技術創新Windows
- 【前端軼事】Chrome 小恐龍背後的故事前端Chrome
- 請求 www.baidu.com 背後的故事AI
- 編譯器背後的故事(入門練習)編譯
- 谷歌氣球上網專案背後的故事谷歌
- 《Cut The Rope》 HTML 5版背後的開發故事HTML
- What CANN Can?一輛小車背後的智慧故事
- 微信支付商戶系統架構背後的故事架構
- 《碼出高效:Java開發手冊》背後的故事Java
- 揭祕電子遊戲背後音效製作的故事遊戲
- 開源筆記軟體 Joplin 背後的故事筆記
- 周朝陽新書《愛生活,做自己》背後的故事新書
- 瀏覽器新版本上線背後的故事瀏覽器
- 滑鼠打字的背後,隱藏著一個感人的故事
- 為你揭祕小程式音視訊背後的故事......
- 專利背後的故事 | 一種郵件安全控制方法
- TCP/IP協議之網路連結的背後故事TCP協議