ASP.NET的SEO: 服务器控件背后——SEO友好的Html和JavaScript

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 本系列目录   假设你需要从一个页面转向其他页面,下面有很多种方式,你是如何选择的呢?你能清晰的说明理由么?                HyperLink        LinkButton                                                                              如果你还有些迷茫,我建议你查看他们生成html之后的源代码。

本系列目录  

 

假设你需要从一个页面转向其他页面,下面有很多种方式,你是如何选择的呢?你能清晰的说明理由么?


        
<% -- 链接的表现形式 -- %>
        
< 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之后的源代码。
         < id ="HyperLink1"  href ="Default2.aspx" > HyperLink </ a >        
        
<% -- HyperLink解析成Html之后对应的就是一个单纯的超链接,href指向了要跳转的页面  -- %>
        
        
< id ="LinkButton1"  href ="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;LinkButton1&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Default2.aspx&quot;, false, true))" > LinkButton </ a >
        
<% -- LinkButton1虽然也是一个锚标记,但实际上是利用的JavaScript进行的跳转 -- %>
        
        
< input  type ="submit"  name ="Button1"  value ="Button"  onclick ="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Button1&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Default2.aspx&quot;, 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(&quot;ImageButton1&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Default2.aspx&quot;, false, false))"  style ="border-width:0px;"   />
        
<% -- ImageButton被解析成type = " image " 的input元素,同样通过JavaScript进行页面的跳转 -- %>
        
        
< 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. 当我们需要使用弹出页面时,通常的做法是:
< href ="#"  onclick ="window.open('popup.html','common','height=600,weight=800');" > common popup </ a >
根据我们上面的交代,这样的写法,对SEO而言,无疑也是不利的。所以我们应该使用下面的代码,即保证了弹出窗口的效果,也是SEO友好的。而且即使客户的浏览器不支持或者禁用掉JavaScript,页面一样能够顺利的跳转。
< 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都无法(或者很难)被读取。
相关文章
|
1月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
92 2
|
2月前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要?
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息,有助于提高页面的可索引性、相关性和用户体验,从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性,以提升网站在搜索引擎中的排名和流量。
|
2月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
63 3
|
2月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
51 4
|
2月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
79 0
html5+three.js公路开车小游戏源码
|
2月前
|
前端开发 搜索推荐 算法
|
2月前
|
数据采集 搜索推荐 算法
语义化的 HTML 对 SEO 的好处具体体现在哪些方面?
【10月更文挑战第24天】语义化的 HTML 通过提升搜索引擎对网页的理解能力、优化关键词匹配、增强页面结构清晰度以及提高网站整体质量评估等多个方面,为网站的 SEO 带来了显著的好处,有助于提高网站的可见性、流量和排名,从而实现更好的网络营销效果。
52 2
|
2月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
158 6
|
3月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
153 1
|
3月前
|
开发者 Windows
.NET 开源扁平化、美观的 C/S 控件库
【10月更文挑战第23天】介绍了三款适用于 .NET 平台的开源扁平化、美观的 C/S 控件库:MaterialSkin 采用 Google Material Design 风格,适合现代感界面;Krypton Toolkit 提供丰富控件,界面易于定制;Fluent Ribbon Control Suite 模仿 Office 界面,适合复杂功能应用。每款控件库均附有示例代码及 GitHub 链接。
154 0