首页 > 其他分享> > 第十三章提升用户体验之搜索引擎优化及可访问性加强

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

2019-07-26 09:03:25 作者：互联网

原文链接：http://www.cnblogs.com/stone_lv/p/5083362.html

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

标签：aria,ARIA,搜索引擎,HTML,role,第十三章,体验,工具
来源： https://blog.csdn.net/weixin_30342827/article/details/97367068

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

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