第十三章 提升用户体验 之 搜索引擎优化及可访问性加强

1. 概述

  Search engine optimization (SEO) 是提升网站在搜索引擎非付费搜索结果排名的一个过程。

      现在的搜索引擎算法在内容解析过滤方面越来越高效,目前有两种方式来优化网站:

      ① 确保页面中的信息稳定,清晰。② 网站代码的结构合理也很重要。

      还有一些代码检查工具可以提高工作效率。

  本章内容包括:使用分析工具检测HTML、使用浏览器插件来查看和检测页面结构、编写语义标记 (HTML5 and ARIA)提升可访问性。

  *Web Accessibility Initiative-Accessible Rich Internet Applications (WAI-ARIA),是一系列用于描述如果提高动态内容可访问性的说明。

2. 主要内容

  2.1 使用分析工具检测HTML

    创建web程序后,应该使用工具来确保程序的HTML输出是正确的。这对ASP.NET MVC程序尤为重要。

    The Search Engine Optimization (SEO) Toolkit 是一种广泛使用的工具。该工具运行在IIS下。

    

    如果你没有访问IIS实体的权限,还有其他工具和技术可用。各个搜索引擎都提供了相应的工具。比如 Bing或者Google的 Webmaster 工具。

    W3C提供了免费的检测服务。

    

    另外一个可用的工具是Microsoft Visual Studio的页面检测(Page Inspector).

    应该在开发和测试阶段也进行兼容性测试。

  2.2 使用浏览器插件来查看和检测页面结构

    生成HTML页面的三个重要组成部分是 内容、展示 和 功能。

    内容包括 文字、图片、视频等相关信息,展示包括 样式以及其他有关观感的东西,功能主要由客户端脚本来实现。

  2.3 编写语义标记 (HTML5 and ARIA)提升可访问性

    W3C的WAI-ARIA,提供了针对残障人士提升可访问性的一种方式。

    WAI(Web Accessibility Initiative)

    ARIA(Accessible Rich Internet Applications)

    ARIA的四个主要关注点是:键盘定位和导航、关系、管理动态变化、展示的角色。

<html> 
<head> 
    <title>ARIA Example: Hello</title> 
</head> 
<body> 
    <div role="application"> 
        <div id="name" class="name"> 
            <h2>Hello</h2> 
            <p> 
                <strong>Instructions:</strong> Insert your name in the box below. An  
                <abbr title="Accessible Rich Internet Application">ARIA</abbr> 
                dialog box will display the result. To start over, press  
                the Try Again button. 
            </p> 
            <p class="input"> 
                <label id="name_label" for="name_text">Insert your Name:</label> 
                <input type="text" id="name_text" size="3" aria-labelledby="name_label" 
                    aria-invalid="false"/> 
            </p> 
            <p id="name_alert" role="alert" class="feedback"></p> 
            <p class="input"> 
                <input class="button" id="name_check" type="button" 
                    role="button" aria-pressed="false" value="Check Name"/> 
                <input class="button" id="name_again" type="button" 
                    role="button" aria-pressed="false" value="Try Again"/> 
            </p> 
        </div> 
    </div> 
</body> 
</html>

    * aria前缀:通过友好易接受方式传递给正在操作或更新的用户更完整的信息。 role属性:标记当前元素的作用和性质。

    role的一个重要类型是 landmark role,一般包括application, banner, complementary, contentinfo, form, main, navigation, search 8种,每种角色标记网页的一个标准片段。

    ASP.NET MVC 4 对ARIA提供了有限的支持。但是可以方便的使用HTML Helpers来实现对ARIA的支持:

public static IHtmlString ARIATextBoxFor<TModel, TProperty>(this HtmlHelper<TModel>  
                    helper, Expression<Func<TModel, TProperty>> exp)  
    { 
        ModelMetadata metadata = ModelMetadata.FromLambdaExpression(exp,  
              helper.ViewData);  
        var attr = new RouteValueDictionary(); 
        if (metadata.IsRequired)  
        { 
            attr.Add("aria-required", true);  
        } 
        return helper.TextBoxFor(exp, attr);  
    }

3. 总结

  ① 许多公司,尤其是电子商务公司,需要依靠搜索引擎来帮助其提高访问量。访问量越高,各项收入就越高。

  ② SEO的一个重要工作就是剔除阻碍搜索引擎爬虫的所有障碍。确保代码没有丢失或者错误的HTML标记,确保内容已经从样式和脚本信息中分离出来(对ASP.NET MVC尤其重要)。

  ③ HTML分析工具可以帮助验证HTML输出。这样的分析工具包括 IIS SEO 工具 以及 IE开发者工具。W3C也提供了在线的验证工具。

  ④ WAI-ARIA无障碍网页应用技术,可以帮助残障人士更好的理解和使用网站的内容。

  ⑤ ASP.NET MVC 4 目前没有提供对ARIA的内建支持。但是,可以使用HTML helpers来输出ARIA内容。

原文地址:https://www.cnblogs.com/stone_lv/p/5083362.html