当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > ASP.NET教程:友好的Html和JS适合SEO

ASP.NET
asp.net css注释的影响
ASP.NET与数据库相关技巧
关于HtmlForm控件
三色交替的下拉列表框
精通ASP.NET中弹出窗口技术
ASP.NET Forums与现有系统整合方案示例
ASP.NET操作IIS中的虚拟目录
DataGrid与SQL Server 2000数据绑定
如何让Web应用程序在Client端实现导出报表功能
如何保证web app中的Send Email线程稳定性
关于用ASP.Net识别远程主机服务器种类
ASP.NET中上传下载文件
提高ASP.NET性能的方法
asp.net StreamReader 创建文件
asp.net如何生成图片验证码(简单)
一个.net 压缩位图至JPEG的代码
简单的SQL Server数据库数据读取与数据操作
获取网站的RSS聚合到自己的网页
.Net程序中整站通用的防SQL注入函数
asp.net生成缩略图及给原始图加水印的函数

No. « 19 20 21 22 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-03-17   浏览: 161 ::
收藏到网摘: n/a

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

        <%--链接的表现形式--%>
        <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(&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进行页面的跳转--%>
        
        <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都无法（或者很难）被读取。

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