使用"Display: None"来隐藏内容是合法的SEO吗？

    如果你正在优化一个有上千页面的网站，那么你很有可能同一个CMS系统在打交道。但是，CMS系统经常会带来很多搜索引擎优化问题。如果CMS的开发者不熟悉搜索引擎工作原理的话，即使他们本来没有打算欺骗搜索引擎，但最终的结果还是会导致搜索引擎认为被欺骗了。很多大型网站都会用到预载、导航或者根据需要动态显示的内容。实现这些最常用到的技术是使用CSS中的"display: none"。这篇文章将为你详细讲解"display: none"属性。

 

关于display: none

一般大型网站都有庞大而又复杂的菜单结构。比如说，你的站点有10个主要的栏目，每个栏目下面又有5-10个次要栏目。当然你可以设计在网站的每一个页面都显示所有的主要栏目和次要栏目的标题。

但另一方面，这样做会带来很不好的用户体验。你一定希望当显示某个主题的时候，那个页面只显示和它相关的子菜单。光看这两句话很难理解，让我们看下面这两张图片。

当你在菜单1下面的主题1的页面时，你一定希望显示下面这样的菜单：

 
当你在菜单2下面的主题2的页面时，你一定希望显示下面这样的菜单：

你想要的这种效果就可以通过"display: none"属性来实现。你可以用一个简单的div语句就可以实现：

 
为什么使用"display: none"属性？

使用"display: none"最主要的一个原因是它很简单，可以保持整个页面代码结构的简洁。你可以把同样的代码放到网站的每个页面里，通过"display: none"属性就可以简单的控制内容是否显示。

当然，"display: none"的用处不只这些。如果你有一个动态网页程序，你希望在鼠标经过的时候显示子菜单。这里有一个Amazon网站的例子：

 
从图中我们可以看出鼠标经过Movies, Music & Games时，其子菜单会突出显示出来。Amazon的CMS在载入页面时只显示所有的主菜单，而隐藏了子菜单，只有当鼠标经过主菜单时，其相应的子菜单才会显示出来。这只是使用"display: none"的一个例子。

在一些网站上的跳转链接和为视障人士设计的屏幕阅读器也会使用"display: none"。屏幕阅读器读取的是屏幕上的内容，如果页面上有个菜单下面有100个链接，你一定希望屏幕阅读器直接跳过这些。毕竟，用户最想听的是页面上的主要内容，而不想花好几分钟去听链接列表。你可以在链接列表的最后放一个书签，这样当读到第一个链接时，就会自动跳转到最后的书签。这样会节省使用屏幕阅读器用户的很多时间。

 "display: none"属性不好的一面

但是，"display: none"还能用来隐藏文字。比如下面这个代码：

 
这个就涉及到了我们前面提到的欺骗问题。人们担心在网页上使用"display: none"属性会遭受到搜索引擎的惩罚。但这个技术的合理使用太普遍了，以至于很少有站点会因为使用"display: none"属性而遭受到惩罚。而且对搜索引擎来说，就目前的算法来识别出"display: none"是否欺骗搜索引擎，实在是太难了。

但如果你使用的CMS系统，也使用了"display: none"属性，那么你的网站多多少少也会有一些问题。最好是将"display: none"写在外部文件里，需要的时候在调用，以减少给网站带来的潜在的负面效果。