正确使用JavaScript防止被搜索引擎惩罚
在使用javascript进行网页样式的控制时，会出现两个缺点，一是对用户有要求，有可以用户的浏览器禁用或者不支持javascript，导致想给用户展现的内容不能体现出来；二是可以会引起搜索引擎的误判，搜索引擎可以看到，但是用户却看不到，导致被惩罚。
在早几年前，就有黑帽seo者利用javascript进行作弊，利用display:none的CSS属性达到对用户隐藏关键词，而搜索引擎却是可见的，虽然现在很多SEOer们都知道这点，但却总是在无形中制造了这种特征，以致被搜索引擎惩罚。
当然这里并不是说不可以用javascript ,合理使用javascript是增加用户友好度的一个方法。我们先来看一个使用不当的例子。
CSS
.hide {display:none}
XHTML
<div class="display">
<a href="#" onclick="showText();">显示</a>
<div class="hide">珠海seo教你，这段文本是需要用户浏览器支持的，否则可能会使搜索引擎认为故意对用户隐藏内容。</div>
</div>
除了上面说的可能性外，这段代码还有个缺点就是javascript代码混合到了html结构中，应该将onclick方法放到外部的的js文件中，达到结构和行为分离的目的，让网页以渐进式的方式加强式和行为。
第一步，为了创建更加适合搜索引擎和用户的友好页面，先创建一个HTML文件，将js文件和css文件放在外部，并使用一点友好的名称来确定被操纵的div
<div class="display-box">
<div class="expand">珠海SEO，一致力于搜索引擎电子商务营销！</div>
</div>
<div class="display-box">
<div class="expand">珠海SEO，二致力于网站建设，软件系统架构！</div>
</div>
<div class="display-box">
<div class="expand">珠海SEO，三致力于网站运营！</div>
</div>
同一个文件，来看我们如何实现渐进式设计。
第二步，首先注意到网页中没有链接使DOM对象显示和隐藏，但是在头部有一个css文件
.expand {display:block}
.collapse {display:none}
第三步，是我们要待网页DOM元素加载完成后，使用js穿过页面，操纵想要的元素，这里我们通过一个方法，不过这个方法里首先要做的是判断用户是否支持javascript脚本，这里利用的是javascript的特性检测技术。
function expandCollapseBlocks(){
if(!document.getElementByTagName) {return;}
}
然后通过循环，将显示隐藏显示标签动态嵌入到网页中
var clink = document.createElement("a");
clink.className="close-box";
clink.href="#";
clink.innerHtml = "Expand";
divs[i].parentNode.insertBefore(clink,divs[i]);
接着给这个clink链接标签加上行为
clink.onclick = function(){
var displayBox = this.parentNode.getElementByTagName("div")[0];
if(this.innerHTML=="Expand"){
this.innerHTML = "Collapse";
displayBox.className= "expand";
}else{
......
}
};
第四部，也是最重要的一点，是将javascript脚本放到</body>标签之前，保证浏览器加载我网页元素后，Javascript才会去操纵页面。
window.onload = expandCollapseBlocks;
使用这种渐进式的方式，正确的架构HTMl，合理的使用Javascript，避免被搜索引擎处罚。
