13.6 第五阶段:页面优化
在完成关键字筛选后,接下来就要对页面进行优化,主要包括头部优化、关键字布局及代码优化。
13.6.1 头部优化
头部优化主要是页面标题、描述及关键字标签内容的拟写。下面以诺基亚N95的产品展示页面为例,介绍页面头部优化的技巧及方法。
1. 标题标签
根据前面为产品展示页面筛选出来的关键字,诺基亚N95的产品展示页面标题中需要表达以下关键字:“诺基亚N95”“诺基亚N95图片”“诺基亚N95报价”及“诺基亚N95评测”。
综合考虑标题长度及关键字词频等因素,应使用分隔符对标题中的关键字进行组合的方法来表达这些关键字,形式为:“诺基亚N95报价|图片|评测”。也就是说,手机频道的产品展示页面标题形式为:“品牌名称+产品型号+图片|报价|评测”。
2. 描述标签
描述标签内容应该围绕描述主关键字“诺基亚N95”而进行的,同时覆盖了所有被选择的辅关键字,即“诺基亚N95图片”“诺基亚N95报价”及“诺基亚N95评测”,如下所示。
<meta name="description" content="诺基亚N95:提供诺基亚N95手机图片、评论、详细参数等信息;收集了来自全国30多个城市地区经销商提供的诺基亚N95报价信息;以及我们团队对诺基亚N95评测的详细数据。">
3. 关键字标签
关键字标签中的内容要按照关键字的重要性进行排列:主关键字“诺基亚N95”出现在最前面;其次,就是辅关键字“诺基亚N95图片”“诺基亚N95报价”及“诺基亚N95评测”,如下所示。
<meta content="诺基亚N95,诺基亚N95图片,诺基亚N95报价,诺基亚N95评测" name="keywords">
13.6.2 关键字布局
关键字布局的目的是在网页上的重要区域中放置相对重要的内容,图13-15是主关键字“手机”在手机频道首页的分布情况,而手机频道首页如图13-16所示。
图13-16中的(1)、(2)、(3)、(4)对应的是图13-15中关键字出现的区域①、②、③、④。在(2)~(4)的区域中,主关键字“手机”通过栏目名称的形式进行展示,例如,“音乐手机”“特色手机”“手机比较”等。这样既达到增加页面主关键字“手机”词频的目的,又可以避免长篇的描述而影响页面美观。
13.6.3 代码优化
对页面代码进行优化,首先要查看并分析页面源代码中存在的问题,再针对实际情况制定调整方案。经过对易比网主要页面的源代码进行分析,制定的代码优化内容主要包括:CSS优化、清理垃圾代码及代码顺序调整。
1. CSS优化
由于易比网的页面是采用DIV+CSS的方式制作的,虽然这样可以精简大量代码,但搜索引擎一般情况下不解析CSS样式,因而识别不了页面中相关内容的样式,也就不能根据这些内容的样式判断页面的相关性。因此,CSS优化的首要任务就是避免使用CSS为重要内容定义样式,例如网页中的主关键字等内容。
此外,为了让网页中相对重要的内容能优先展示,要避免在网页的头部及主体内容中调用CSS样式,应该优先使用外部调用方式调用CSS样式(请参考5.2.3节)。
2. 垃圾代码清理
在易比网的主要页面中,除了要清除源代码中的默认属性、多余注释、空语句、空格等垃圾代码外,还要清理页面中为了实现特定功能而产生的垃圾代码。例如,网页中评分进度条的制作,如图13-17所示。
该评分进度条原来是采用控制Table中<td>长度的方式实现,以下是制作每根进度条所产生的代码:
<table width=143 border=0>
<tr>
<td width=108>
<table width=100 height=10 border=0>
<tr>
<td width=60 bgcolor=#0000FF></td>
<td width=30></td>
</tr>
</table>
<td width=49><span class=style2>90分</span></td>
</tr>
</table>
由于页面中评分进度条的数量庞大,产生的代码量也相当惊人。为了精简页面中的代码,这里使用控制图片width属性的方式制作评分进度条,代码如下所示:<img src="/img/du.gif" width=90>
这两种方式显示的效果是一样的,但两者所产生的代码量却存在非常大的差别。
3. 代码顺序调整
正常情况下,页面布局与HTML源代码的对应关系是:页面的左上→右上→左→右→左下→右下区域对应HTML源代码由上至下的内容。例如,把页面分成A、B、C、D几个区域,则A→B→C→D对应源代码的内容a→b→c→d,如图13-18所示。
易比网页面区域A→B→C→D对应的是HTML源代码的内容a→c→b→d,如图13-19所示。
在规划页面时,我们遵循了页面重要区域分布规律,即页面A、B、C、D区域中的内容的重要性关系是:A>B>C>D。但在HTML源代码中,B区域内容(对应源代码b)却在C区域内容(对应源代码c)之下。因此,代码顺序调整的任务就是把源代码中的c内容与b内容的顺序对调。
本书评论