因为不便透露客户的名称，所以我把我手头上负责SEO的这个化妆品网站称为S网站吧．在我第一次分析S网站时，我就发现S网站在所有的商品目录页中都加下了下拉框，下拉框里是六十多个化妆品品牌的名称，当用户点击下拉框时，就会拉出这一大串化妆品列表，并且是一屏显示不出来的，当用户点击化妆品名称时，就会跳转到对应的页面去．客户采用的源代码类似于这样：

<select name=”select1″ onChange=”lk();” class=”mainpage_list” style=”width: 158″>
<option value=”">品牌选择</option>
<option
value=”/showBrandAction/124_6.html”>AIGNER 爱歌那</option>
<option
value=”/showBrandAction/102_6.html”>ANNA SUI 安娜苏</option>
<option
value=”/showBrandAction/148_6.html”>ARAMIS 雅男士</option>
<option
value=”/showBrandAction/181_6.html”>AVENIR 艾文莉</option>
<option
value=”/showBrandAction/126_6.html”>BURBERRY 博伯利</option>

　　从S网站的这段的源代码可以看出，这样的跳转搜索引擎是无法跟从的，因为从原代码上看这并不是一个个的链接，所以这样的六十行源代码摆在网页源代码中，只会白白增加网页的代码量，却不能给品牌页带来站内链接，而且在搜索引擎结果页（SERP）中，这类品牌名称还占用了大量的网站描述语位置，让网页无法正确描述网页主要内容，所以说这些代码是非常不优良的代码．

现在在我心里，大体上有二种优化方案，可以从不同的角度，不同的深度去优化这段代码．

1、将下拉框改成图片＋响应点击打开隐藏层的方式．
具体应用实例大家可以看一下前程无忧网（http://www.51job.com/default-area.php?area=0200），当移动鼠标到形如下拉框的＂上海＂上时，就会横向显示一个地区列表．这就是一个使用隐藏层的方法来模拟下拉框控件的方法，它们的源代码片段是这样的：
<div style=”BORDER-RIGHT: #a5a5a5 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #a5a5a5 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 12px; BORDER-LEFT: #a5a5a5 1px solid; WIDTH: 300px; PADDING-TOP: 12px; BORDER-BOTTOM: #a5a5a5 1px solid; BACKGROUND-COLOR: #ffffff”>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=290 align=center>
<tr>
<td><a href=”http://www.51job.com/default-qz.php”>全国</a></td>
<td><a href=”http://www.51job.com/default-area.php?area=0100″>北京</a></td>
<td><a href=”http://www.51job.com/default-area.php?area=0200″>上海</a></td>
<td><a href=”http://www.51job.com/default-area.php?area=0302″>广州</a></td>
<td><a href=”http://www.51job.com/default-area.php?area=0400″>深圳</a></td>
<td><a href=”http://www.51job.com/default-area.php?area=1802″>武汉</a></td>
<td><a href=”http://www.51job.com/default-area.php?area=2002″>西安</a></td>
<td><a href=”http://www.51job.com/default-area.php?area=0802″>杭州</a></td>
<td><a href=”http://www.51job.com/default-area.php?area=0902″>成都</a></td>
搜索引擎是可以根据这样的源代码识别出来链接地址的，而前程无忧通过＂http://www.51job.com/in/area/Boot.js＂这个JS来实现需要时才显示的功能．这个方法的优点是保住了站内链接，不足是没有对代码进行精减．

2、 不改进链接，只是精减代码

意思是这种优化只为了精减无关的代码，它无法保住站内链接．它的源代码大概是这个样子：
<tr>
<td>
<select name=”brandId” onchange=”brandChange(document.searchBrandForm)” style=”width:115px;”>
<option value=”">选择品牌</option>
</select>
<select name=”smallName” style=”width:80px;”>
<option value=”l0-s0″>选择小类</option>
</select></td>
</tr>
　　　这种方法仍然使用下拉框控件，只是没有把select中的值从一开始就写到源代码中，而是当鼠标点击下拉框时，才使用程序去把所有的值给读出来．这种方法的优点是：大大减少了冗余代码，缺点是：没保住链接，另外用户在点击下拉框时，需要有一定的载入时间，可能会影响用户的感受。

其实还有一种优化方法，不过不适合这里，但在有的情况下，还是很有作用的．那就是，当下拉框里是有规律的字符串，并且链接地址也是有规律的字符串时，我们可以使用ＪＳ来拼装显示内容和链接地址，这种源代码就不会有大量重复的select内容了，而且也不用因临时加载影响用户使用的感受．不过，这种方法是无法让搜索引擎收录链接的．

总结以上三点，经我们的方法优化，可以在＂冗余代码＂＂链接无效＂中改善其中一项，想要同时都改善好像没有什么特别好的办法．
（达闻SEO版权所有，如若转载，请注明出处http://www.darwinmarketing.com/blogcn）

在 “关于下拉框的SEO处理方法的思考”   (2) 评论

1. dnf : ( 2008年03月11日 星期二 10:52 上午 )
   

   学习了。

   谢谢。

2. dongdonglang : ( 2008年03月12日 星期三 12:47 下午 )
   

   不错

提交评论

名字 (必填)
邮箱 (必填)
网站
验证码
内容