ASP.NET教程:友好的Html和JS适合SEO

2024-05-04 17:32

本文主要是介绍ASP.NET教程:友好的Html和JS适合SEO,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

        <%--链接的表现形式--%>
        
<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都无法(或者很难)被读取。

作者:自由飞 http://www.cnblogs.com/freeflying/archive/2010/02/19/1669469.html


这篇关于ASP.NET教程:友好的Html和JS适合SEO的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/959727

相关文章

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制(JDK/CGLIB)、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》:本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

SpringBoot连接Redis集群教程

《SpringBoot连接Redis集群教程》:本文主要介绍SpringBoot连接Redis集群教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 依赖2. 修改配置文件3. 创建RedisClusterConfig4. 测试总结1. 依赖 <de

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.