ASP.NET的SEO: 服务器控件背后——SEO友好的Html和JavaScript (3)
2010-07-20 09:43
585 查看
假设你需要从一个页面转向其他页面,下面有很多种方式,你是如何选择的呢?你能清晰的说明理由么?
如果你还有些迷茫,我建议你查看他们生成html之后的源代码。
知道了这些又有什么用呢?
用处很多,但我们今天只谈论SEO。
就目前的搜索引擎技术手段,JavaScript(当然也就包括了AJAX)、表单元素(如input)、Flash和Image都无法(或者很难)被读取。“蜘蛛”倾向于读取简单的html格式的文本。所以,从SEO的角度出发:
1. 不要使用JavaScript或表单进行页面跳转链接,如果一个普通的<a></a>也能完成同样的功能。一般来说,任何不能通过标准锚标识符(<a></a>)进入的导航,都不会被蜘蛛检索到。如果本来就使用的客户端元素,我们应该比较容易注意到这一点;但当使用经过封装处理过后的服务器端控件时,我们就可能会大意了。
2. 注意UpdatePanel里没有文本内容的情况。我们可以做一个简单的测试:
解析成Html后的源代码部分:
这是很好理解的,因为UpdatePanel一样是通过页面的JavaScript函数来生成页面内容的。查看源代码,我们能看到相关的JavaScript函数,但不能看到函数生成的内容。而搜索引擎的蜘蛛,它也是只看源代码的。
3. 当我们需要使用弹出页面时,通常的做法是:
根据我们上面的交代,这样的写法,对SEO而言,无疑也是不利的。所以我们应该使用下面的代码,即保证了弹出窗口的效果,也是SEO友好的。而且即使客户的浏览器不支持或者禁用掉JavaScript,页面一样能够顺利的跳转。
4. 当我们希望使用一种特殊的字体(常常是栏目标题之类)的时候,我们经常使用一张汉字图片来代替。这也是一个比较麻烦的事情,因为作为标题,其内容常常是相当重要的关键字,如果使用图片,蜘蛛是也无法读取的。一种可能的解决方案是sIFR,但这方面我并不是很熟;网上搜了一下,似乎还不能应用于汉字。
对于图片,我们常用的SEO方法是注明title和alt,如
不过这也属于“不可见的页面元素”,具体效果如何也很难精确衡量。但有总比没有强!
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都无法(或者很难)被读取。
<%--链接的表现形式--%> <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" mce_href="Default2.aspx">HyperLink</a> <%--HyperLink解析成Html之后对应的就是一个单纯的超链接,href指向了要跳转的页面 --%> <a id="LinkButton1" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("LinkButton1", "", false, "", "Default2.aspx", false, true))" mce_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" mce_src="upup.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ImageButton1", "", false, "", "Default2.aspx", false, false))" style="border-width:0px;" mce_style="border-width:0px;" /> <%--ImageButton被解析成type="image"的input元素,同样通过JavaScript进行页面的跳转--%> <a id="HyperLink2" href="Default2.aspx" mce_href="Default2.aspx"><img src="upup.gif" mce_src="upup.gif" style="border-width:0px;" mce_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="#" mce_href="#" onclick="window.open('popup.html','common','height=600,weight=800');">common popup</a>
根据我们上面的交代,这样的写法,对SEO而言,无疑也是不利的。所以我们应该使用下面的代码,即保证了弹出窗口的效果,也是SEO友好的。而且即使客户的浏览器不支持或者禁用掉JavaScript,页面一样能够顺利的跳转。
<a href="popup.html" mce_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" mce_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都无法(或者很难)被读取。
相关文章推荐
- ASP.NET的SEO: 服务器控件背后——SEO友好的Html和JavaScript
- ASP.NET的SEO: 服务器控件背后——SEO友好的Html和JavaScript
- ASP.NET的SEO(三):服务器控件背后—友好的Html和JavaScript
- asp.net的优化 服务器控件背后友好的Html和JS
- asp.net的优化 服务器控件背后友好的Html和JS
- 绝对酷,如何解决asp.net中javascript脚本的问题(使用服务器控件执行客户端脚本)
- javascript获取asp.net的服务器控件id
- 建站有很多技术,如 HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、http://ASP.NET、Web Services、浏览器脚本、服务器脚本等。它们的区别是什么?新手一点不懂,想理清所有这些技术之间的关系和应用范围。
- asp.net中什么时候用服务器控件,什么时候该用html控件
- 一起学asp.net基础文章二 服务器控件、客户端控件和html表单控件
- html,html服务器控件,asp。net服务器控件 区别,以及 onclick ,onserverclick ,onclientclick 事件....
- 用javascript来显示HTML控件的位置即javascript文件在ASP.NET中的运用
- Asp.net中的JavaScript使用之三javaScript访问服务器控件
- 技巧和诀窍:使用ASP.NET 2.0 CSS 控件适配器生成CSS友好的HTML输出
- asp.net javascript验证 服务器控件
- ASP.NET 服务器控件对应HTML标签
- 谈谈Asp.net网站优化二:关于 服务器控件 和 客户端控件(html标签)的选择
- 使用ASP.NET 2.0 CSS 控件适配器生成CSS友好的HTML输出
- 使用ASP.NET 2.0 CSS 控件适配器生成CSS友好的HTML输出
- asp.net 服务器控件调用javascript