[原创] 浅谈 CSS display:none 对 SEO 及屏幕阅读器（screen reader）的影响

　　一提到 CSS 的 display：none，大家应该都很熟悉，如果需要将某 HTML 元素隐藏不显示的话，很多人都会使用它。也许你会问，这个还有必要再讲吗？且听我慢慢讲来。

　　现如今，很多网站都会使用 Tab， Slide 动画等这些常见的手段让用户能有好的使用体验，而且有时为了页面的简洁，我们也经常会用到 display：none 来达到隐藏元素的目的，再者很多鼎鼎大名的 JavaScript 库也会使用它，例如 jQuery。

　　既然大家都用 display：none，那么还有什么好谈的呢？

　　当然，合理合法的使用 display：none 对用户及 SEO 而言是正常的，搜索引擎也会去理会。可是如果非法的使用它们，借此想提高 SEO 的效果，就是非法的，而且搜索引擎也会对其进行惩罚。请看下面的例子：

<script language="JavaScript" type="text/javascript">
var o='d'+'i'+'v';
var a='style=\'disp';
var b='lay:';
var c='none\'';
document.write( "<"+o+a+b+c+">" );
</script>

　　类似这样的写法，大家可能也见过，有的连<script>标签也进行拆分连接，例如： "<scr" + "ipt>"，这样做的目的只有一个，就是“欺骗”：希望通过在页面上插入关键字或链接来提高 SEO 效果但是又不想让用户看到。无论是 SEO “欺骗”也好，还是出于其它目的进行“欺骗”也好，俗话说，出来混迟早是要还的。对于 SEO 而言，搜索引擎现在已经足够智能，对于上面这样简单的“欺骗”会进行严厉的处罚，所以任何侥幸的心理请不要有，因为随着算法的改进，各种黑帽（SEO 欺骗技术）早晚都会被发现的，而且一定会被重罚的。

　　刚才提到的是 display:none 对 SEO 的影响，还有一个影响可能是很多人都不知道的，那就是对“屏幕阅读器（screen reader）”的影响。

　　使用 iOS 设备的人现在是越来越多了，不知道其中的“VoiceOver”功能你是否知道，是否了解，是否使用过。出于人性化的考虑，很多移动设备包括 PC 几乎都有“辅助功能”，帮助身体不便的人来使用，其中“屏幕阅读器（screen reader）”就是帮助视力有障碍的人来读出屏幕上的内容的。

　　如果一个网页中的内容使用了 display:none，那就意味着，你同时拒绝了为用户显示及“屏幕阅读器（screen reader）”。然而这样的结果可能是你不想得到的，那么我们该怎么办呢？怎么才能既不显示在页面上，又对“屏幕阅读器（screen reader）”有效呢？请看如下的代码：

.visuallyhidden {
    position: absolute;
    width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;    
}

　　上面这段代码出自 HTML5BoilerPlate project（参见下文引用地址），你可以管它叫“可见的隐藏”，虽然用户看不到内容，但是“屏幕阅读器（screen reader）”却可以看见它。

　　你可能又会问了，“如果我使用了类似于 jQuery 这样的库怎么办？比如说，jQuery 的 slide 动画会动态的在元素上生成 display:none，那些的话，你说的这个办法不就不管用了吗？”

　　解决的办法当然是有的，请如下面的示例：

var $button = $('#myButton'),
    $text   = $('#myText'),
    visible = true;

$button.click(function(){
if ( visible ) {
  $text.slideUp('fast',function(){
    $text.addClass('hide')
         .slideDown(0);
  });
} else {
  $text.slideUp(0,function(){
    $text.removeClass('hide')
         .slideDown('fast');
  });
}
visible = ! visible;
});​

　　示例地址：http://jsfiddle.net/chriscoyier/zgtfA/1/

　　示例讲解：当 visible 为真时，此时元素的状态是可见的，首先执行动画 slideUp 将元素隐藏（此时元素上有 display:none），动画结束时，添加“可见的隐藏” CSS，让元素不可见，然后再立刻执行 slideDown 动画，持续时间为 0（即无动画过程），此时就移除了元素上的 display:none，而且元素依然是不可见的（因为有“可见的隐藏” CSS）。

　　当 visible 为假时，此时元素的状态是不可见的，首先执行 slideUp 动画将元素隐藏（此时元素上有 display:none），持续时间为 0（即无动画过程），动画结束后，移除“可见的隐藏” CSS，此时元素依然是隐藏的，因为有 display:none，之后再执行 slideDown 动画，显示元素内容。

　　总结：综上所述，若不考虑“屏幕阅读器（screen reader）”，合理合法的使用 display:none 是隐藏元素最简单的做法，而且还不用担心会被搜索引擎惩罚（因为不是黑帽），不会影响 SEO 效果。若你的网站支持移动设置访问，那么最好考虑到用户很可能是使用“屏幕阅读器（screen reader）”，因此你可以采用“可见的隐藏”方法来隐藏元素。

引用

HTML5BoilerPlate project
https://github.com/h5bp/html5-boilerplate
其它引用
http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/
http://www.alistapart.com/articles/now-you-see-me/
http://www.wangweibo.com/view/display_none.html